DRAW-SVG editor key features

User interface

Drawsvg menu
Using the SVG editor is simple and intuitive. Its user interface complies with the web application standard with its main menu in vertical orientation on the left and a horizontal bar at the top.

Vertical menu

The vertical menu is a sort of catalog of common actions that can be performed on the document.
  • Is drawn in SVG for an accurate representation of the styling effects applied to the drawing
  • Is organized into accordion-type sections (document, selection, etc.)
  • To open a section of the menu, simply click on its title, then scroll through the section using your mouse wheel or by clicking on the vertical entries on the left

Horizontal menu

The bar menu brings together the most common actions for quick and easy access.
drawsvg menu bar
  • Control the view (zoom in/out, scroll, etc.)
  • Activate selection, undo/redo actions
  • Organize layers

Quick start of document actions

  • To edit a document, open the document section of the menu, click the "Open" icon and select the SVG file to edit.
    The document can be loaded from several sources (a computer file, a URL, an image, a document downloaded from freesvg, or finally its source code)
  • To create a document, just click on the "New" icon in the document section.
  • To save it, click on the "Save" icon.

Other actions can be carried out from the document menu such as printing, exporting to PNG format, importing style definitions, modifying dimensions, etc.

Quick start of element actions

Draw, select and modify elements of all types

Look at this example of drawing a warning sign with four elements (cubic arc, text path, rectangle, symbol).

To draw elements:
  • Open the elements section of the menu and select the type of element to draw
  • Draw the element on the drawing area by clicking on its points as shown in the message at the top.
    Some element types require a fixed number of points and others an indefinite number such as paths, polylines and polygons.
To modify elements:
  • Select the element
    Selection is made easier by highlighting the elements present under the mouse.
  • Set its style properties (stroke, fill, text, marker) from the left menu.
  • Use the actions shown in the floating menu on the right side of the item to modify other properties (geometry, text, etc.).

Floating selection menu

floating selection menu
The floating menu presents the actions that can be performed on the selected elements according to the user profile level (basic or expert).
  • It can be moved by its horizontal bar
  • It provides quick and easy access to editing actions
  • A default action is automatically launched

Shape catalogs

Places page of emoji catalog
The editor has a large number of ready-to-use shapes grouped in different catalogs including:

Advanced style editors

Gradient editor
The drawsvg drawing tool includes advanced editors for all SVG style definitions:
  • Interactive editors all in SVG for faithful rendering
  • With examples for each editor for an easy start
  • Covers all definitions of gradients, patterns, filters, symbols, markers
  • Definitions can be imported from another SVG document

Dialog panels

Document Dimensions dialog box
Document Dimensions dialog box
Many actions require entering multiple values using a modal dialog panel.
  • Mobile pop-up dialogs
  • Simple and practical with two buttons to validate or cancel
  • Cancel or replay the modification by undo/redo

User actions

User actions are organized into three task categories and two user profiles (basic,expert):

document tasks
Extract from document type tasks
  • Tasks to manage documents
    42 tasks including 18 expert
  • Tasks to draw elements
    35 tasks including 14 expert
  • Tasks to modify the selected elements
    101 tasks including 50 expert

To explore features, read user's guide, or review tasks in many use cases with showcases tool.

Summary of features by common themes

Draw objects

  • Basic elements (rectangle, circle, ellipse, line, polyline, polygon)
  • Bezier arcs (cubic, quadratic)
  • Shapes, Emoji and Font Awesome icons
  • Straight and curved text, single and multi-lines, with full feature editor
  • Images
  • Ready-made shapes (a lot of icons, arrows, flowcharts..)

Expert profile

  • Advanced elements (path, Bezier curves)
  • Path segments insert, remove and refactor
  • Drawing geometry with point capture to connect objects
  • Media controls (YouTube, video, audio, rich text)
  • Multi-language text
  • Document composition with svg included
  • Google Maps

Modify objects

  • Click an object, select the closest point clicked or all those inside in rectangle
  • Select easy with target and points highlighting
  • Moving the control points of the geometry of an object
  • Transform objects
  • Full interactive editing text with the mouse
  • Download and encode PNG into image objects

Expert profile

  • Edit geometry data
  • Insert intersections
  • Logical operations on closed shapes (union, intersection, difference)
  • Move and merge points
  • Apply constraints to objects
  • Manage layers, change the order of objects, align edges
  • Browse map location
  • Import svg files into included svg objects

Rendering objects

  • Copying the style of an object on another
  • WYSIWYG editing style properties
  • Color chooser (RGB, HSV, palette)
  • Stroke style (color, scaling, width, dash, opacity, gradient, pattern, cap, join)
  • Fill style (color, opacity, gradient. pattern, rule)
  • Text style (family, size, font-style,weight, anchor, decoration)
  • Marker style (start, mid, end)
  • Import custom shape catalog

Expert profile

SMIL animations

Animate elements with expert profile

Manage your drawing files

  • Save and load SVG files on your computer
  • Load images as SVG files
  • Optimize SVG file size.
  • Conversion into PNG images
  • Publish on Board tool

Expert profile

Interactive editing tools

Full svg made editing tools for a best rendered and interaction

Integration in a web application

  • Use DRAW-SVG as an integrated drawing tool within your web site
  • Edit and save your svg documents
  • Integration by API based on mozilla jsSchannel
  • Customize UI with your own application using HTML, CSS and javascript
  • See jsChannel demo ,  demo popup,  custom app,  and dev guide