Categories
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 start | Play all Quick start showcases continuously |
| Quick start drawing arcs | Drawing all types of arcs (circles, cubics, quadratics) |
| Quick start drawing images | Drawing all types of images (URL, encoded, map, SVG) |
| Quick start drawing lines | Drawing all types of lines (oblique, vertical, horizontal, polylines) |
| Quick start drawing paths | Drawing all types of paths (free, composite, hole, curves, smooth surfaces) |
| Quick start drawing shapes | Drawing all types of shapes (arrows, flow charts, symbols, emojis, font Awesome icons) |
| Quick start drawing surfaces | Drawing all types of surfaces (rectangles, circles, ellipses, triangles, polygons) |
| Quick start drawing texts | Drawing all types of texts (simple, multi lines, paths, styled) |
Draw elements
Review of elements drawing tasks and options
This category contains 20 showcases
| Draw elements | Play all Draw elements showcases continuously |
| Arcs | Drawing circle, cubic and quadratic arcs |
| Draw with point capture | Drawing with point capture to connect elements |
| Emoji | Choosing and drawing emoji icons |
| Font Awesome icon | Choosing and drawing FontAwesome icons |
| Free path | Drawing free paths smoothed or not |
| Horizontal and vertical lines | Drawing horizontal, vertical and oblique lines |
| Horizontal and vertical path | Drawing paths with horizontal and vertical lines |
| Image | Drawing images |
| Line | Drawing lines |
| Map | Insert and edit a Google Map in your SVG drawing |
| Path with curves | Drawing paths with curves |
| Path with a hole | Drawing paths with holes |
| Polyline | Drawing polylines |
| Rectangle | Drawing rectangles |
| Repetitive drawing | Drawing multiple objects with the same task in repeating mode |
| Shapes | Drawing cataloged shapes and icons |
| Shortcuts | Restart last drawing actions with the shortcut icons |
| Symbols | Drawing cataloged symbols |
| Triangle | Drawing triangles |
| Using a grid | Draw elements with grid snapping |
Draw texts
Review of texts drawing tasks
This category contains 4 showcases
| Draw texts | Play all Draw texts showcases continuously |
| Multi-line text | Drawing text with multi lines |
| Multilingual text | Drawing a multilingual text with language selector The text is displayed with its defined value for the navigator language |
| Simple text | Create single-line text, edit style properties, and adjust length |
| Text on a path | Drawing texts on paths |
Manage documents
Managing SVG documents, loading and saving
This category contains 8 showcases
| Manage documents | Play all Manage documents showcases continuously |
| Open a document | Open SVG documents with different sources |
| Save document | Save SVG documents |
| Load SVG code | Loading the svg/xml code of a new document |
| Get SVG code | Getting the svg/xml code of the document |
| Include SVG | Insert a SVG inside the document with different sources |
| Modify dimensions | Setting the document dimensions, coordinates and window |
| PNG export | Export a SVG document in PNG format |
| Print a document | Printing a document |
Select elements
All selecting tasks and options
This category contains 5 showcases
| Select elements | Play all Select elements showcases continuously |
| Select with target highlighting | Using target highlighter to easy select objects |
| Select all elements | Selecting all elements of the svg document |
| 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 |
| Select multi-line text | Selecting and editing a multi-line text |
| 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 |
Style elements
Review of actions for creating and applying styles to elements
This category contains 8 showcases
| 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 |
| Copy style from an object | Shows how to copy the style of an object to others objects |
| Use CSS styles | Create and apply CSS classes |
| Use the color chooser | Using the color chooser |
| Use filters | Using filters (spotlight, relief, drop shadow, wrap) |
| Use gradients | Apply and customize gradients |
| Use markers | Apply and customize markers |
| Use patterns | Apply and customize patterns |
Edit elements
Review of editing actions on elements
This category contains 8 showcases
| Edit elements | Play all Edit elements showcases continuously |
| Center document contents | Shows how to center document contents |
| Copy elements | Shows how to copy elements |
| Group elements | Group elements - ungroup them - sharing style on the group - transforming the group - browsing its contents |
| Hyperlinks | Create, copy, select and remove hyperlinks |
| Remove elements | Remove selected elements |
| Run action from floating menu | Using the selection floating menu: - running actions - moving the menu - stop editing |
| Undo and redo | Undoing and redoing actions |
| Zoom and pan | Changing view (zoom and scroll) |
Edit texts
Review of text editing actions
This category contains 5 showcases
| Edit texts | Play all Edit texts showcases continuously |
| Change text font style | Styling a text, change font properties |
| Set text unselectable | Setting a text as unselectable |
| Text adjust length | Adjust text length |
| 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 |
| Text editor | Using the text editor to format multi-lines text |
Edit geometries
Review of editing actions on element geometries
This category contains 15 showcases
| Edit geometries | Play all Edit geometries showcases continuously |
| Align elements | Shows how to align elements |
| Close paths | Shows how to close a path |
| Cut and merge paths | Shows how to cut and merge paths |
| Edit geometry properties | Editing geometry properties for each type of object (rectangle, circle, ellipse, image, line, polyline, path, polygon) |
| Edit huge path | Edit the geometry of a path with a lot of points |
| 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. |
| Edit path segments | Change the structure of a path Insert segments, change segments types and delete segments |
| Insert curve intersections | Insert intersection points between curves (circle, ellipse, cubic, quadratic). Elements can be refactored to path as needed. |
| 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. |
| Move and resize with arrow keys | Shows how to move and resize elements with arrow keys |
| Operations on shapes | Logical operations on closed shapes (union, intersection, difference) |
| Refactor elements | Change the type of an element to polyline, polygon or path depending on its geometry. |
| Reverse direction of lines | Shows how to reverse direction of lines, polylines and paths |
| Round the rectangle corners | Round the corners of a rectangle by applying a ratio in a circular or elliptical shape |
| Transform elements | Rotate, scale and flip elements |
Edit points
Review of editing actions on element geometries points
This category contains 6 showcases
| 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. |
| Editing points of polygons | Move, insert and remove points of polygons |
| Editing polylines | Edit polylines. • Insert and remove points • Cut and merge polylines |
| Merging points | Move a point to another nearby one to merge their xy coordinates and connecting the objects |
| Select points | Select and move points with the point highlighting mode |
| Smooth a path | Smoothing a path that has only lineto commands |
Edit definitions
Editing SVG definitions (patterns, gradients, markers, symbols, filters)
This category contains 8 showcases
| Edit definitions | Play all Edit definitions showcases continuously |
| Create gradients | Using the gradient editor |
| Create markers | Using the marker editor |
| Create patterns | Using the pattern editor |
| Create symbols | Creating symbols with the symbol editor |
| Customize symbols | Customize symbols, change and remove colors |
| Import SVG symbols | Creating symbols by SVG import |
| Import definitions | Import definitions (patterns, gradients, symbols, markers, filters) from another SVG document |
| Refactor symbols | Refactor symbols Refactor use element as group to update symbol content and create new one. |
Apply constraints
Review of constraints (connection, box, clip path) definition and edition actions
This category contains 9 showcases
| 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 |
| Chaining constraints | Chain constraints. Constraints are propagated between objects. |
| Clipping constraints | Define clipping constraints |
| Constraint connected points | Link points between objects with connect constraints. Constraints are executed in background after each user action on impacted objects. |
| Copy constraints | Shows how to copy constraints. |
| Remove box constraints | Remove box constraints defined on an element by clicking on its bounding box |
| Remove clip path constraints | Remove clip path constraints defined on an element by clicking on its bounding box |
| Remove connection constraints | Remove connection constraints on points of an element or between two elements by clicking on linked points |
| Removing constraints | Remove constraints with properties dialog on elements and on saved file. Undo removing constraints. |
Add media elements
Adding and editing media controls (audio, video)
This category contains 4 showcases
| Add media elements | Play all Add media elements showcases continuously |
| Audio control | Adding an audio control inside SVG document |
| HTML Rich Text | Insert HTML text into an SVG document |
| Video | Adding a video control inside SVG document |
| YouTube video | Adding YouTube video control inside SVG document |
Using layers
Review of layers definition and edition actions
This category contains 4 showcases
| 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. |
| Define layers style | Define the default style of layers for their objects |
| Change object's layer | Shows how to change the layer of an object. |
| Select and edit object's layer | Shows how to edit the layer of an object |
Animations
Create and edit SMIL animations
This category contains 10 showcases
| Animations | Play all Animations showcases continuously |
| Animate attributes | Animate DOM attributes and style properties of elements |
| Animate transform | Animate an element with translate, rotate, scale, skew transformations |
| Animate using keySplines | Animate attribute values with spline interpolation |
| Animate using keyTimes | Animate using keyTimes with multiple values to control the transition speed of each value |
| Animations schedule | Describes the schedule of animations with their sequences. |
| 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). |
| 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. |
| Motion target group | When the motion target is transformed, the animation should be applied to an enclosing group of the target. |
| 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 |
| Synchronization by events | Synchronize animations by events (begin, end, click, hyperlink, ..) |