Showcases index by category of use cases and keywords

Index by category of use cases

The use of DRAW-SVG editor functions are illustrated by 125 showcases which are classified into 15 use cases categories.

Index by keyword

The showcases are indexed by 265 keywords classified and grouped by 17 headings.

Quick start

Use case category 'Quick start' with 7 showcases.
See showcases details (document, description, steps).

Quick start drawing SVG elements

Quick startPlay all Quick start showcases continuously 

Quick start drawing arcs

Drawing all types of arcs (circles, cubics, quadratics)18 steps

Quick start drawing images

Drawing all types of images (URL, encoded, map, SVG)20 steps

Quick start drawing lines

Drawing all types of lines (oblique, vertical, horizontal, polylines)12 steps

Quick start drawing paths

Drawing all types of paths (free, composite, hole, curves, smooth surfaces)19 steps

Quick start drawing shapes

Drawing all types of shapes (arrows, flow charts, symbols, emojis, font Awesome icons)19 steps

Quick start drawing surfaces

Drawing all types of surfaces (rectangles, circles, ellipses, triangles, polygons)11 steps

Quick start drawing texts

Drawing all types of texts (simple, multi lines, paths, styled)27 steps

Draw elements

Use case category 'Draw elements' with 20 showcases.
See showcases details (document, description, steps).

Review of elements drawing tasks and options

Draw elementsPlay all Draw elements showcases continuously 


Drawing circle, cubic and quadratic arcs14 steps

Draw with point capture

Drawing with point capture to connect elements7 steps


Choosing and drawing emoji icons11 steps

Font Awesome icon

Choosing and drawing FontAwesome icons17 steps

Free path

Drawing free paths smoothed or not7 steps

Horizontal and vertical lines

Drawing horizontal, vertical and oblique lines5 steps

Horizontal and vertical path

Drawing paths with horizontal and vertical lines5 steps


Drawing images15 steps


Drawing lines14 steps


Insert and edit a Google Map in your SVG drawing9 steps

Path with curves

Drawing paths with curves11 steps

Path with a hole

Drawing paths with holes13 steps


Drawing polylines10 steps


Drawing rectangles13 steps

Repetitive drawing

Drawing multiple objects with the same  task in repeating mode11 steps


Drawing cataloged shapes and icons13 steps


Restart last drawing actions with the shortcut icons1 steps


Drawing cataloged symbols17 steps


Drawing triangles4 steps

Using a grid

Draw elements with grid snapping16 steps

Draw texts

Use case category 'Draw texts' with 4 showcases.
See showcases details (document, description, steps).

Review of texts drawing tasks

Draw textsPlay all Draw texts showcases continuously 

Multi-line text

Drawing text with multi lines14 steps

Multilingual text

Drawing a multilingual text with language selector
The text is displayed with its defined value for the navigator language
20 steps

Simple text

Create single-line text, edit style properties, and adjust length18 steps

Text on a path

Drawing texts on paths10 steps

Manage documents

Use case category 'Manage documents' with 8 showcases.
See showcases details (document, description, steps).

Managing SVG documents, loading and saving

Manage documentsPlay all Manage documents showcases continuously 

Open a document

Open SVG documents with different sources13 steps

Save document

Save SVG documents3 steps

Load SVG code

Loading the svg/xml code of a new document5 steps

Get SVG code

Getting the svg/xml code of the document5 steps

Include SVG

Insert a SVG inside the document with different sources14 steps

Modify dimensions

Setting the document dimensions, coordinates and window5 steps

PNG export

Export a SVG document in PNG format7 steps
Printing a document2 steps

Select elements

Use case category 'Select elements' with 5 showcases.
See showcases details (document, description, steps).

All selecting tasks and options

Select elementsPlay all Select elements showcases continuously 

Select with target highlighting

Using target highlighter to easy select objects9 steps

Select all elements

Selecting all elements of the svg document2 steps

Select elements

Select elements by :
- one click, cumulative with CTRL key
- one rectangle to select elements inside it, cumulative with CTRL key
- IDS with the drawn element list from selection menu
11 steps

Select multi-line text

Selecting and editing a multi-line text18 steps

Select multiple elements

Select mutiple elements by :
- add and remove with CTRL key
- one rectangle to select elements inside it
- IDS with the drawn element list from selection menu
10 steps

Style elements

Use case category 'Style elements' with 8 showcases.
See showcases details (document, description, steps).

Review of actions for creating and applying styles to elements

Style elementsPlay all Style elements showcases continuously 

Apply a style to multiple objects

Shows how to apply a style property to multiple objects in a single action4 steps

Copy style from an object

Shows how to copy the style of an object to others objects5 steps

Use CSS styles

Create and apply CSS classes41 steps

Use the color chooser

Using the color chooser18 steps

Use filters

Using filters (spotlight, relief, drop shadow, wrap)19 steps

Use gradients

Apply and customize gradients14 steps

Use markers

Apply and customize markers15 steps

Use patterns

Apply and customize patterns15 steps

Edit elements

Use case category 'Edit elements' with 8 showcases.
See showcases details (document, description, steps).

Review of editing actions on elements

