drawsvg iconDRAWSVG user's guide

2.1. Introducing GUI DRAW-SVG

2.1.1. Main menu
2.1.2. Actions bar
2.1.3. Selection floating menu
2.1.4. Dialog panels

The GUI DRAW-SVG consists of :

Figure 2.1. Introduction GUI

Introduction GUI

Then in addition, buttons and links:

2.1.1. Main menu

The main menu is composed of sub menus (Document, Selection, Elements, Shapes, Media, Stroke style, Fill Style, Text Style, Marker style, options).

Each sub-menu has functions in the form of icons.

Table 2.1. Main menu map

Table 2.2. Sub-menus features

Document sub-menus:

  • New : create, open, save document.

  • Print: : print, png export document.

  • Dimensions ; edit, resize dimensions.

  • Contents : browse layers, define multi-language support.

  • Definitions : import from another document, define gradients, patterns filters, markers, css styles.

  • Samples : loading samples

Selection sub-menus:

  • Select : select elements, apply style of selected element to another, select background rectangle.

  • Draw: : select elements from drawn list.

  • Order ; move selected elements to top of its layer, to bottom of its layer, forward one, back one.

  • Align : align selected elements to top border, middle, bottom, left, center, right.

  • Distribute equally : distribute space between selected element horizontal, vertical.

  • Definitions : use selected elements to define markers and patterns

Elements sub-menus, draw:

  • Text : draw text, path, free path.

  • Draw: : select elements from drawn list.

  • Image ; insert an image, insert a map, insert an svg document.

  • Line : draw line, polyline, polygon.

  • Rect : draw rectangle, circle, ellipse.

  • Arcs : draw circle arc, cubic arc, quadratic arc.

  • Cubic : draw cubic curve, closed curve.

  • Quadratic : draw quadratic curve, closed curve.

  • Cubic smooth : draw cubic smooth curve, closed curve.

  • Quadratic smooth : draw quadratic smooth curve, closed curve.

Shapes sub-menus, insert:

  • Draw object from : draw shapes by corner, center.

  • Catalog : select and insert shape from drawsvg catalog, emojis icones, Font Awesome icones.

  • Arrows ; select and insert shape from arrows list.

  • Flowcharts ; select and insert shape from flowcharts list.

  • Symbols ; select and insert shape from symbols list.

Media sub-menus, insert:

  • Controls : insert

    HTML audio,

    video control,

    HTM rich text,

    multi-language text,

    YouTube control

Stroke style sub-menus, set selected element stroke style

  • Transparent : set stroke style to transparent.

  • Color : set stroke color.

  • Width ; set stroke width.

  • Dash ; set stroke dash.

  • Opacity ; set stroke opacity.

  • Gradient ; set stroke gradient.

  • Cap ; set stroke line cap.

  • Join ; set stroke line join.

  • Pattern ; set stroke pattern.

  • Effect ; set vector effect as scaling or not.

Fill style sub-menus, set selected element fill style

  • Transparent : set fill style to transparent.

  • Color : set fill color.

  • Opacity ; set fill opacity.

  • Gradient ; set fill gradient.

  • Pattern ; set fill pattern.

  • Rule ; set fill rule to evenodd or nonzero.

Text style sub-menus, set selected text style

  • Family : set font family.

  • Size : set font size.

  • Style ; set font style to normal, italic, oblique.

  • Weight ; set font weight.

  • Anchor ; set text anchor to start, middle, end.

  • Decoration ; set text decoration to underline, overline, line through, blink.

Marker style sub-menus, set selected line marker style

  • Samples : apply one of default marker style samples.

  • Start : set start marker from the list.

  • Mid ; set middle marker from the list.

  • End ; set end marker from the list.

Animations sub-menus,

  • Pause :

    Pause all animations.

  • Play :

    Unpause all animations.

  • Scheduler :

    View animations planning.

  • Attribute :

    Animate attribute, add an animate element on the selected object, edit all animate elements of the document.

  • Transform :

    Coming soon.

  • Motion :

    Coming soon.

Options sub-menus,

  • Animate menus :

    Animates the menu when opening a sub-menu with SMIL animations.


To open a sub-menu :

  1. Click on the title of the sub-menu

  2. A sub-menu is divided into vertical tabs. To access the content of a tab, click its title in the vertical bar.

  3. Click on the sub-menu item.

Figure 2.2. Open a menu

Open a menu


Scrolling in the main menu is possible with the mouse wheel :

  • on the left side of the main menu, closing the current sub-menu and opening the next or previous one,

  • inside a sub-menu, scrolling down or up inisde it's area

2.1.2. Actions bar

The Action Bar provides functions on the view (Original view, zoom out, zoom in, zoom on point on Zoom rectangle Scroll down left top right), selecting drawn elements, undo and redo functions.

Table 2.3. Actions bar

Return to the original view
Zoom out
Zoom in
Zoom on the clicked point
Zoom on a rectangle defined by its top left and bottom right corners
Move view
Scroll left
Scroll right
Scroll up
Scroll down
Enable/Disable zoom mouse wheel
Select items by a click on or near, or by a bounding box, use the control key to add or remove item




Layer chooser

2.1.3. Selection floating menu

Each selected shape has a floating menu that provides editing tools for selection.When an editing tool is activated, it displays a help message at the top right of the document.

The selection menu can be moved with it's bar, stopped with it's quit button.

When the mouse is over the icon of a function, it's title appears on the right side of the icon.

Next, the floating menu of an image element.

Figure 2.3. Image floating menu

Image floating menu

2.1.4. Dialog panels

Some functions use modal dialog panels, such as " edit properties" from the floating menu.

Figure 2.4. Image properties panel

Image properties panel


The properties panel shows all attributes of the selected element.