d
=

The **`d`** attribute defines a path to be drawn.

 A path definition is a list of path commands where each command is composed of a command letter and numbers that represent the command parameters.
 The commands are detailed below.

You can use this attribute with the following SVG elements: `<path>`, `<glyph>`, `<missing-glyph>`.

`d` is a presentation attribute, and hence can also be used as a CSS property.

Example
-------
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
 fill="none"
 stroke="red"
 d="M 10,30
 A 20,20 0,0,1 50,30
 A 20,20 0,0,1 90,30
 Q 90,60 50,90
 Q 10,60 10,30 z" />
</svg>
```

path
----

For `<path>`, `d` is a string containing a series of path commands that define the path to be drawn.

|  |  |
| --- | --- |
| Value | **<string>** |
| Default value | *none* |
| Animatable | Yes |

glyph
-----

**Warning:** As of SVG2 `<glyph>` is deprecated and shouldn't be used.

For `<glyph>`, `d` is a string containing a series of path commands that define the outline shape of the glyph.

|  |  |
| --- | --- |
| Value | **<string>** |
| Default value | *none* |
| Animatable | Yes |

**Note:** 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.

missing-glyph
-------------

**Warning:** As of SVG2 `<missing-glyph>` is deprecated and shouldn't be used.

For `<missing-glyph>`, `d` is a string containing a series of path commands that define the outline shape of the glyph.

|  |  |
| --- | --- |
| Value | **<string>** |
| Default value | *none* |
| Animatable | Yes |

Using d as a CSS property
-------------------------

`d` is a presentation attribute, and hence can be also be modified using CSS.
 The property takes either path() or `none`.

 The example below shows how you might apply a new path on hover over an element.
 The new path is the same as the old one, but adds a line across the heart.


```css
html,
body,
svg {
  height: 100%;
}

/\* This path is displayed on hover\*/
#svg\_css\_ex1:hover path {
  d: path(
    "M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z M5,5 L90,90"
  );
}
```



```html
<svg id="svg\_css\_ex1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
 fill="none"
 stroke="red"
 d="M 10,30
 A 20,20 0,0,1 50,30
 A 20,20 0,0,1 90,30
 Q 90,60 50,90
 Q 10,60 10,30 z
 " />
</svg>
```

Path commands
-------------

Path commands are instructions that define a path to be drawn. Each command is composed of a command letter and numbers that represent the command parameters.

SVG defines 6 types of path commands, for a total of 20 commands:

* MoveTo: `M`, `m`
* LineTo: `L`, `l`, `H`, `h`, `V`, `v`
* Cubic Bézier Curve: `C`, `c`, `S`, `s`
* Quadratic Bézier Curve: `Q`, `q`, `T`, `t`
* Elliptical Arc Curve: `A`, `a`
* ClosePath: `Z`, `z`

**Note:** Commands are *case-sensitive*. An upper-case command specifies absolute coordinates, while a lower-case command specifies coordinates 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* negative *x* and *y* values are interpreted as negative coordinates;
* *relative* negative *x* values move to the left, and relative negative *y* values move upwards.
### MoveTo path commands

*MoveTo* instructions can be thought of as picking up the drawing instrument, and setting it down somewhere else—in other words, moving the *current point* (*Po*; {*xo*, *yo*}). There is no line drawn between *Po* and the new *current point* (*Pn*; {*xn*, *yn*}).

| Command | Parameters | Notes |
| --- | --- | --- |
| M | (`x`, `y`)+ | 
 Move the *current point* to the coordinate
 `x`,`y`. Any subsequent coordinate pair(s) are interpreted as parameter(s)
 for implicit absolute LineTo (`L`) command(s) (*see below*).

**Formula:** Pn = {`x`, `y`} |
| m | (`dx`, `dy`)+ | 
 Move the *current point* by shifting the last known position of
 the path by `dx` along the x-axis and by
 `dy` along the y-axis. Any subsequent coordinate
 pair(s) are interpreted as parameter(s) for implicit relative LineTo
 (`l`) command(s) (*see below*).


**Formula:** Pn = {xo
 + `dx`, yo + `dy`}
  |

#### Examples
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
 fill="none"
 stroke="red"
 d="M 10,10 h 10
 m 0,10 h 10
 m 0,10 h 10
 M 40,20 h 10
 m 0,10 h 10
 m 0,10 h 10
 m 0,10 h 10
 M 50,50 h 10
 m-20,10 h 10
 m-20,10 h 10
 m-20,10 h 10" />
</svg>
```