Edit elementsPlay all Edit elements showcases continuously 

Center document contents

Shows how to center document contents3 steps

Copy elements

Shows how to copy elements7 steps

Group elements

Group elements
- ungroup them
- sharing style on the group
- transforming the group
- browsing its contents
17 steps
Create, copy, select and remove hyperlinks11 steps

Remove elements

Remove selected elements8 steps

Run action from floating menu

Using the selection floating menu:
- running actions
- moving the menu
- stop editing
4 steps

Undo and redo

Undoing and redoing actions4 steps

Zoom and pan

Changing view (zoom and scroll)15 steps

Edit texts

Use case category 'Edit texts' with 5 showcases.
See showcases details (document, description, steps).

Review of text editing actions

Edit textsPlay all Edit texts showcases continuously 

Change text font style

Styling a text, change font properties21 steps

Set text unselectable

Setting a text as unselectable 9 steps

Text adjust length

Adjust text length7 steps

Text box sizing

Setting the bounding box of a text by forcing line breaks
• existing line breaks are retained
• moving words are grayed out
• arrow keys can be used to control the box
6 steps

Text editor

Using the text editor to format multi-lines text17 steps

Edit geometries

Use case category 'Edit geometries' with 15 showcases.
See showcases details (document, description, steps).

Review of editing actions on element geometries

Edit geometriesPlay all Edit geometries showcases continuously 

Align elements

Shows how to align elements3 steps

Close paths

Shows how to close a path3 steps

Cut and merge paths

Shows how to cut and merge paths9 steps

Edit geometry properties

Editing geometry properties for each type of object (rectangle, circle, ellipse, image, line, polyline, path, polygon)23 steps

Edit huge path

Edit the geometry of a path with a lot of points10 steps

Edit path properties

Shows how to edit path properties.
• Change data, transform absolute to relative mode, modify decimals count.
• Optimize path description length.
• Edit the full text path description.
13 steps

Edit path segments

Change the structure of a path
Insert segments, change segments types and delete segments
14 steps

Insert curve intersections

Insert intersection points between curves (circle, ellipse, cubic, quadratic).
Elements can be refactored to path as needed.
12 steps

Insert line intersections

Insert intersection points between one element with straight lines and another geometrical element.
Intersection points can be connected with constraints.
Fixed size elements (line, rectangle, circle, ellipse) can be refactored to path to insert intersection points.
10 steps

Move and resize with arrow keys

Shows how to move and resize elements with arrow keys2 steps

Operations on shapes

Logical operations on closed shapes (union, intersection, difference)13 steps

Refactor elements

Change the type of an element to polyline, polygon or path depending on its geometry.22 steps

Reverse direction of lines

Shows how to reverse direction of lines, polylines and paths11 steps

Round the rectangle corners

Round the corners of a rectangle by applying a ratio in a circular or elliptical shape11 steps

Transform elements

Rotate, scale and flip elements15 steps

Edit points

Use case category 'Edit points' with 6 showcases.
See showcases details (document, description, steps).

Review of editing actions on element geometries points

Edit pointsPlay all Edit points showcases continuously 

Click and move a geometry point

Edit points of large objects by clicking on highlighted points under the cursor.
Useful for map and cad/cam plan edition.
6 steps

Editing points of polygons

Move, insert and remove points of polygons7 steps

Editing polylines

Edit polylines.
• Insert and remove points
• Cut and merge polylines
17 steps

Merging points

Move a point to another nearby one to merge their xy coordinates and connecting the objects7 steps

Select points

Select and move points with the point highlighting mode8 steps

Smooth a path

Smoothing a path that has only lineto commands5 steps

Edit definitions

Use case category 'Edit definitions' with 8 showcases.
See showcases details (document, description, steps).

Editing SVG definitions (patterns, gradients, markers, symbols, filters)

Edit definitionsPlay all Edit definitions showcases continuously 

Create gradients

Using the gradient editor14 steps

Create markers

Using the marker editor39 steps

Create patterns

Using the pattern editor35 steps

Create symbols

Creating symbols with the symbol editor9 steps

Customize symbols

Customize symbols, change and remove colors13 steps

Import SVG symbols

Creating symbols by SVG import7 steps

Import definitions

Import definitions (patterns, gradients, symbols, markers, filters) from another SVG document7 steps

Refactor symbols

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

Apply constraints

Use case category 'Apply constraints' with 9 showcases.
See showcases details (document, description, steps).

Review of constraints (connection, box, clip path) definition and edition actions

Apply constraintsPlay all Apply constraints showcases continuously 

Bounding box constraint

Define a bounding box constraint between two objects a rectangle, ellipse or circle and another element16 steps

Chaining constraints

Chain constraints.
Constraints are propagated between objects.
4 steps

Clipping constraints

Define clipping constraints7 steps

Constraint connected points

Link points between objects with connect constraints.
Constraints are executed in background after each user action on impacted objects.
11 steps

Copy constraints

Shows how to copy constraints.6 steps

Remove box constraints

Remove box constraints defined on an element by clicking on its bounding box6 steps

Remove clip path constraints

