SVG Path Reference

The path tag is capable of drawing arbitrarily complex shapes. This is accomplished with a draw string that specifies a sequence of pen-related actions. Actions include moving, drawing lines, drawing arcs, and drawing bezier curves. Each type of action available begins with a command letter, and is followed by various kinds of co-ordinate information. Separate each action by a space.

In general, command letters in upper-case indicate absolute co-ordinates. Command letters in lower-case indicate relative co-ordinates (compared to the current pen position).

Command Parameters Description
M x,y Lifts the pen, and moves it to the specified point.
m dx,dy Lifts the pen, and moves it by the specified distance horizontally and vertically.
L x,y Draws a line from the current position, to the specified point.
l dx,dy Draws a line from the current position, to a point the specified distance away horizontally and vertically.
H x Draws a horizontal line from the current position, to the specified horizontal location.
h dx Draws a horizontal line from the current position, to a point the specified distance away horizontally.
V y Draws a vertical line from the current position, to the specified vertical location.
v dy Draws a vertical line from the current position, to a point the specified distance away vertically.
C c1x,c1y c2x,c2y x,y Draws a cubic bezier curve from the current position, ending at the specified x,y point, and using the two control points.
c c1dx,c1dy c2dx,c2dy dx,dy Draws a cubic bezier curve from the current position, ending at a point the specified distance away horizontally and vertically, and using the two control points (each relative to the starting position).
S cx,cy x,y Draws a smooth cubic bezier curve from the current position, ending at the specified x,y point, and using a single control point.
s cdx,cdy dx,dy Draws a smooth cubic bezier curve from the current position, ending at a point the specified distance away horizontally and vertically, and using a single control point (relative to the starting position).
Q cx,cy x,y Draws a quadratic bezier curve from the current position, ending at the specified x,y point, and using the specified control point.
q cdx,cdy dx,dy Draws a quadratic bezier curve from the current position, ending at a point the specified distance away horizontally and vertically, and using the specified control point (relative to the starting position).
T x,y Draws a smooth quadratic bezier curve from the current position, ending at the specified x,y point. The control point is located at a position that is the reflection of the previous control point, around the previous point on the path.
t dx,dy Draws a smooth quadratic bezier curve from the current position, ending at a point the specified distance away horizontally and vertically.
A rx,ry xAxisRotate LargeArcFlag,SweepFlag x,y Draws an elliptical arc starting at the current position, ending at the specified x,y point, and having the specified horizontal and vertical radius. LargeArcFlag indicates whether the smallest (0) or largest (1) arc should be drawn. SweepFlag indicates whether to draw the arc counter-clockwise (0) or clockwise (1). xAxisRotate currently has no effect, but was intended to "change the x-axis relative to the current reference frame" (whatever that means).
a rx,ry xAxisRotate LargeArcFlag,SweepFlag dx,dy Draws an elliptical arc starting at the current position, ending at the specified distance away horizontally and vertically, and having the specified horizontal and vertical radius. LargeArcFlag indicates whether the smallest (0) or largest (1) arc should be drawn. SweepFlag indicates whether to draw the arc counter-clockwise (0) or clockwise (1). xAxisRotate currently has no effect, but was intended to "change the x-axis relative to the current reference frame" (whatever that means).
Z Closes the path by drawing a line from the current position back to the first point on the path.

Examples of cubic bezier curves

In these examples, the end points are marked with a red dot. The control points are marked with blue dots.

M -40,0 C -10,-40 10,40 40,0
M -40,0 C 0,-40 0,-40 40,0
M -40,0 S 0,-40 40,0

Examples of quadratic bezier curves

In these examples, calculated control points are marked with a purple dot. In the second example below, the green lines illustrate how the reflection of each calculated control point is determined for the T commands. The third example below shows the same quadratic curves drawn with explicit control points using the Q command instead.

M -40,-20 Q -40,40 40,20
M -30,0 Q -30,-40 0,-30 T 30,0 T 0,30 T -30,0
M -30,0 Q -30,-40 0,-30 Q 30,-20 30,0 Q 30,20 0,30 Q -30,40 -30,0

Examples of arcs

Small arc, counter-clockwise (0,0)
Large arc, counter-clockwise (1,0)
Small arc, clockwise (0,1)
Large arc, clockwise (1,1)

The next article will act as a reference for drawing text in SVG.

SVG Tutorial and Reference

Introduction to SVG

SVG Co-ordinate System

Shape Reference

Path Reference

Text Reference

External SVG Resources

W3C SVG Specification Homepage

Mozilla Developer Network SVG Homepage

SVG Tutorial on jenkov.com