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 133 showcases which are classified into 15 use cases categories.

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 : circle, 3 points cubic, 4 points quadratic, 3 points	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 9 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
Load a freesvg.org document	Load SVG documents from freesvg.org collection	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 9 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 linear gradient	Use the gradient editor to create a linear gradient with 3 colors (blue, white, red). And apply it to fill a shape and text. The gradient editor is available with the expert profile	15 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 20 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 gradients	Animate linear and radial gradients properties (x1, y1, x2, y2, cx, cy, fx, fy, r, offset, stop-color, stop-opacity), transform translate scale.	35 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 patterns	Animate the pattern properties and its content elements. Three examples of pattern animation: Pattern x origin Scale the pattern Rotate the content elements	24 steps
Animate stroke-color	Animating the line color helps to highlight the shape. Use the mirror effect by returning the line color to its initial value	14 steps
Animate stroke-dasharray	The stroke-dasharray property controls the pattern of dashes and spaces used to form the shape of a path. Its animation can simulate a flow on a path. For this: the initial value of the property must be set with a zero-length dash followed by a space of the path length, and the destination value of the property with a dash of the path length followed by a zero-length space. The values of the property are predefined thus by drawsvg with the calculated length of the path.	11 steps
Animate stroke-dashoffset	The stroke-dashoffset property specifies the distance into the repeated dash pattern (defined by stroke-dasharray) to start the stroke dashing at the beginning of the path. The animation of this property allows in particular to give the illusion of the movement of a train on its track. This showcase illustrates this kind of animation.	17 steps
Animate stroke-width	Animating the stroke-width property allows the shape to be highlighted. Use the mirror effect by increasing the thickness of the line and then returning it to its initial value	11 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	48 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

Showcases index by keyword

align: Align elements Select multi-line text Text editor
arrow: Move and resize with arrow keys Quick start drawing shapes Text box sizing
attribute: Animate using keySplines Animate attributes
bounding: Bounding box constraint Remove box constraints Remove clip path constraints Text box sizing
circle: Bounding box constraint Arcs Edit geometry properties Insert curve intersections Insert line intersections Motion path Quick start drawing arcs Quick start drawing surfaces
clipping: Clipping constraints Remove clip path constraints
closed: Animate path with keyTimes Animate path Close paths Path with curves Path with a hole Horizontal and vertical path Operations on shapes
code: Get SVG code Include SVG Load SVG code
color: Animate gradients Animate stroke-color Use the color chooser Create linear gradient Customize symbols
connected: Constraint connected points Insert line intersections Draw with point capture Merging points Remove connection constraints
constraint: Animate wave path Bounding box constraint Chaining constraints Clipping constraints Constraint connected points Copy constraints Insert line intersections Motion path Remove box constraints Remove clip path constraints Remove connection constraints Removing constraints
content: Animate patterns Center document contents Group elements Refactor symbols
controls: Animate stroke-dasharray Animate using keyTimes Animate wave path Audio control Video YouTube video Select elements Text box sizing
coordinates: Merging points Modify dimensions
copy: Animate wave path Copy constraints Copy style from an object Copy elements Hyperlinks Motion path
cubic: Arcs Path with curves Insert curve intersections Quick start drawing arcs
curve: Animate wave path Path with curves Insert curve intersections Quick start drawing paths
customize: Customize symbols Use gradients Use markers Use patterns
cut: Cut and merge paths Editing polylines
dasharray: Animate stroke-dasharray Animate stroke-dashoffset
dashes: Animate stroke-dasharray Animate stroke-dashoffset
definitions: Create linear gradient Create gradients Create markers Create patterns Create symbols Customize symbols Import definitions Import SVG symbols Refactor symbols
document: Center document contents Audio control HTML Rich Text Video YouTube video PNG export Get SVG code Import definitions Include SVG Load SVG code Load a freesvg.org document Open a document Print a document Save document Select all elements Modify dimensions
effect: Animate stroke-color Animate stroke-width
ellipse: Bounding box constraint Edit geometry properties Insert curve intersections Insert line intersections Motion path Quick start drawing surfaces
emoji: Emoji Quick start drawing shapes
encode: Image Map Quick start drawing images
end: Synchronization by events Use markers
file: Image Removing constraints Save document
fill: Use the color chooser Create linear gradient
filters: Import definitions Smooth a path Use filters
followed: Animate stroke-dasharray Animate wave path
font: Change text font style Font Awesome icon Quick start drawing shapes
format: PNG export Text editor
geometries: Align elements Close paths Cut and merge paths Edit geometry properties Edit huge path Edit path properties Edit path segments Click and move a geometry point Insert curve intersections Insert line intersections Move and resize with arrow keys Refactor elements Reverse direction of lines Round the rectangle corners Operations on shapes Transform elements
gradients: Animate gradients Create linear gradient Create gradients Import definitions Use gradients
grid: Create patterns Using a grid
group: Group elements Motion target group Refactor symbols
highlight: Animate stroke-color Animate stroke-width Click and move a geometry point Select points Select with target highlighting
hole: Path with a hole Quick start drawing paths
horizontal: Horizontal and vertical lines Horizontal and vertical path Quick start drawing lines
hyperlink: Synchronization by events Hyperlinks
icons: Emoji Shapes Shortcuts Font Awesome icon Quick start drawing shapes
image: Image Map Edit geometry properties Load a freesvg.org document Open a document Quick start drawing images
import: Import definitions Import SVG symbols Include SVG
initial: Animate stroke-dasharray Animate stroke-color Animate stroke-width
interpolation: Animate using keySplines Motion using keyTimes
intersections: Insert curve intersections Insert line intersections Operations on shapes
keys: Move and resize with arrow keys Select multiple elements Select elements Text box sizing
keysplines: Animate using keySplines Motion using keyTimes
keytimes: Animate using keyTimes Animate path with keyTimes Motion using keyTimes
layers: Change object's layer Manage layers Select and edit object's layer Define layers style
length: Animate stroke-dasharray Simple text Edit path properties Text adjust length
line: Animate stroke-color Animate stroke-width Horizontal and vertical lines Line Multi-line text Horizontal and vertical path Simple text Edit geometry properties Insert line intersections Quick start drawing lines Quick start drawing texts Reverse direction of lines Select multi-line text Text box sizing Text editor Use gradients Use patterns
linear: Animate gradients Create linear gradient Create gradients
link: Constraint connected points Remove connection constraints Select multi-line text Text editor
map: Map Click and move a geometry point Manage layers Quick start drawing images Zoom and pan
markers: Create markers Import definitions Use markers
media: Audio control HTML Rich Text Video YouTube video
merge: Cut and merge paths Editing polylines Merging points
mirror: Animate stroke-color Animate stroke-width
motion: Motion target group Motion using keyTimes Motion origin Motion path
offset: Animate gradients Text on a path
open: Load a freesvg.org document Open a document
origin: Animate patterns Animate path with keyTimes Motion origin
path: Animate stroke-dasharray Animate stroke-dashoffset 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
patterns: Animate patterns Animate stroke-dasharray Animate stroke-dashoffset Create patterns Import definitions Use patterns
png: Image PNG export
point: 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 Quick start drawing arcs Remove connection constraints Select points Select elements Smooth a path
polygon: Edit geometry properties Editing points of polygons Quick start drawing surfaces Refactor elements
polyline: Polyline Edit geometry properties Editing polylines Quick start drawing lines Refactor elements Reverse direction of lines Use markers
properties: Animate gradients Animate patterns Animate stroke-dasharray Animate stroke-dashoffset Animate stroke-width Animate attributes Change text font style Simple text Edit geometry properties Edit path properties Motion path Removing constraints Apply a style to multiple objects
quadratic: Animate path with keyTimes Animate path Arcs Insert curve intersections Quick start drawing arcs
radial: Animate gradients Create gradients
refactored: Insert curve intersections Insert line intersections Refactor symbols Refactor elements
remove: Customize symbols Editing points of polygons Editing polylines Hyperlinks Remove box constraints Remove clip path constraints Remove connection constraints Removing constraints Remove elements Select multiple elements
repeated: Animate stroke-dashoffset Repetitive drawing
rotate: Animate patterns Animate transform Transform elements
scale: Animate gradients Animate patterns Animate transform Transform elements
shape: Animate stroke-dasharray Animate stroke-color Animate stroke-width Create linear gradient Shapes Quick start drawing shapes Round the rectangle corners Operations on shapes Use gradients Use patterns
shift: Move and resize with arrow keys Select elements
single: Simple text Apply a style to multiple objects
smoothed: Free path Quick start drawing paths Smooth a path
sources: Include SVG Open a document
spaces: Animate stroke-dasharray Animate stroke-dashoffset
speed: Animate using keyTimes Motion using keyTimes
spline: Animate using keySplines Motion using keyTimes
start: Animate stroke-dashoffset Animate wave path Quick start drawing arcs Quick start drawing images Quick start drawing lines Quick start drawing paths Quick start drawing shapes Quick start drawing surfaces Quick start drawing texts Use markers
stroke: Animate stroke-dasharray Animate stroke-dashoffset Animate stroke-color Animate stroke-width Use the color chooser
structure: Animate wave path Edit path segments
style: Animate stroke-dashoffset Animate attributes Change text font style Use the color chooser Copy style from an object Simple text Group elements Quick start drawing texts Select multi-line text Define layers style Apply a style to multiple objects Text editor Use CSS styles Use filters Use gradients Use markers Use patterns
surfaces: Quick start drawing paths Quick start drawing surfaces
symbols: Create symbols Customize symbols Symbols Import definitions Import SVG symbols Quick start drawing shapes Refactor symbols
texts: Change text font style Create linear gradient HTML Rich Text Multilingual text Multi-line text Simple text Text on a path Edit path properties Quick start drawing texts Select multi-line text Text box sizing Text editor Text adjust length Set text unselectable Use gradients Use patterns
transform: Animate gradients Animate transform Edit path properties Group elements Motion target group Motion origin Transform elements
translate: Animate gradients Animate transform
triangle: Triangle Quick start drawing surfaces
undo: Removing constraints Undo and redo
url: Image Load a freesvg.org document Open a document Quick start drawing images
value: Animate stroke-dasharray Animate using keySplines Animate using keyTimes Animate stroke-color Animate stroke-width Multilingual text
vertical: Horizontal and vertical lines Horizontal and vertical path Quick start drawing lines
video: Video YouTube video
white: Animate stroke-dashoffset Create linear gradient
xml: Get SVG code Load SVG code