DRAW-SVG editor key features
User interface
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.- 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.
- 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 menuThe 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
The editor has a large number of ready-to-use shapes grouped in different catalogs including:
- Colorful emoji icons
from EmojiOne V2.2.7 bound by the Creative License - Well known fontawesome icons
free for desktop version 5.11.1 - And many other geometric shapes (arrows, common symbols, etc.)
- Extensible using the shape catalog generator tool
Advanced style editors
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 boxMany 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):
Extract from document type tasksTo explore features, read user's guide, or review tasks in many use cases with showcases tool.