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.
This attribute is used with the SVG <path>
element.
d
is a presentation attribute, and hence can also be used as a CSS property.
Example
<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
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.
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"
);
}
<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>
For a <path>
animation example, see the CSS d
property reference page example.
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
Formula: Pn = { |
m | (dx , dy )+ |
Move the current point by shifting the last known position of
the path by
Formula: Pn = {xo
+ |
Examples
<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
Formula: Po′ =
Pn = { |
l | (dx , dy )+ |
Draw a line from the current point to the
end point, which is the current point shifted by
Formula: Po′ =
Pn = {xo +
|
H | x + |
Draw a horizontal line from the current point to the
end point, which is specified by the
Formula: Po′ =
Pn = { |
h | dx + |
Draw a horizontal line from the current point to the
end point, which is specified by the
current point shifted by
Formula: Po′ =
Pn = {xo +
|
V | y + |
Draw a vertical line from the current point to the
end point, which is specified by the
Formula: Po′ =
Pn = {xo, |
v | dy + |
Draw a vertical line from the current point to the
end point, which is specified by the
current point shifted by
Formula: Po′ =
Pn = {xo, yo + |
Examples
<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
|
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
|
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
<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
|
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
|
T | (x ,y )+ |
Draw a smooth quadratic Bézier curve from the
current point to the end point specified by
|
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
|
Examples
<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 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 and dy for the next
command. All subsequent sets of parameters are considered implicit
relative arc curve (a ) commands.
|
Examples
<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
<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