Chapter 1. Quick Start

Table of Contents

1.1. Introducing GUI DRAW-SVG
1.1.1. Main menu
1.1.2. Actions bar
1.1.3. Selection floating menu
1.1.4. Dialog panels
1.2. Create your document
1.3. Drawing a line
1.4. Editing a line
1.5. Drawing a rectangle
1.6. Editing a rectangle
1.7. Drawing a text
1.8. Editing a text
1.9. Using patterns
1.10. Using gradients
1.11. Using markers

1.1. Introducing GUI DRAW-SVG

In addition to this introduction see these available resources:

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 1.1. Introduction GUI

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

1.1.1. Main menu

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

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

Table 1.1. Main menu map


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

Figure 1.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

1.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 1.2. 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



1.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 1.3. Image floating menu

Image floating menu

1.1.4. Dialog panels

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

Figure 1.4. Image properties panel

Image properties panel


The properties panel shows all attributes of the selected element.