### LineTo path commands

*LineTo* instructions draw a straight line from the *current point* (*Po*; {*xo*, *yo*}) to the *end point* (*Pn*; {*xn*, *yn*}), based on the parameters specified. The *end point* (*Pn*) then becomes the *current point* for the next command (*Po′*).

| Command | Parameters | Notes |
| --- | --- | --- |
| L | (`x`, `y`)+ | 
 Draw a line from the *current point* to the
 *end point* specified by `x`,`y`. Any subsequent coordinate pair(s) are interpreted as parameter(s)
 for implicit absolute LineTo (`L`) command(s).


**Formula:** Po′ =
 Pn = {`x`, `y`}
  |
| l | (`dx`, `dy`)+ | 
 Draw a line from the *current point* to the
 *end point,* which is the *current point* shifted by
 `dx` along the x-axis and
 `dy` along the y-axis. Any subsequent coordinate
 pair(s) are interpreted as parameter(s) for implicit relative LineTo
 (`l`) command(s) (*see below*).


**Formula:** Po′ =
 Pn = {xo +
 `dx`, yo + `dy`}
  |
| H | `x`+ | 
 Draw a horizontal line from the *current point* to the
 *end point*, which is specified by the
 `x` parameter and the *current point's*
`y` coordinate. Any subsequent value(s) are interpreted as
 parameter(s) for implicit absolute horizontal LineTo (`H`)
 command(s).


**Formula:** Po′ =
 Pn = {`x`, yo}
  |
| h | `dx`+ | 
 Draw a horizontal line from the *current point* to the
 *end point,* which is specified by the
 *current point* shifted by `dx` along the
 x-axis and the *current point's* `y` coordinate. Any
 subsequent value(s) are interpreted as parameter(s) for implicit
 relative horizontal LineTo (`h`) command(s).


**Formula:** Po′ =
 Pn = {xo +
 `dx`, yo}
  |
| V | `y`+ | 
 Draw a vertical line from the *current point* to the
 *end point*, which is specified by the
 `y` parameter and the *current point's*
`x` coordinate. Any subsequent values are interpreted as
 parameters for implicit absolute vertical LineTo (`V`)
 command(s).


**Formula:** Po′ =
 Pn = {xo, `y`}
  |
| v | `dy`+ | 
 Draw a vertical line from the *current point* to the
 *end point,* which is specified by the
 *current point* shifted by `dy` along the
 y-axis and the *current point's* `x` coordinate. Any
 subsequent value(s) are interpreted as parameter(s) for implicit
 relative vertical LineTo (`v`) command(s).


**Formula:** Po′ =
 Pn = {xo, yo + `dy`}
  |

#### Examples
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- LineTo commands with absolute coordinates -->
  <path
 fill="none"
 stroke="red"
 d="M 10,10
 L 90,90
 V 10
 H 50" />

  <!-- LineTo commands with relative coordinates -->
  <path
 fill="none"
 stroke="red"
 d="M 110,10
 l 80,80
 v -80
 h -40" />
