drawsvg iconDRAWSVG user's manual
PreviousNextContentsPDFdrawsvg

5.3. Drawing tasks

Each drawing task is characterized by:

Two successive points can be entered in two ways (excepted free path):

Drawing tasks with many points have a floating menu with the two actions remove last point and next to finish the drawing element.

Table 5.2. floating drawing task menu

IconAction
remove last point
finish drawing element

Table 5.3. Drawing tasks

Drawing taskElementPointsDescription

Drawing a text

Text1

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.

Drawing a path

Pathmany

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 interactive demonstration of how to draw path.

Drawing a free path

Pathmany

The shape can be drawn in two ways:

  • Click the starting point keeping the mouse button pressed, move the mouse and release the button on the last point.

  • Click the starting point by releasing the mouse button, move the mouse and click on the last point.

The path can be smoothed with the filter path editor

See draw free path showcase for an interactive demonstration.

Drawing an image

Image2

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 interactive demonstration of how to draw an image.

Drawing a map

Image2

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.

Drawing an included svg

Svg2

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 interactive demonstration of how to insert a svg document.

Drawing a line

Line2

Draw the line by its start and end points.

See draw line showcase for an interactive demonstration of how to draw a line.

Drawing a vertical line

Vertical line2

Draw the line by its start and end points.

See showcase draw horizontal and vertical lines .

Drawing a horizontal line

Horizontal line2

Draw the line by its start and end points.

See showcase draw horizontal and vertical lines .

Drawing a polyline

Polylinemany

Enter each point of the polyline then click next in the floating menu to finish the polyline.

Drawing a triangle

Triangle3

Draw the triangle by its three points.

See showcase drawing a triangle .

Drawing a polygon

Polygonmany

Enter each point of the polygon then click next in the floating menu to finish the polygon.

Drawing a rectangle

Rectangle2

Draw the rectangle by its top left and bottom right corners.

See draw rectangle showcase for an interactive demonstration of how to draw a rectangle.

Drawing a circle

Circle2

Draw the circle by its center and radius points.

Drawing an ellipse

Ellipse2

Draw the ellipse by its center and size points.

Drawing a circle arc

Path3

Draw the circle arc by its first point, end point and middle point. The middle point defines the radius.

Drawing a cubic arc

Path4

Draw the cubic arc by its first point, end point and the two tangents points.

Drawing a quadratic arc

Path3

Draw the quadratic arc by its first point, end point and the tangent point.

Drawing a cubic curve

Pathmany

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.

Drawing a cubic area

Pathmany

Drawing a cubic area

Enter each vertex of the area and then click Next in the floating menu. The tasks create tangents default then be adjusted with the edit function.

Drawing a quadratic curve

Pathmany

Drawing a quadratic curve

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.

Drawing a quadratic area

Pathmany

Drawing a quadratic area

Enter each vertex of the area and then click Next in the floating menu. The tasks create tangents default then be adjusted with the edit function.

Drawing a cubic smooth curve

Pathmany

Drawing a cubic smooth curve

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.

Drawing a cubic smooth area

Pathmany

Drawing a cubic smooth area

Enter each vertex of the area and then click Next in the floating menu. The tasks create tangents default then be adjusted with the edit function.

Drawing a quadratic smooth curve

Pathmany

Drawing a quadratic smooth curve

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.

Drawing a quadratic smooth area

Pathmany

Drawing a quadratic smooth area

Enter each vertex of the area and then click Next in the floating menu. The tasks create tangents default then be adjusted with the edit function.