DRAWSVG
user's guide
DRAWSVG
user's guide
Each drawing task is characterized by:
Its icon
The drawn type element
The number of entered points (1,2,3,..)
Two successive points can be entered in two ways (excepted free path):
Click the first point keeping the mouse button pressed, move the mouse to the next point and release the button (sequence is mouse down, mouse move and mouse up).
Click the first point by releasing the mouse button and click on the next point (sequence is two mouse clicks).
Drawing tasks with many points have a floating menu with the two actions remove last point and next to finish the drawing element.
Click the text drawing icon in the
Elements
menu and the Text section to start the task.
| Drawing task | Element | Points | Description |
|---|---|---|---|
|
Drawing a text  |
Text |
1 |
Click the text position and type its content. 
See draw simple text , multiline text showcases for an interactive demonstration of how to draw and edit a text. |
Click the path drawing icon in the
Elements
menu and the Text section to start the task.
| Drawing task | Element | Points | Description | |
|---|---|---|---|---|
|
Drawing a path
|
Path |
many |
Drawing a path with basic commands 
The floating drawing task menu is showing the path commands. Select command and enter points then click next to finish the path. See draw path with curves , path with hole showcases for an online demonstration of how to draw path. |
Click the path drawing icon in the
Elements
menu and the Text section to start the task.
| Drawing task | Element | Points | Description |
|---|---|---|---|
|
Drawing a free path  |
Path |
many |
The shape can be drawn in two ways:
The path can then be simplified by filtering the points using the filter points editor See draw free path showcase for an interactive demonstration. |
Click the image drawing icon in the
Elements
menu and the Image section to start the task.
| Drawing task | Element | Points | Description |
|---|---|---|---|
|
Drawing an image  |
Image |
2 |
Draw the image position by its top left and bottom right corners. The svg image element can represent a picture by referencing its HTTP-URL or locally by storing it's base64 encoded data. The default element draws the image of the Mona Lisa by HTTP reference.To change the default content :
See draw image showcase for an online demonstration of how to draw an image. |
Click the image drawing icon in the
Elements
menu and the Image section to start the task.
| Drawing task | Element | Points | Description |
|---|---|---|---|
|
Drawing an image  |
Image |
2 |
Draw the map position by its top left and bottom right corners. The element is an image with a Google Map image link. The default map location is centered on Paris. To change it use the map editor .The map element offers also the editors of an image element. See draw map showcase for an interactive demonstration of how to insert and edit a Google Map in your SVG drawing. |
Click the image drawing icon in the
Elements
menu and the Image section to start the task.
| Drawing task | Element | Points | Description |
|---|---|---|---|
|
Drawing an included svg  |
SVG |
2 |
Draw the svg position by its top left and bottom right corners. The default content can be replaced by another document loaded from a file or an url . See include svg showcase for an online demonstration of how to insert a svg document. |
Click the line drawing icon in the
Elements
menu and the Line section to start the task.
| Drawing task | Element | Points | Description |
|---|---|---|---|
|
Drawing an included svg  |
Line |
2 |
Draw the line by its start and end points. See draw line showcase for an interactive demonstration of how to draw a line. |
Click the vertical line drawing icon in the
Elements
menu and the Line section to start the task.
| Drawing task | Element | Points | Description |
|---|---|---|---|
|
Drawing a vertical line |
Path |
2 |
Draw the line by its start and end points. See showcase draw horizontal and vertical lines . |
Click the horizontal line drawing icon in the
Elements
menu and the Line section to start the task.
| Drawing task | Element | Points | Description |
|---|---|---|---|
|
Drawing a horizontal line |
Path |
2 |
Draw the line by its start and end points. See showcase draw horizontal and vertical lines . |
Click the polyline drawing icon in the
Elements
menu and the Polyline section to start the task.
| Drawing task | Element | Points | Description |
|---|---|---|---|
|
Drawing a polyline  |
Polyline |
many |
Enter each point of the polyline then click next in the floating menu to finish the polyline. See showcase drawing polylines . |
Click the triangle drawing icon in the
Elements
menu and the Polyline section to start the task.
| Drawing task | Element | Points | Description |
|---|---|---|---|
|
Drawing a triangle |
Path |
3 |
Draw the triangle by its three points. See showcase drawing a triangle . |
Click the polygon drawing icon in the
Elements
menu and the Polyline section to start the task.
| Drawing task | Element | Points | Description |
|---|---|---|---|
|
Drawing a polygon  |
Polygon |
many |
Enter each point of the polygon then click next in the floating menu to finish the polygon. See showcase Quick start drawing surfaces . |
Click the rect drawing icon in the
Elements
menu and the Rect section to start the task.
| Drawing task | Element | Points | Description |
|---|---|---|---|
|
Drawing a rectangle  |
Rect |
2 |
Draw the rectangle by its top left and bottom right corners. See draw rectangle showcase. |
Click the circle drawing icon in the
Elements
menu and the Rect section to start the task.
| Drawing task | Element | Points | Description |
|---|---|---|---|
|
Drawing a circle  |
Circle |
2 |
Draw the circle by its center and radius points. See quick start drawing surfaces showcase. |
Click the ellipse drawing icon in the
Elements
menu and the Rect section to start the task.
| Drawing task | Element | Points | Description |
|---|---|---|---|
|
Drawing an ellipse  |
Ellipse |
2 |
Draw the ellipse by its center and size points. See quick start drawing surfaces showcase. |
Click the circle arc drawing icon in the
Elements
menu and the Arc section to start the task.
| Drawing task | Element | Points | Description |
|---|---|---|---|
|
Drawing a circle arc  |
Path |
3 |
Draw the circle arc by its first point, end point and middle point. The middle point defines the radius. See quick start drawing arcs showcase. |
Click the cubic arc drawing icon in the
Elements
menu and the Arc section to start the task.
| Drawing task | Element | Points | Description |
|---|---|---|---|
|
Drawing a cubic arc  |
Path |
4 |
Draw the cubic arc by its first point, end point and the two tangents points. See quick start drawing arcs showcase. |
Click the quadratic arc drawing icon in the
Elements
menu and the Arc section to start the task.
| Drawing task | Element | Points | Description |
|---|---|---|---|
|
Drawing a quadratic arc  |
Path |
3 |
Draw the quadratic arc by its first point, end point and the tangent point. See quick start drawing arcs showcase. |
Click the cubic curve drawing icon in the
Elements
menu and the Cubic section to start the task.
| Drawing task | Element | Points | Description |
|---|---|---|---|
|
Drawing a cubic curve  |
Path |
many |
Enter each vertex of the curve and then click Next in the floating menu. The tasks create tangents default then be adjusted with the edit function. See drawing cubic curves showcase. |
Click the cubic closed curve drawing icon in the
Elements
menu and the Cubic section to start the task.
| Drawing task | Element | Points | Description |
|---|---|---|---|
|
Drawing a cubic area  |
Path |
many |
Enter each vertex of the curve and then click Next in the floating menu. The tasks create tangents default then be adjusted with the edit function. See drawing cubic curves showcase. |
Click the quadratic curve drawing icon in the
Elements
menu and the Quadratic section to start the task.
| Drawing task | Element | Points | Description |
|---|---|---|---|
|
Drawing a quadratic curve  |
Path |
many |
Enter each vertex of the curve and then click Next in the floating menu. The tasks create tangents default then be adjusted with the edit function. See drawing quadratic curves showcase. |
Click the quadratic closed curve drawing icon in the
Elements
menu and the Quadratic section to start the task.
| Drawing task | Element | Points | Description |
|---|---|---|---|
|
Drawing a quadratic area  |
Path |
many |
Enter each vertex of the curve and then click Next in the floating menu. The tasks create tangents default then be adjusted with the edit function. See drawing cubic curves showcase. |
Click the cubic smooth curve drawing icon in the
Elements
menu and the Cubic smooth section to start the task.
| Drawing task | Element | Points | Description |
|---|---|---|---|
|
Drawing a cubic smooth curve  |
Path |
many |
Enter each vertex of the curve and then click Next in the floating menu. The tasks create tangents default then be adjusted with the edit function. See drawing cubic curves showcase. |
Click the cubic smooth closed curve drawing icon in the
Elements
menu and the Cubic smooth section to start the task.
| Drawing task | Element | Points | Description |
|---|---|---|---|
|
Drawing a cubic smooth area  |
Path |
many |
Enter each vertex of the curve and then click Next in the floating menu. The tasks create tangents default then be adjusted with the edit function. See drawing cubic curves showcase. |
Click the quadratic smooth curve drawing icon in the
Elements
menu and the Quadratic smooth section to start the task.
| Drawing task | Element | Points | Description |
|---|---|---|---|
|
Drawing a quadratic smooth curve  |
Path |
many |
Enter each vertex of the curve and then click Next in the floating menu. The tasks create tangents default then be adjusted with the edit function. See drawing quadratic curves showcase. |
Click the quadratic smooth closed curve drawing icon in the
Elements
menu and the Quadratic smooth section to start the task.
| Drawing task | Element | Points | Description |
|---|---|---|---|
|
Drawing a quadratic smooth area  |
Path |
many |
Enter each vertex of the curve and then click Next in the floating menu. The tasks create tangents default then be adjusted with the edit function. See drawing quadratic curves showcase. |