</svg>
```

### Cubic Bézier Curve

*Cubic Bézier curves* are smooth curve definitions using four points:

starting point (current point)

(*Po* = {*xo*, *yo*})

end point

(*Pn* = {*xn*, *yn*})

start control point

 (*Pcs* = {*xcs*, *ycs*})
 (controls curvature near the start of the curve)


end control point

 (*Pce* = {*xce*, *yce*})
 (controls curvature near the end of the curve)


After drawing, the *end point* (*Pn*) becomes the *current point* for the next command (*Po′*).

| Command | Parameters | Notes |
| --- | --- | --- |
| C | (`x1`,`y1`, `x2`,`y2`, `x`,`y`)+ | 
 Draw a cubic Bézier curve from the *current point* to the
 *end point* specified by `x`,`y`. The *start control point* is specified by
 `x1`,`y1` and the *end control point* is
 specified by `x2`,`y2`. Any subsequent triplet(s) of coordinate pairs are interpreted as
 parameter(s) for implicit absolute cubic Bézier curve (`C`)
 command(s).


Formulae:
Po′ = Pn = {`x`, `y`} ;Pcs = {`x1`, `y1`} ;Pce = {`x2`, `y2`}
 |
| c | (`dx1`,`dy1`, `dx2`,`dy2`, `dx`,`dy`)+ | 
 Draw a cubic Bézier curve from the *current point* to the
 *end point,* which is the *current point* shifted by
 `dx` along the x-axis and
 `dy` along the y-axis. The
 *start control point* is the *current point* (starting
 point of the curve) shifted by `dx1` along the
 x-axis and `dy1` along the y-axis. The
 *end control point* is the *current point* (starting
 point of the curve) shifted by `dx2` along the
 x-axis and `dy2` along the y-axis. Any
 subsequent triplet(s) of coordinate pairs are interpreted as
 parameter(s) for implicit relative cubic Bézier curve (`c`)
 command(s).


Formulae:

Po′ = Pn = {xo
 + `dx`, yo + `dy`} ;Pcs = {xo +
 `dx1`, yo + `dy1`} ;Pce = {xo +
 `dx2`, yo + `dy2`}

 |
| S | (`x2`,`y2`, `x`,`y`)+ | 
 Draw a smooth cubic Bézier curve from the *current point* to the
 *end point* specified by `x`,`y`. The *end control point* is specified by
 `x2`,`y2`. The *start control point* is the reflection of the
 *end control point* of the previous curve command about the *current point*. If the
 previous command wasn't a cubic Bézier curve, the
 *start control point* is the same as the curve starting point
 (*current point*). Any subsequent pair(s) of coordinate pairs are
 interpreted as parameter(s) for implicit absolute smooth cubic Bézier
 curve (`S`) commands.
  |
| s | (`dx2`,`dy2`, `dx`,`dy`)+ | 
 Draw a smooth cubic Bézier curve from the *current point* to the
 *end point*, which is the *current point* shifted by
 `dx` along the x-axis and
 `dy` along the y-axis. The
 *end control point* is the *current point* (starting point
 of the curve) shifted by `dx2` along the x-axis
 and `dy2` along the y-axis. The
 *start control point* is the reflection of the
 *end control point* of the previous curve command about the *current point*. If the
 previous command wasn't a cubic Bézier curve, the
 *start control point* is the same as the curve starting point
 (*current point*). Any subsequent pair(s) of coordinate pairs are
 interpreted as parameter(s) for implicit relative smooth cubic Bézier
 curve (`s`) commands.
  |

#### Examples
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg
 viewBox="0 0 200 100"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- Cubic Bézier curve with absolute coordinates -->
  <path
 fill="none"
 stroke="red"
 d="M 10,90
 C 30,90 25,10 50,10
 S 70,90 90,90" />

  <!-- Cubic Bézier curve with relative coordinates -->
  <path
 fill="none"
 stroke="red"
 d="M 110,90
 c 20,0 15,-80 40,-80
 s 20,80 40,80" />

  <!-- Highlight the curve vertex and control points -->
  <g id="ControlPoints">
    <!-- First cubic command control points -->
    <line x1="10" y1="90" x2="30" y2="90" stroke="lightgrey" />
    <circle cx="30" cy="90" r="1.5" />

    <line x1="50" y1="10" x2="25" y2="10" stroke="lightgrey" />
    <circle cx="25" cy="10" r="1.5" />

    <!-- Second smooth command control points (the first one is implicit) -->
    <line
 x1="50"
 y1="10"
 x2="75"
 y2="10"
 stroke="lightgrey"
 stroke-dasharray="2" />
    <circle cx="75" cy="10" r="1.5" fill="lightgrey" />

    <line x1="90" y1="90" x2="70" y2="90" stroke="lightgrey" />
    <circle cx="70" cy="90" r="1.5" />

    <!-- curve vertex points -->
    <circle cx="10" cy="90" r="1.5" />
    <circle cx="50" cy="10" r="1.5" />
    <circle cx="90" cy="90" r="1.5" />
  </g>
  <use href="#ControlPoints" x="100" />
</svg>
```

### Quadratic Bézier Curve

