Path Commands

The following commands are used in the d attribute of <path> elements. The same syntax is also used to describe path geometry in the path attribute of the <animateMotion> and (in SVG 2) <textPath> elements. The syntax is also used in the CSS path() function and in HTML canvas methods.

For all commands, uppercase letters are followed by absolute coordinates, while lowercase letters are followed by relative coordinates (offset values). Each path segment starts from the destination or end point of the previous command.

If path data contains an error, the browser draws all segments of the path up until the one with the error in it. This makes debugging slightly easier.

M or m#

Move-to command. Moves the “pen” position without drawing anything.

followed by two numbers, representing the x and y position (for M) or offset (for m) of the destination point in user coordinates
additional pairs of coordinates are interpretted as line-to commands: L for M and l for m
an odd-numbered list of coordinates is an error
all paths must start with a move-to command
a relative m command at the start of a path is calculated relative to the (0,0) origin point

L or l#

Line-to command. Draws a straight line from the current position to the specified point.

followed by two numbers, representing the x and y position (for L) or offset (for l) of the destination point in user coordinates
additional pairs of coordinates draw additional line segments
for multiple relative lines (l), the relative point is reset for each line segment
an odd-numbered list of coordinates is an error

H or h#

Horizontal line-to command. Draws a straight horizontal line to the specified position.

followed by one number, representing the x position (for H) or offset (for h) of the destination point in user coordinates
additional numbers draw additional line segments
for multiple relative lines (h), the relative point is reset for each line segment

V or v#

Vertical line-to command. Draws a straight vertical line to the specified position.

followed by one number, representing the y position (for V) or offset (for v) of the destination point in user coordinates
additional numbers draw additional line segments
for multiple relative lines (v), the relative point is reset for each line segment

Q or q#

Quadratic curve-to command. Draws a quadratic Bézier curve, using a specified control point, to the specified end point.

followed by four numbers: the first two are the x and y position or offset of the control point, the second two are the x and y position or offset of the end point, all in user coordinates
additional sets of four numbers draw additional curve segments
relative positions are calculated relative to the start point of each segment, for both the control point and the end point
a list of coordinates that cannot be grouped into sets of four is an error

T or t#

Smooth quadratic curve-to command. Draws a quadratic Bézier curve to the specified end point, calculating the control point automatically to ensure a smooth continuation of the previous quadratic curve segment.

followed by two numbers, representing the x and y position (for T) or offset (for t) of the destination point in user coordinates
the control point is calculated by determining the x- and y-offset from the previous segment’s control point to its end point, then adding those offsets again
if the previous path segment was not a quadratic curve, the new control point is the start point
additional pairs of numbers draw additional curves
for multiple curves, the calculation of the control point, and the relative position of the end point for t commands, is always based on the previous segment
an odd-numbered list of coordinates is an error

C or c#

Cubic curve-to command. Draws a cubic Bézier curve, using the specified control points, to the specified end point.

followed by six numbers: the first two are the x and y position or offset of the first control point, the next two are the position or offset of the second control point, and the final pair define the end point, all in user coordinates
additional sets of six numbers draw additional curve segments
relative positions are calculated relative to the start point of each segment, for both the control points and the end point
a list of coordinates that cannot be grouped into sets of six is an error

S or s#

Smooth cubic curve-to command. Draws a cubic Bézier curve to the specified end point, calculating the first control point automatically to ensure a smooth continuation of the previous cubic curve segment, and using the specified second control point.

followed by four numbers: the first two are the x and y position or offset of the second control point, and the final pair define the end point, all in user coordinates
the first control point is calculated by determining the x- and y-offset from the previous segment’s control point to its end point, then adding those offsets again
if the previous path segment was not a cubic curve, the new control point is the start point
additional sets of four numbers draw additional curves
for multiple curves, the calculation of the control point, and the relative position of all points for s commands, is always based on the previous segment
a list of coordinates that cannot be grouped into sets of four is an error

A or a#

Arc-to command. Draws an elliptical arc segment to the specified end point, using the specified parameters to construct the arc.

followed by seven numbers, as follows:
- the x-radius of the ellipse, in user coordinates
- the y-radius of the ellipse, in user coordinates
- the rotation, in degrees, of the ellipse’s x-axis relative to the path’s x-axis
- a 1 or 0, to indicate whether or not the larger arc should be used
- a 1 or 0, to indicate whether or not the positive-sweep (clockwise) arc should be used
- the x position (for A) or offset (for a) of the end point, in user coordinates
- the y position (for A) or offset (for a) of the end point, in user coordinates
additional sets of seven numbers create additional arcs
a list of coordinates that cannot be grouped into sets of seven is an error
a value other than 1 or 0 for the flag parameters is an error

Z or z#

Close-path command. Draws a straight line (if necessary) from the current position to the point defined by the most-recent move-to command, and connects the two line ends into a line join.

Any numbers following a close path command are in error
The only command that may follow a close-path is a move-to

The definition of the relative commands will be modified if the bearing command (B or b), proposed for SVG 2, is used. In that case, all relative offsets would be calculated after rotating to the current bearing angle.

The rules for the number of required coordinates will change when the SVG 2 rules for the Z or z close-path are adopted. In SVG 2, a close-path could be used to automatically fill in the final point of a preceeding curve command.