Remove clip path constraints defined on an element by clicking on its bounding box8 steps

Remove connection constraints

Remove connection constraints on points of an element or between two elements by clicking on linked points12 steps

Removing constraints

Remove constraints with properties dialog on elements and on saved file.
Undo removing constraints.
16 steps

Add media elements

Use case category 'Add media elements' with 4 showcases.
See showcases details (document, description, steps).

Adding and editing media controls (audio, video)

Add media elementsPlay all Add media elements showcases continuously 

Audio control

Adding an audio control inside SVG document8 steps

HTML Rich Text

Insert HTML text into an SVG document7 steps


Adding a video control inside SVG document9 steps

YouTube video

Adding YouTube video control inside SVG document9 steps

Using layers

Use case category 'Using layers' with 4 showcases.
See showcases details (document, description, steps).

Review of layers definition and edition actions

Using layersPlay all Using layers showcases continuously 

Manage layers

How to manage layers with a cartographic application.
A map with three layers, raster map, buildings and roads objects.
Select input layer, add layer, create objects inside a layer.
18 steps

Define layers style

Define the default style of layers for their objects15 steps

Change object's layer

Shows how to change the layer of an object.12 steps

Select and edit object's layer

Shows how to edit the layer of an object10 steps


Use case category 'Animations' with 14 showcases.
See showcases details (document, description, steps).

Create and edit SMIL animations

AnimationsPlay all Animations showcases continuously 

Animate attributes

Animate DOM attributes and style properties of elements25 steps

Animate path

Animate a closed quadratic arc with three drawn states (c,c1,c2)15 steps

Animate path with keyTimes

Animate a closed quadratic arc with three drawn states (c,c1,c2).
Use keyTimes to increase the pressure and slow down expansion and return to original state.
9 steps

Animate transform

Animate an element with translate, rotate, scale, skew transformations37 steps

Animate using keySplines

Animate attribute values with spline interpolation 25 steps

Animate using keyTimes

Animate using keyTimes with multiple values to control the transition speed of each value21 steps

Animate wave path

Animate a wave path with drawn states.
Each path structure must be the same.
Draw each wave curve state by copy and move each control point.
Move each curve to the same starting point.
Animate the wave path with each curve.
The following modifications on the curves are replicated on the animation by a constraint.
25 steps

Animations schedule

Describes the schedule of animations with their sequences.12 steps

Motion origin

Shows how to define the origin of a motion animation. 
Define the motion origin point on the target.
Select the moving method (transform or animate).
22 steps

Motion path

Shows how to define the motion path of a target using the three methods (refers, copy, describe).
The motion path can be defined with a geometric element of any type (rectangle, circle, ellipse. path).
Animations are updated by constraints when motion path changes.
Animations properties can be edited.
32 steps

Motion target group

When the motion target is transformed, the animation should be
applied to an enclosing group of the target.
20 steps

Motion using keyTimes

Animate motion using keyTimes/keySplines to set speed along the path with spline interpolation to accelerate and decelerate.
A demonstration with ski jumping
47 steps

Synchronization by events

Synchronize animations by events (begin, end, click, hyperlink, ..)30 steps

Using set command

Using the set command to fix elements state during animations26 steps

Keywords absolute .. begin

Keywords between .. circular

Keywords classes .. css

Keywords cubic .. dialog

Keywords different .. editor

Keywords elasticity .. filters

Keywords flip .. group

Keywords highlighted .. intersections

Keywords jpg .. logical

Keywords map .. must

Keywords mutiple .. point

Showcases that contain a keyword from mutiple to point.

Select multiple elements
Multilingual text
Merging points
Bounding box constraint Chaining constraints Change object's layer Constraint connected points Copy style from an object Edit geometry properties Click and move a geometry point Manage layers Merging points Repetitive drawing Select and edit object's layer Define layers style Apply a style to multiple objects Select with target highlighting
Horizontal and vertical lines Quick start drawing lines
Text on a path
Open a document
Operations on shapes
Edit path properties
Animate path with keyTimes Motion origin
Use CSS styles
Zoom and pan
Animate path with keyTimes Animate path Animate wave path Close paths Cut and merge paths Free path Path with curves Path with a hole Horizontal and vertical path Text on a path Edit geometry properties Edit huge path Edit path properties Edit path segments Insert curve intersections Insert line intersections Motion using keyTimes Motion path Quick start drawing paths Quick start drawing texts Refactor elements Remove clip path constraints Reverse direction of lines Smooth a path
Create patterns Import definitions Use patterns
Image PNG export
Animate wave path Constraint connected points Edit huge path Click and move a geometry point Editing points of polygons Editing polylines Insert curve intersections Insert line intersections Motion origin Draw with point capture Merging points Remove connection constraints Select points Select elements Smooth a path

Keywords polygon .. relief

Keywords remove .. scroll

Keywords segments .. snapping

Keywords sources .. target

Keywords task .. view

Keywords warp .. zoom

Showcases that contain a keyword from warp to zoom.

Use filters
Animate wave path
Modify dimensions
Text box sizing
Zoom and pan
Use filters
Get SVG code Load SVG code
YouTube video
Zoom and pan