*Quadratic Bézier curves* are smooth curve definitions using three points:

starting point (current point)

*Po* = {*xo*, *yo*}

end point

*Pn* = {*xn*, *yn*}

control point

*Pc* = {*xc*, *yc*}
 (controls curvature)


After drawing, the *end point* (*Pn*) becomes the *current point* for the next command (*Po′*).

| Command | Parameters | Notes |
| --- | --- | --- |
| Q | (`x1`,`y1`, `x`,`y`)+ | 
 Draw a quadratic Bézier curve from the *current point* to the
 *end point* specified by `x`,`y`. The *control point* is specified by
 `x1`,`y1`. Any subsequent pair(s) of coordinate pairs are interpreted as
 parameter(s) for implicit absolute quadratic Bézier curve
 (`Q`) command(s).


**Formulae:**
Po′ = Pn = {`x`, `y`} ;Pc = {`x1`, `y1`}
 |
| q | (`dx1`,`dy1`, `dx`,`dy`)+ | 
 Draw a quadratic Bézier curve from the *current point* to the
 *end point*, which is the *current point* shifted by
 `dx` along the x-axis and
 `dy` along the y-axis. The
 *control point* is the *current point* (starting point
 of the curve) shifted by `dx1` along the x-axis
 and `dy1` along the y-axis. Any subsequent
 pair(s) of coordinate pairs are interpreted as parameter(s) for
 implicit relative quadratic Bézier curve (`q`) command(s).


Formulae:

Po′ = Pn = {xo
 + `dx`, yo + `dy`} ;Pc = {xo +
 `dx1`, yo + `dy1`}

 |
| T | (`x`,`y`)+ | 
 Draw a smooth quadratic Bézier curve from the
 *current point* to the *end point* specified by
 `x`,`y`. The *control point* is the reflection of the
 *control point* of the previous curve command about the *current point*. If the previous
 command wasn't a quadratic Bézier curve, the *control point* is
 the same as the curve starting point (*current point*). Any
 subsequent coordinate pair(s) are interpreted as parameter(s) for
 implicit absolute smooth quadratic Bézier curve (`T`)
 command(s).


Formula:
Po′ = Pn = {`x`, `y`}
 |
| t | (`dx`,`dy`)+ | 
 Draw a smooth quadratic Bézier curve from the
 *current point* to the *end point*, which is the
 *current point* shifted by `dx` along the
 x-axis and `dy` along the y-axis. The
 *control point* is the reflection of the
 *control point* of the previous curve command about the *current point*. If the previous
 command wasn't a quadratic Bézier curve, the *control point* is
 the same as the curve starting point (*current point*). Any
 subsequent coordinate pair(s) are interpreted as parameter(s) for
 implicit relative smooth quadratic Bézier curve (`t`)
 command(s).


Formulae:

Po′ = Pn = {xo
 + `dx`, yo + `dy`}

 |

#### Examples
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg
 viewBox="0 0 200 100"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- Quadratic Bézier curve with implicit repetition -->
  <path
 fill="none"
 stroke="red"
 d="M 10,50
 Q 25,25 40,50
 t 30,0 30,0 30,0 30,0 30,0" />

  <!-- Highlight the curve vertex and control points -->
  <g>
    <polyline
 points="10,50 25,25 40,50"
 stroke="rgb(0 0 0 / 20%)"
 fill="none" />
    <circle cx="25" cy="25" r="1.5" />

    <!-- Curve vertex points -->
    <circle cx="10" cy="50" r="1.5" />
    <circle cx="40" cy="50" r="1.5" />

    <g id="SmoothQuadraticDown">
      <polyline
 points="40,50 55,75 70,50"
 stroke="rgb(0 0 0 / 20%)"
 stroke-dasharray="2"
 fill="none" />
      <circle cx="55" cy="75" r="1.5" fill="lightgrey" />
      <circle cx="70" cy="50" r="1.5" />
    </g>

    <g id="SmoothQuadraticUp">
      <polyline
 points="70,50 85,25 100,50"
 stroke="rgb(0 0 0 / 20%)"
 stroke-dasharray="2"
 fill="none" />
      <circle cx="85" cy="25" r="1.5" fill="lightgrey" />
      <circle cx="100" cy="50" r="1.5" />
    </g>

    <use href="#SmoothQuadraticDown" x="60" />
    <use href="#SmoothQuadraticUp" x="60" />
    <use href="#SmoothQuadraticDown" x="120" />
  </g>
