MDN / d
MDN / 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
html,
body,
svg {
height: 100%;
}
<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 , d is a string containing a series of path commands that define the path to be drawn.
Using d as a CSS property
d is a presentation attribute, and hence can be also be modified using CSS. The property takes either 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 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,mLineTo:
L,l,H,h,V,vCubic Bézier curve:
C,c,S,sQuadratic Bézier curve:
Q,q,T,tElliptical arc curve:
A,aClosePath:
Z,z
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}).
Examples
html,
body,
svg {
height: 100%;
}
<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′).
Examples
html,
body,
svg {
height: 100%;
}
<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′).
Examples
html,
body,
svg {
height: 100%;
}
<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′).
Examples
html,
body,
svg {
height: 100%;
}
<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.
Examples
html,
body,
svg {
height: 100%;
}
<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.
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 setting), rather than just being placed at the same coordinates.
Examples
html,
body,
svg {
height: 100%;
}
<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
Browser compatibility
See also
SVG element
CSS property