« 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 actually a string which contains a series of path descriptions. These paths consist of combinations the following instructions:
- Moveto
- Lineto
- Curveto
- Arcto
- ClosePath
These are combined in a single string. The different 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 at wherever it happened to be previously, possibly resulting in undefined behaviour.
Syntax:
M x,ywhere x and y are absolute coordinates, horizontal and vertical respectively.m 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 letters H and V, which specify Horizontal and Vertical movements. Their syntax is exactly the same as L, including that the lower-case version is relative rather than absolute.
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, respectively, of the control point. x and y are the absolute coordinates of the end point, and dx and dy are the distances in the x and y directions, respectively, of the end point.
Cubic Bezier curves follow the same concept as Quadratic, except that 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 about the previous point from the previous control point, or that it actually IS the previous point if there was no previous control 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 indicates 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 simply 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", and both will react exactly the same.
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 allowed between any two numbers, commas are not allowed elsewhere though.
Example
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<path fill="#F7931E" d="M37,17v15H14V17H37z M50,0H0v50h50V0z"/>
</svg>
To illustrate what d="M37,17v15H14V17H37z M50,0H0v50h50V0z" really means, let's discuss each section of the string.
d=" M37,17 || v15 || H14 || V17 || H37 ||z // M50,0 || H0 || v50 || h50 || V0 || 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. It should be a hint based off of the starting coordinates that these are the lines inside the square, and you are particularly start at the top right coordinate in the rectangle inside the square.37is short for start svg position at coordinates 37px on X-axis17start svg position at coordinates 17px on the Y-axis
- v15
- v stands for vertical. Capital V means absolute coordinates and lower-case means relative length/distance. dx/dy and x/y can be used in place of H/V and h/v.
- This is saying draw a vertical line 15px relative to the coordinates given. That means you're drawing a line 15px down to coordinates 37,32.
H14- H stands for horizontal and it is absolute because it is capitalized.
- Starting at the end of
v15you start drawing a horizontal line until you reach the absolute coordinate 14, stop once you reach x-axis coordinate 14. This puts you at coordinates 14,32.
V17- Just like before, start from the last line drawn and draw a vertical line until you reach y-axis coordinate 17. This puts you at coordinates 14,17.
- H37
- Finally, start from 14,17 and draw a horizontal line until you reach x-axis coordinate 37. This puts you at coordinates 37,17 (the value of M).
z- lower-case z and capital Z both close (end) a series of svg lines.
,- The comma starts the next series of single vector graphic lines. The next series of single vector lines will make the outer square.
M50,0- Start at x-axis 50 and y-axis 0.
H0- Draw a line until you reach (0,0)
v50- Draw a vertical line 50px relative to (0,0). This draws a line down to (0,50)
h50- Draw a horizontal line 50px relative to (0,50). This draws a line right to (50,50)
V0- Draw a vertical line until you reach y-axis coordinate 0. This draws a line to (50,0), the value of M.
z- lower-case z and capital Z both close (end) a series of svg lines.