mozilla

# Revision 427003 of d

• Revision slug: Web/SVG/Attribute/d
• Revision title: d
• Revision id: 427003
• Created:
• Creator: Jeremie
• Is current revision? No
• Comment SVG/Attribute/d Web/SVG/Attribute/d
Tags:

## Revision Content

This attribute defines a path to follow.

## Usage context

Categories Path Description attribute Yes 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 elements:

• Moveto
• Lineto
• Curveto
• Arcto
• ClosePath

These are combined in a single string, with each element separated by whitespace. 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 elements 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,y` where x and y are absolute coordinates, horizontal and vertical respectively.
• `m dx,dy` where 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 elements, Lineto elements 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 up 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 curves, 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 direction 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.

Note:

There is no comma between the y-coordinate of the control point and the x-coordinate of the endpoint. This is true for both absolute and relative coordinates. If you accidentally place a comma after the control point, the path after that control point may be considered invalid. Use a single whitespace character to separate the control point from the endpoint.

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.

Note:

There is no comma between any given set of coordinates, i.e. c1y and c2x, or c2y and x. Whitespace must be used to separate the coordinates. If you accidentally put a comma between any two points, the path may be considered invalid from that point on.

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 LargeArcFag 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.

Note:

Unlike the Bezier functions, the comma placement in an ArcTo function has no real impact. Commas or whitespace can be used interchangably.

## 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 animation paths.

## Revision Source

```<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>This attribute defines a path to follow.</p>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="row">Categories</th>
<td>Path Description attribute</td>
</tr>
<tr>
<th scope="row">Value</th>
<td>&lt;List of movements&gt;</td>
</tr>
<tr>
<th scope="row">Animatable</th>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Normative document</th>
<td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#DurAttribute" title="http://www.w3.org/TR/SVG/animate.html#DurAttribute">SVG 1.1 (2nd Edition)</a></td>
</tr>
</tbody>
</table>
<p>The&nbsp; <strong>d</strong> attribute is actually a string which contains a series of path descriptions. These paths consist of combinations the following elements:</p>
<ul>
<li>Moveto</li>
<li>Lineto</li>
<li>Curveto</li>
<li>Arcto</li>
<li>ClosePath</li>
</ul>
<p>These are combined in a single string, with each element separated by whitespace. 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.</p>
<h2 id="Moveto">Moveto</h2>
<p>Moveto elements 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.</p>
<p>Syntax:</p>
<ul>
<li><code>M x,y</code> where x and y are absolute coordinates, horizontal and vertical respectively.</li>
<li><code>m dx,dy</code> where dx and dy are distances relative to the current position, to the right and down respectively.</li>
</ul>
<p>Examples:</p>
<ul>
<li>Absolute positioning at x=50, y= 100: <code>&lt;path d="M50,100..." /&gt;</code></li>
<li>Move 50 right, 100 down : <code>&lt;path d="m50,100..." /&gt;</code></li>
</ul>
<h2 id="Lineto">Lineto</h2>
<p>Unlike Moveto elements, Lineto elements 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 up 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.</p>
<h2 id="Curveto">Curveto</h2>
<p>Curveto commands specify a <a href="/User:Jt//Sandbox/Curves_in_Paths" title="Curves in Paths">Bezier curve</a>. There are two types of Bezier curves: Cubic and Quadratic. Quadratic Bezier curves are a special case of the Cubic bezier curves, 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 direction 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.</p>
<div>
<div>
<div class="note" style="undefined">
<p>Note:</p>
<p>There is no comma between the y-coordinate of the control point and the x-coordinate of the endpoint. This is true for both absolute and relative coordinates. If you accidentally place a comma after the control point, the path after that control point may be considered invalid. Use a single whitespace character to separate the control point from the endpoint.</p>
</div>
<p>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.</p>
<div class="note" style="undefined">
<p>Note:</p>
<p>There is no comma between any given set of coordinates, i.e. c1y and c2x, or c2y and x. Whitespace must be used to separate the coordinates. If you accidentally put a comma between any two points, the path may be considered invalid from that point on.</p>
</div>
<p>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.</p>
<p>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:</p>
<div class="geckoVersionNote" style="undefined">
<p><code>&lt;path d="c 50,0 50,100 100,100 50,0 50,-100 100,-100" /&gt;<br />
&lt;path d="c 50,0 50,100 100,100 c 50,0 50,-100 100,-100" /&gt;</code></p>
</div>
<h2 id="Arcto">Arcto</h2>
<p>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,&nbsp; The LargeArcFag 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.</p>
<div class="note" style="undefined">
<p>Note:</p>
<p>Unlike the Bezier functions, the comma placement in an ArcTo function has no real impact. Commas or whitespace can be used interchangably.</p>
</div>
<h2 id="ClosePath">ClosePath</h2>
<p>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.</p>
</div>
</div>
<h2 id="Elements">Elements</h2>
<p>The following elements can use the <code>d</code> attribute:</p>
<ul>
<li><a href="/en/SVG/Element/path" title="path">Path</a> »</li>
</ul>
<p>In additon, the same rules here apply to <a href="/en/SVG/Element/animate" title="animate">animation paths</a>.</p>```