SVG Paths

By mbystedt on Feb 24, 2014, 9:33:48 PM

The path element is the single most useful tag for creating professional looking SVG documents and it's one of the most difficult tag to hand-code in SVG. It is quite hard to visualize anything but the most simple of paths.

<path>

Attribute	Explanation
d	A set of commands which define the path. (See below)
pathLength	If present then the path will be scaled so that the computed path length of the points equals this value. A negative value is an error. (Note: Unsupported by most viewers)
transform	A list of transformations. See: Transformations
Presentation Attributes	Color, FillStroke, Graphics, Markers

Path Data

The path is defined in the d attribute of the 'path' tag by a string of white space seperated commands and coordinates.

Path commands are case-sensitive, An uppercase command's points use absolute postioning and a lowercase command's points are relative the last point. The one exception to this is the first point always uses absolute postioning.

Command	Parameters	Repeat	Explanation
M	x,y	Yes	moveto: Moves the pen to a new location. No line is drawn. All path data must begin with a 'moveto' command.
Line Commands
L	x,y	Yes	lineto: Draws a line from the current point to the point (x,y).
H	x	Yes	horizontal lineto: Draws a horizontal line from the current point to x.
V	y	Yes	vertical lineto: Draws a vertical line from the current point to y.
Cubic Bezier Curve Commands
C	x1 y1 x2 y2 x y	Yes	curveto: Draw a cubic bezier curve to the point (x,y) where the points (x1,y1) and (x2,y2) are the start and end control points, respectively.
S	x2 y2 x y	Yes	shorthand/smooth curveto: Draw a curve to the point (x,y) where the point (x2,y2) is the end control point and the start control point is the reflection of the last point's end control point.
Quadratic Bezier Curve Commands
Q	x1 y1 x y	Yes	Quadratic Bezier curveto: Draw a quadratic bezier between the last point and point (x,y) using the point (x1,y1) as the control point.
T	x y	Yes	Shorthand/smooth quadratic Bezier curveto: Draw a quadratic bezier between the last point and point (x,y) using the reflection of the last control point as the control point.
Elliptical Arc Curve Commands
A	**	Yes	elliptical arc: Draws and arc from the current point to x, y. The actual scale factor and position of the arc needed to bridge the two points is computed by the SVG viewer.
End Path Commands
z	-	No	closepath: Closes the path. A line is drawn from the last point to the first.

** rx ry x-axis-rotation large-arc-flag sweep-flag x y

Note: To use relative positioning simply use a lowercase letter for the command.

Line Example

Example 1. A path made using lineto commands (Download)

Code 1. The path used in the above example.

Cubic Bezier Example

Example 2. A path made using cubic curves. The control points are circled in red. (Download)

Code 2. The path used in the above example.

Quadratic Bezier Example

Example 3. A path made using quadratic bezier curves. The control point is circled in red (click to view). (Download)

Code 3. The path used in the above example.

Elliptical Arc Example

Example 4. A path made using arcs. (Download)

Code 4. The path used in the above example.