DRAW-SVGshowcases introductiontools


Showcases are sequence recordings of DRAW-SVG editor uses.
They can be replayed step by step or continuously without interruption for a quick review.

They reproduce the actions of the user on the UI.
Each step is guided by a small note.

Showcases use the expert profile without requiring login (see user profile).

It is the ideal tool to discover the features of the DRAW-SVG editor and to learn how to use them.


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

Quick start

Quick start drawing SVG elements
This category contains 7 showcases

Quick startPlay all Quick start showcases continuously 
Quick start drawing arcsDrawing all types of arcs (circles, cubics, quadratics)18 steps
Quick start drawing imagesDrawing all types of images (URL, encoded, map, SVG)20 steps
Quick start drawing linesDrawing all types of lines (oblique, vertical, horizontal, polylines)12 steps
Quick start drawing pathsDrawing all types of paths (free, composite, hole, curves, smooth surfaces)19 steps
Quick start drawing shapesDrawing all types of shapes (arrows, flow charts, symbols, emojis, font Awesome icons)19 steps
Quick start drawing surfacesDrawing all types of surfaces (rectangles, circles, ellipses, triangles, polygons)11 steps
Quick start drawing textsDrawing all types of texts (simple, multi lines, paths, styled)27 steps

Draw elements

Review of elements drawing tasks and options
This category contains 20 showcases

Draw elementsPlay all Draw elements showcases continuously 
ArcsDrawing circle, cubic and quadratic arcs14 steps
Draw with point captureDrawing with point capture to connect elements7 steps
EmojiChoosing and drawing emoji icons11 steps
Font Awesome iconChoosing and drawing FontAwesome icons17 steps
Free pathDrawing free paths smoothed or not7 steps
Horizontal and vertical linesDrawing horizontal, vertical and oblique lines5 steps
Horizontal and vertical pathDrawing paths with horizontal and vertical lines5 steps
ImageDrawing images15 steps
LineDrawing lines14 steps
MapInsert and edit a Google Map in your SVG drawing9 steps
Path with curvesDrawing paths with curves11 steps
Path with a holeDrawing paths with holes13 steps
PolylineDrawing polylines10 steps
RectangleDrawing rectangles13 steps
Repetitive drawingDrawing multiple objects with the same  task in repeating mode11 steps
ShapesDrawing cataloged shapes and icons13 steps
ShortcutsRestart last drawing actions with the shortcut icons1 steps
SymbolsDrawing cataloged symbols17 steps
TriangleDrawing triangles4 steps
Using a gridDraw elements with grid snapping16 steps

Draw texts

Review of texts drawing tasks
This category contains 4 showcases

Draw textsPlay all Draw texts showcases continuously 
Multi-line textDrawing text with multi lines14 steps
Multilingual textDrawing a multilingual text with language selector
The text is displayed with its defined value for the navigator language
20 steps
Simple textCreate single-line text, edit style properties, and adjust length18 steps
Text on a pathDrawing texts on paths10 steps

Manage documents

Managing SVG documents, loading and saving
This category contains 8 showcases

Manage documentsPlay all Manage documents showcases continuously 
Open a documentOpen SVG documents with different sources13 steps
Save documentSave SVG documents3 steps
Load SVG codeLoading the svg/xml code of a new document5 steps
Get SVG codeGetting the svg/xml code of the document5 steps
Include SVGInsert a SVG inside the document with different sources14 steps
Modify dimensionsSetting the document dimensions, coordinates and window5 steps
PNG exportExport a SVG document in PNG format7 steps
Print a documentPrinting a document2 steps

Select elements

All selecting tasks and options
This category contains 5 showcases

Select elementsPlay all Select elements showcases continuously 
Select with target highlightingUsing target highlighter to easy select objects9 steps
Select all elementsSelecting all elements of the svg document2 steps
Select elementsSelect 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 textSelecting and editing a multi-line text18 steps
Select multiple elementsSelect 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

Review of actions for creating and applying styles to elements
This category contains 8 showcases

Style elementsPlay all Style elements showcases continuously 
Apply a style to multiple objectsShows how to apply a style property to multiple objects in a single action4 steps
Copy style from an objectShows how to copy the style of an object to others objects5 steps
Use CSS stylesCreate and apply CSS classes41 steps
Use the color chooserUsing the color chooser18 steps
Use filtersUsing filters (spotlight, relief, drop shadow, wrap)19 steps
Use gradientsApply and customize gradients14 steps
Use markersApply and customize markers15 steps
Use patternsApply and customize patterns15 steps

Edit elements

Review of editing actions on elements
This category contains 8 showcases

Edit elementsPlay all Edit elements showcases continuously 
Center document contentsShows how to center document contents3 steps
Copy elementsShows how to copy elements7 steps
Group elementsGroup elements
- ungroup them
- sharing style on the group
- transforming the group
- browsing its contents
17 steps
HyperlinksCreate, copy, select and remove hyperlinks11 steps
Remove elementsRemove selected elements8 steps
Run action from floating menuUsing the selection floating menu:
- running actions
- moving the menu
- stop editing
4 steps
Undo and redoUndoing and redoing actions4 steps
Zoom and panChanging view (zoom and scroll)15 steps

