« SVG Attribute reference home
This attribute defines a path to follow.
Usage context
| Categories | Path Description attribute |
|---|---|
| Value | <List of movements> |
| Animatable | Yes |
| Normative document | SVG 1.1 (2nd Edition) |
The d attribute is a string containing a series of path descriptions. These paths are combinations of the following instructions:
- Moveto
- Lineto
- Curveto
- Arcto
- ClosePath
These instructions are combined in a single string. Commands are case-sensitive; an upper-case command specifies its arguments as absolute positions, while a lower-case command specified points relative to the current position. It is always possible to specify a negative value as an argument to a command: negative angles will be anti-clockwise, absolute x and y positions will be taken as negative coordinates, negative relative x values will move to the left, and negative relative y values will move upwards.
Moveto
Moveto instructions can be thought of as picking up the drawing instrument, and setting it down somewhere else. There is no line drawn between the previous point and the specified point. It is good practice to open all paths with a Moveto command, because without an initial Moveto, commands will be executed with the starting point, wherever this was previously, possibly resulting in undefined behaviour.
Syntax:
M x,ywhere x and y are absolute coordinates, horizontal and vertical respectivelym dx,dywhere dx and dy are distances relative to the current position, to the right and down respectively
Examples:
- Absolute positioning at x=50, y= 100:
<path d="M50,100..." /> - Move 50 right, 100 down :
<path d="m50,100..." />
Lineto
Unlike Moveto instructions, Lineto instructions will draw a straight line. This line moves from the current position, to the specified location. The syntax for a generic Lineto command is "L x,y" or "l dx, dy", where x and y are absolute coordinates, and dx and dy are distances, to the right and down respectively. There are also the instructions H and V, which specify Horizontal and Vertical movements. Their syntax is the same as L, and their lower-case versions h and v specify relative coordinates, as seen with a lower-case l, but they only take a single argument.
Curveto
Curveto commands specify a Bezier curve. There are two types of Bezier curves: Cubic and Quadratic. Quadratic Bezier curves are a special case of the Cubic bezier curve, in that the control point for each end is the same. The syntax for a Quadratic Bezier curve is "Q cx,cy x,y" or "q dcx,dcy, dx, dy". cx and cy are the absolute coordinates of the control point, dcx and dcy are the distance in the x and y directions of the control point, respectively. x and y are the absolute coordinates of the end point, and dx and dy are the distances in the x and y directions of the end point, respectively.
Cubic Bezier curves follow the same concept as Quadratic, except there are two control points to worry about. The syntax for a Cubic Bezier curve is "C c1x,c1y c2x,c2y x,y" or "c dc1x,dc1y dc2x,dc2y dx,dy", where c1x,c1y, and c2x,c2y are the absolute coordinates of the control points for the initial point and end point, respectively. dc1x,dc1y, dc2x,dc2y are all relative to the initial point, not the end point. dx and dy are the distance to the right and down, respectively.
For chains of smooth Bezier curves, the T and S commands are available. Their syntax is simpler than the other Curveto commands, because it is assumed that the first control point is the reflection of the second control point of the previous curve, about the current start point (which is also the previous end point). If there is no previous second control point, then the current first control point IS the previous end point. The syntax for T is "T x,y" or "t dx,dy" for absolute and relative directions, respectively, and is used to create Quadratic Bezier curves. S is used to create Cubic Bezier curves, with the syntax "S cx,cy x,y" or "s dcx,dcy dx,dy", where d/cx, d/cy indicate the second control point.
Finally, all of the Bezier curve commands can be made into a "polybezier", by specifying all of the parameters multiple times after the initial command. Consequently, the following two commands will create exactly the same path:
<path d="c 50,0 50,100 100,100 50,0 50,-100 100,-100" />
<path d="c 50,0 50,100 100,100 c 50,0 50,-100 100,-100" />
Arcto
Sometimes it is easier to describe a path as an elliptical curve, rather than a Bezier curve. To this end, Arcto commands are supported in paths. The center of the arc is calculated from the other variables. The declaration of an arcto is relatively complicated: "A rx,ry xAxisRotate LargeArcFlag,SweepFlag x,y". To deconstruct, rx and ry are the radius in the x and y directions, respectively. The LargeArcFlag has a value of either 0 or 1, and determines whether the smallest (0) or largest (1) arc possible is drawn. The SweepFlag is either 0 or 1, and determines if the arc should be swept in a clockwise (1), or anti-clockwise (0) direction. x and y are the destination coordinates. Although the xAxisRotate is supposed to change the x-axis, relative to the current reference frame, it seems that this argument has no effect with Gecko 7.
ClosePath
The ClosePath command will draw a straight line, from the current position to the first point in the path. It is the simplest command, and takes no parameters. It will take the shortest linear path to the starting point, intersecting other paths if they fall in the way. The syntax is "Z" or "z", both will react in the same way.
The appearance of a shape closed with ClosePath may be different to that of one closed by drawing a line to the origin, using one of the other commands, because the line ends are joined together (according to the stroke-linejoin setting), rather than just being placed at the same coordinates.
Elements
The following elements can use the d attribute:
In additon, the same rules here apply to <animate> animation paths.
Notes
The point of origin (the coordinate 0,0) is usually the upper left corner of the context. However the <glyph> element has its origin in the bottom left corner of its letterbox.
A single comma is used to separate two consecutive numbers. Commas are not allowed elsewhere.
Simple SVG path example
HTML Content
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="150px">
<path fill="#F7931E" stroke="#000" d="M37,17v15H14V17z M50,0H0v50h50z"/>
</svg>
Result
To illustrate what d="M37,17v15H14V17H37z M50,0H0v50h50z" really means, let's discuss each section of the string:
d=" M37,17 || v15 || H14 || V17 || z // M50,0 || H0 || v50 || h50 || z"d=- This attribute contains the string that makes up the entire svg.
M37,17Mis short for MoveTo. Capital 'M' means absolute and 'm' means relative. The path starts at the top right coordinate in the rectangle, inside the square.37sets the path's start position 37px right of the origin, on the x-axis17sets the path's start position 17px down from the origin, on the y-axis
- v15
- v stands for vertical line. Capital V uses an absolute y-axis coordinate, and lower-case v uses relative distance.
- This instruction draws a vertical line 15px long from the current position. That means you're drawing a line 15px down to coordinates (37,32).
H14- H stands for horizontal, and uses an absolute coordinate, because it is capitalized.
- Starting at the end of
v15,it draws a horizontal line to the absolute x-axis coordinate 14. This puts you at coordinates (14,32).
V17- Start from the last line drawn, and draw a vertical line to y-axis coordinate 17. This puts you at coordinates (14,17).
z- Lower-case z and capital Z both close a path, drawing a straight line to the start of the path, and joining its two ends together.
- space
- The space separates the next path, which will make the outer square.
M50,0- Start at position (50,0).
H0- Draw a horizontal line to (0,0)
v50- Draw a vertical line 50px long from (0,0). This draws a line down to (0,50).
h50- Draw a horizontal line 50px long from (0,50). This draws a line right to (50,50).
z- Lower-case z and capital Z both close a path, drawing a straight line to the start of the path, and joining its two ends together.
Remember that SVG pixels are not necessarily the same as screen or document pixels. In the example above, the 50px SVG box is displayed at 150px wide, so each SVG pixel is three document pixels long and high.