Paths

Remarks:

Detailed information on the SVG path element can be found in the W3C Recommendation for SVG.

Draw a diagonal blue line using the L path command

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path d="M 10,10 L 100,50" stroke="blue" stroke-width="5" />
</svg>

Result:

Draw a horizontal orange line using the H drawing command

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path d="M 10,10 H 200" stroke="orange" stroke-width="5" />
</svg>

Result:

Draw a red cross using l (relative line) path commands

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path d="M 10,10 l 90,90 M 100,10 l -90,90" stroke="red" stroke-width="10" />
</svg>

Result:

Draw a vertical green line using the V path command

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path d="M 10,10 V 200" stroke="green" stroke-width="5" />
</svg>

Result:

Parameters:

Attributes / parameters	Description
d	Defines a sequence of drawing commands that create the shape. e.g. d="M 50,60 L50,60". Uppercase drawing commands designate absolute coordinates. Lowercase drawing commands designate relative coordinates.
(...)	Drawing Commands
m/M	Move current drawing position to XY d="M XY"
l/L	Draw a line to X,Y d="L XY"
v/V	Draw a vertical line to Y d="V Y"
h/H	Draw a horizontal line to X d="H X"
a/A	Draw an arc to X,Y with an implied radius of Rx and Ry and a rotation specified by X-axis-rotation. The large arc and sweep flags select which of the 4 possible arcs that satisfy these constraints should be drawn. d="A Rx Ry X-axis-rotation(degrees) large-arc-flag (0/1) sweep-flag(0/1) X,Y".
q/Q	Draw quadratic bezier curve to X,Y using control point X1Y1 d="X1Y1 X Y"
t/T	Draw a shorthand quadratic bezier curve (the control point is calculated as a reflection of the control point of the previous q/Q drawing command through the current drawing position)
c/C	Draw a cubic bezier curve to X,Y using control points X1,Y1 and X2,Y2 d="C X1Y1, X2Y2, XY"
s/S	Draw a shorthand cubic bezier curve (first control point is calculated as a reflection of the second control point of the previous c/C drawing command through the current drawing position).
- z/Z	Close the path by drawing a line to start of path (or pathsegment if another z has been used previously)
(...)	(end of list)
pathLength	(Optional) Allows the author to specify a nominal pathLength which will be used for calibration in other calculations, for example for text along a path
Stroke Parameters	common among to all shape and drawing elements
stroke	Color of path
stroke-width	Width of path

Contributors

Topic Id: 2397

Example Ids: 7907,7908,7909,7910

This site is not affiliated with any of the contributors.