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 :

an accordion-style main menu,
an action bar,
A floating menu graphic editing the selection,
dialog panels in modal mode (ex Google map dialog panel ),
svg editor panels which interacts with the drawing (ex filter path panel )

Figure 2.1. Introduction GUI

Then in addition, buttons and links:

documentation, view this documentation,
about, gives informations about DRAW SVG such as release notes,
news, new features of the current release,
letter, send a message to us,
links to additional sites and partners

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 :

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

Figure 2.2. Open a menu

Note

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

icon

function

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

Undo

Redo

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

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

Note

The properties panel shows all attributes of the selected element.