Chapter 6. Drawing shapes and symbols

Image task-shapeCatalogBtn.svg draw a shape or a symbol from the shape catalog

Image task-emojiBtn.svg draw an emoji symbol from the emoji catalog

Image task-fontawesomeBtn.svg draw a Font Awesome symbol from its free catalog

Image task-fanimalsCatalogBtn.svg draw a funny animal symbol from its catalog

Image task-symbolCatalogBtn.svg draw a symbol saved in the document definitions using the symbol chooser

The menu "Drawing shapes" provides ready-made shapes and symbols.

Each shape is a path element or a group of paths and geometric elements.

Once inserted into the document, each element of the shape is customizable (style and geometry).

A symbol is a complete drawing that is embedded in the document definitions and displayed by a use element.

Use elements have their own dimensions, orientation and default style for the symbol elements (e.g. fill and stroke for fontawesome symbol).

With the drawsvg editor you can create symbols, display them, edit them and refactor them.

How to draw a shape

To draw a shape :

Set drawing mode (corner or center, keep ratio or not)
Select it's model from the three sets (arrows, flowcharts, symbols) of the menu or from the shape catalog
Draw it with two points upper left and bottom right corners
Then defines its style properties fill and stroke

See draw shapes showcase for an interactive demonstration.

Figure 6.1. Shape catalog

The shape catalog provide a lot of models from IcoMoon free to use.

Custom catalog can be added with custom shape catalog tool .

How to draw a symbol

To draw a symbol :

Select a symbol from a catalog in the shapes menu :
ico-moon color icons , emoj , Font Awesome symbol , funny animal
or select an existing symbol from the document with the chooser
Then draw the upper left and bottom right corners of the symbol

See draw emoji , font Awesome icon , funny animal showcases for an interactive demonstrations.

Figure 6.2. IcoMoon free color icons

Figure 6.3. Emoji chooser

Search and select an emoji by category or name sourced from emojOne

Figure 6.4. Font Awesome icon chooser

Search and select a Font Awesome icon from the free desktop catalog

Set the fill and stroke properties of the use element to customize the symbol display.

Figure 6.5. Funny animal symbol chooser

Search and select a funny animal symbol over 300 drawings free to use

Select a section, the first symbol in it is selected, then click on the preferred symbol.

Or click on a page link, then click on the preferred symbol.

Click the Select button to draw it.

Figure 6.6. Symbol chooser

Search and select a symbol from the document

How to create a symbol

To create a symbol:

Draw its elements
Select them
Go to the Selection menu and definitions section
Click the define symbol icon to create the symbol and open the symbol dialog panel on it
The symbol is defined with the selected elements
The parameters are calculated by default
Enter the symbol ID then click OK to create the symbol

See creating symbols showcase for an online demonstration.

Note

The symbol dialog can be launched from the Document menu and definitions section from it's icon Image task-doc-sym.svg to edit all symbol definitions in the document.

How to refactor symbol

Refactor use element as group to update symbol content and create new one.

To refactor a symbol:

Draw the symbol
Copy the use element to refactor it
Go to the Selection menu and refactor section
Click the Refactor to group icon
The use element is replaced by a group with the symbol contents
Make all changes needed for the new symbol
Add/remove elements to the group,change geometries, edit style properties,..
Select elements and create the new symbol

See refactor symbols showcase for an online demonstration.

How to change the symbol displayed by a use element

To draw another symbol:

Select the use element
Click on the choose symbol icon in the floating menu:
Select the symbol to display from the chooser: