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 startPlay 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 elementsPlay all Draw elements showcases continuously 

Arcs

Drawing circle, cubic and quadratic arcs14 steps

Draw with point capture

Drawing with point capture to connect elements7 steps

Emoji

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

Image

Drawing images15 steps

Line

Drawing lines14 steps

Map

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

Polyline

Drawing polylines10 steps

Rectangle

Drawing rectangles13 steps

Repetitive drawing

Drawing multiple objects with the same  task in repeating mode11 steps

Shapes

Drawing cataloged shapes and icons13 steps

Shortcuts

Restart last drawing actions with the shortcut icons1 steps

Symbols

Drawing cataloged symbols17 steps

Triangle

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 9 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

Load a freesvg.org document

Load SVG documents from freesvg.org collection13 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 9 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 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 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

Video

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

Animations

Use case category 'Animations' with 20 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 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 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
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 animations26 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