Edit texts

Review of text editing actions
This category contains 5 showcases

Edit textsPlay all Edit texts showcases continuously 
Change text font styleStyling a text, change font properties21 steps
Set text unselectableSetting a text as unselectable 9 steps
Text adjust lengthAdjust text length7 steps
Text box sizingSetting 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 editorUsing the text editor to format multi-lines text17 steps

Edit geometries

Review of editing actions on element geometries
This category contains 15 showcases

Edit geometriesPlay all Edit geometries showcases continuously 
Align elementsShows how to align elements3 steps
Close pathsShows how to close a path3 steps
Cut and merge pathsShows how to cut and merge paths9 steps
Edit geometry propertiesEditing geometry properties for each type of object (rectangle, circle, ellipse, image, line, polyline, path, polygon)23 steps
Edit huge pathEdit the geometry of a path with a lot of points10 steps
Edit path propertiesShows 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 segmentsChange the structure of a path
Insert segments, change segments types and delete segments
14 steps
Insert curve intersectionsInsert intersection points between curves (circle, ellipse, cubic, quadratic).
Elements can be refactored to path as needed.
12 steps
Insert line intersectionsInsert 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 keysShows how to move and resize elements with arrow keys2 steps
Operations on shapesLogical operations on closed shapes (union, intersection, difference)13 steps
Refactor elementsChange the type of an element to polyline, polygon or path depending on its geometry.22 steps
Reverse direction of linesShows how to reverse direction of lines, polylines and paths11 steps
Round the rectangle cornersRound the corners of a rectangle by applying a ratio in a circular or elliptical shape11 steps
Transform elementsRotate, scale and flip elements15 steps

Edit points

Review of editing actions on element geometries points
This category contains 6 showcases

Edit pointsPlay all Edit points showcases continuously 
Click and move a geometry pointEdit 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 polygonsMove, insert and remove points of polygons7 steps
Editing polylinesEdit polylines.
• Insert and remove points
• Cut and merge polylines
17 steps
Merging pointsMove a point to another nearby one to merge their xy coordinates and connecting the objects7 steps
Select pointsSelect and move points with the point highlighting mode8 steps
Smooth a pathSmoothing a path that has only lineto commands5 steps

Edit definitions

Editing SVG definitions (patterns, gradients, markers, symbols, filters)
This category contains 8 showcases

Edit definitionsPlay all Edit definitions showcases continuously 
Create gradientsUsing the gradient editor14 steps
Create markersUsing the marker editor39 steps
Create patternsUsing the pattern editor35 steps
Create symbolsCreating symbols with the symbol editor9 steps
Customize symbolsCustomize symbols, change and remove colors13 steps
Import SVG symbolsCreating symbols by SVG import7 steps
Import definitionsImport definitions (patterns, gradients, symbols, markers, filters) from another SVG document7 steps
Refactor symbolsRefactor symbols 
Refactor use element as group to update symbol content and create new one.
17 steps

Apply constraints

Review of constraints (connection, box, clip path) definition and edition actions
This category contains 9 showcases

Apply constraintsPlay all Apply constraints showcases continuously 
Bounding box constraintDefine a bounding box constraint between two objects a rectangle, ellipse or circle and another element16 steps
Chaining constraintsChain constraints.
Constraints are propagated between objects.
4 steps
Clipping constraintsDefine clipping constraints7 steps
Constraint connected pointsLink points between objects with connect constraints.
Constraints are executed in background after each user action on impacted objects.
11 steps
Copy constraintsShows how to copy constraints.6 steps
Remove box constraintsRemove box constraints defined on an element by clicking on its bounding box6 steps
Remove clip path constraintsRemove clip path constraints defined on an element by clicking on its bounding box8 steps
Remove connection constraintsRemove connection constraints on points of an element or between two elements by clicking on linked points12 steps
Removing constraintsRemove constraints with properties dialog on elements and on saved file.
Undo removing constraints.
16 steps

Add media elements

Adding and editing media controls (audio, video)
This category contains 4 showcases

Add media elementsPlay all Add media elements showcases continuously 
Audio controlAdding an audio control inside SVG document8 steps
HTML Rich TextInsert HTML text into an SVG document7 steps
VideoAdding a video control inside SVG document9 steps
YouTube videoAdding YouTube video control inside SVG document9 steps

Using layers

Review of layers definition and edition actions
This category contains 4 showcases

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 styleDefine the default style of layers for their objects15 steps
Change object's layerShows how to change the layer of an object.12 steps
Select and edit object's layerShows how to edit the layer of an object10 steps


Create and edit SMIL animations
This category contains 10 showcases

AnimationsPlay all Animations showcases continuously 
Animate attributesAnimate DOM attributes and style properties of elements25 steps
Animate transformAnimate an element with translate, rotate, scale, skew transformations37 steps
Animate using keySplinesAnimate attribute values with spline interpolation 25 steps
Animate using keyTimesAnimate using keyTimes with multiple values to control the transition speed of each value21 steps
Animations scheduleDescribes 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 keyTimesAnimate 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 eventsSynchronize animations by events (begin, end, click, hyperlink, ..)30 steps