drawsvg iconDRAWSVG user's guide
PreviousNextContentsPDFdrawsvg home

2.1. Introducing GUI DRAW-SVG

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, Animations, options).

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

Table 2.1. Main menu map

Image menu-document.png
Image menu-selection.png
Image menu-draw-elements.png
Image menu-draw-shapes.png
Image stroke-style-1.png
Image fill-style-1.png
Image text-style-1.png
Image marker-style-1.png
Image menu-animations.png

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 :

    Move a referenced element along a motion path.

  • Set :

    Provides a simple means of just setting the value of an attribute for a specified duration. It is useful to fix the state of an element during animations.

  • Gradients :

    Animate a gradient properties and its stop color elements. Transform the gradient (scale, rotate, translate).

  • Patterns :

    Animate a pattern properties and its content elements. Transform the pattern (scale, rotate, translate).

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

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

iconfunction
Image zoomoriginal2.svg
Return to the original view
Image zoomout-color.svg
Zoom out
Image zoomin-color.svg
Zoom in
Image zoomonpoint.svg
Zoom on the clicked point
Image zoomrect.svg
Zoom on a rectangle defined by its top left and bottom right corners
Image hand-move.svg
Move view
Image left.gif
Scroll left
Image right.gif
Scroll right
Image right.gif
Scroll up
Image down.gif
Scroll down
Image zoom-wheel.svg
Enable/Disable zoom mouse wheel
Image pointer.svg
Select items by a click on or near, or by a bounding box, use the control key to add or remove item
Image undo-grd.svg

Undo

Image redo-grd.svg

Redo

 

Layer chooser Image layer-edit.png


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

Note

The properties panel shows all attributes of the selected element.

Next: 2.2. Create your document
Contents: DrawSVG user's guide
Previous: Chapter 2. Quick Start