</svg>
```

### Elliptical Arc Curve

*Elliptical arc curves* are curves defined as a portion of an ellipse. It is sometimes easier to draw highly regular curves with an elliptical arc than with a Bézier curve.

| Command | Parameters | Notes |
| --- | --- | --- |
| A | 
 (`rx` `ry`
`angle` `large-arc-flag`
`sweep-flag` `x`
`y`)+
  | 
 Draw an Arc curve from the current point to the coordinate
 `x`,`y`. The center of the ellipse used to draw the arc is determined
 automatically based on the other parameters of the command:
 * `rx` and `ry` are the
 two radii of the ellipse;
* `angle` represents a rotation (in degrees) of
 the ellipse relative to the x-axis;
* `large-arc-flag` and
 `sweep-flag` allows to chose which arc must be
 drawn as 4 possible arcs can be drawn out of the other parameters.
    + `large-arc-flag` allows to chose one of
     the large arc (`1`) or small arc (`0`),
    + `sweep-flag` allows to chose one of the
     clockwise turning arc (`1`) or counterclockwise
     turning arc (`0`)

The coordinate `x`,`y` becomes the new current point for the next
 command. All subsequent sets of parameters are considered implicit
 absolute arc curve (`A`) commands.
  |
| a | 
 (`rx` `ry`
`angle` `large-arc-flag`
`sweep-flag` `dx`
`dy`)+
  | 
 Draw an Arc curve from the current point to a point for which
 coordinates are those of the current point shifted by
 `dx` along the x-axis and
 `dy` along the y-axis. The center of the ellipse
 used to draw the arc is determined automatically based on the other
 parameters of the command:
 * `rx` and `ry` are the
 two radii of the ellipse;
* `angle` represents a rotation (in degrees) of
 the ellipse relative to the x-axis;
* `large-arc-flag` and
 `sweep-flag` allows to chose which arc must be
 drawn as 4 possible arcs can be drawn out of the other parameters.
    + `large-arc-flag` allows a choice of large
     arc (`1`) or small arc (`0`),
    + `sweep-flag` allows a choice of a
     clockwise arc (`1`) or counterclockwise arc
     (`0`)

The current point gets its X and Y coordinates shifted by
 `dx` and `dy` for the next
 command. All subsequent sets of parameters are considered implicit
 relative arc curve (`a`) commands.
  |

#### Examples
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
  <!-- The influence of the arc flags with which the arc is drawn -->
  <path
 fill="none"
 stroke="red"
 d="M 6,10
 A 6 4 10 1 0 14,10" />

  <path
 fill="none"
 stroke="lime"
 d="M 6,10
 A 6 4 10 1 1 14,10" />

  <path
 fill="none"
 stroke="purple"
 d="M 6,10
 A 6 4 10 0 1 14,10" />

  <path
 fill="none"
 stroke="pink"
 d="M 6,10
 A 6 4 10 0 0 14,10" />
</svg>
```

### ClosePath

*ClosePath* instructions draw a straight line from the *current position* to the first point in the path.

| Command | Parameters | Notes |
| --- | --- | --- |
| Z, z |  | 
 Close the current subpath by connecting the last point of the path with
 its initial point. If the two points are at different coordinates, a
 straight line is drawn between those two points.
  |

**Note:** 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.

#### Examples
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 -1 30 11" xmlns="http://www.w3.org/2000/svg">
  <!--
 An open shape with the last point of
 the path different to the first one
 -->
  <path
 stroke="red"
 d="M 5,1
 l -4,8 8,0" />

  <!--
 An open shape with the last point of
 the path matching the first one
 -->
  <path
 stroke="red"
 d="M 15,1
 l -4,8 8,0 -4,-8" />

  <!--
 A closed shape with the last point of
 the path different to the first one
 -->
  <path
 stroke="red"
 d="M 25,1
 l -4,8 8,0
 z" />
</svg>
```

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # DProperty |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # GlyphElementDAttribute |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # DAttribute |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.