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 start	Play 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 elements	Play all Draw elements showcases continuously
Arcs	Drawing circle, cubic and quadratic arcs	14 steps
Draw with point capture	Drawing with point capture to connect elements	7 steps
Emoji	Choosing and drawing emoji icons	11 steps
Font Awesome icon	Choosing and drawing FontAwesome icons	17 steps
Free path	Drawing free paths smoothed or not	7 steps
Horizontal and vertical lines	Drawing horizontal, vertical and oblique lines	5 steps
Horizontal and vertical path	Drawing paths with horizontal and vertical lines	5 steps
Image	Drawing images	15 steps
Line	Drawing lines	14 steps
Map	Insert and edit a Google Map in your SVG drawing	9 steps
Path with curves	Drawing paths with curves	11 steps
Path with a hole	Drawing paths with holes	13 steps
Polyline	Drawing polylines	10 steps
Rectangle	Drawing rectangles	13 steps
Repetitive drawing	Drawing multiple objects with the same task in repeating mode	11 steps
Shapes	Drawing cataloged shapes and icons	13 steps
Shortcuts	Restart last drawing actions with the shortcut icons	1 steps
Symbols	Drawing cataloged symbols	17 steps
Triangle	Drawing triangles	4 steps
Using a grid	Draw elements with grid snapping	16 steps

Draw texts

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

Review of texts drawing tasks

Draw texts	Play all Draw texts showcases continuously
Multi-line text	Drawing text with multi lines	14 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 length	18 steps
Text on a path	Drawing texts on paths	10 steps

Manage documents

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

Managing SVG documents, loading and saving

Manage documents	Play all Manage documents showcases continuously
Open a document	Open SVG documents with different sources	13 steps
Save document	Save SVG documents	3 steps
Load SVG code	Loading the svg/xml code of a new document	5 steps
Get SVG code	Getting the svg/xml code of the document	5 steps
Include SVG	Insert a SVG inside the document with different sources	14 steps
Modify dimensions	Setting the document dimensions, coordinates and window	5 steps
PNG export	Export a SVG document in PNG format	7 steps
Print a document	Printing a document	2 steps

Select elements

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

All selecting tasks and options

Select elements	Play all Select elements showcases continuously
Select with target highlighting	Using target highlighter to easy select objects	9 steps
Select all elements	Selecting all elements of the svg document	2 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 text	18 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 elements	Play all Style elements showcases continuously
Apply a style to multiple objects	Shows how to apply a style property to multiple objects in a single action	4 steps
Copy style from an object	Shows how to copy the style of an object to others objects	5 steps
Use CSS styles	Create and apply CSS classes	41 steps
Use the color chooser	Using the color chooser	18 steps
Use filters	Using filters (spotlight, relief, drop shadow, wrap)	19 steps
Use gradients	Apply and customize gradients	14 steps
Use markers	Apply and customize markers	15 steps
Use patterns	Apply and customize patterns	15 steps

Edit elements

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

Review of editing actions on elements

Edit elements	Play all Edit elements showcases continuously
Center document contents	Shows how to center document contents	3 steps
Copy elements	Shows how to copy elements	7 steps
Group elements	Group elements - ungroup them - sharing style on the group - transforming the group - browsing its contents	17 steps
Hyperlinks	Create, copy, select and remove hyperlinks	11 steps
Remove elements	Remove selected elements	8 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 actions	4 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 texts	Play all Edit texts showcases continuously
Change text font style	Styling a text, change font properties	21 steps
Set text unselectable	Setting a text as unselectable	9 steps
Text adjust length	Adjust text length	7 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 text	17 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 geometries	Play all Edit geometries showcases continuously
Align elements	Shows how to align elements	3 steps
Close paths	Shows how to close a path	3 steps
Cut and merge paths	Shows how to cut and merge paths	9 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 points	10 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 keys	2 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 paths	11 steps
Round the rectangle corners	Round the corners of a rectangle by applying a ratio in a circular or elliptical shape	11 steps
Transform elements	Rotate, scale and flip elements	15 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 points	Play 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 polygons	7 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 objects	7 steps
Select points	Select and move points with the point highlighting mode	8 steps
Smooth a path	Smoothing a path that has only lineto commands	5 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 definitions	Play all Edit definitions showcases continuously
Create gradients	Using the gradient editor	14 steps
Create markers	Using the marker editor	39 steps
Create patterns	Using the pattern editor	35 steps
Create symbols	Creating symbols with the symbol editor	9 steps
Customize symbols	Customize symbols, change and remove colors	13 steps
Import SVG symbols	Creating symbols by SVG import	7 steps
Import definitions	Import definitions (patterns, gradients, symbols, markers, filters) from another SVG document	7 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 constraints	Play all Apply constraints showcases continuously
Bounding box constraint	Define a bounding box constraint between two objects a rectangle, ellipse or circle and another element	16 steps
Chaining constraints	Chain constraints. Constraints are propagated between objects.	4 steps
Clipping constraints	Define clipping constraints	7 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 box	6 steps
Remove clip path constraints	Remove clip path constraints defined on an element by clicking on its bounding box	8 steps
Remove connection constraints	Remove connection constraints on points of an element or between two elements by clicking on linked points	12 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 elements	Play all Add media elements showcases continuously
Audio control	Adding an audio control inside SVG document	8 steps
HTML Rich Text	Insert HTML text into an SVG document	7 steps
Video	Adding a video control inside SVG document	9 steps
YouTube video	Adding YouTube video control inside SVG document	9 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 layers	Play 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 objects	15 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 object	10 steps

Animations

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

Create and edit SMIL animations

Animations	Play all Animations showcases continuously
Animate attributes	Animate DOM attributes and style properties of elements	25 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 transformations	37 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 value	21 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 animations	26 steps