apike.ca

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

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)
<path d="M100,10 L100,10 40,180 190,60 10,60 160,180 z" stroke="blue" fill="darkblue" stroke-width="4" />
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)
<path d="M40,140 L40,100 10,100 C10,10 90,10 90,100 L60,100 60,140 M140,50 C70,180 195,180 190,100 " stroke="darkgreen" stroke-width="4" fill="url(#hill)" />
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)
<path id="playButton" d="M50,50 Q-30,100 50,150 100,230 150,150 230,100 150,50 100,-30 50,50" stroke="darkblue" stroke-width="4" fill="url(#myFillGrad)" />
Code 3. The path used in the above example.

Elliptical Arc Example

Example 4. A path made using arcs. (Download)
<path d="M10,150 A15 15 180 0 1 70 140 A15 25 180 0 0 130 130 A15 55 180 0 1 190 120" stroke="lightgreen" stroke-width="4" fill="none" marker-mid="url(#marker2)" marker-end="url(#marker1)" />
Code 4. The path used in the above example.
Related Topics