SVG path element
Jakob Jenkov |
The SVG <path> element is used to draw advanced shapes combined from
lines, arcs, curves etc. with or without fill.
The <path> element is probably the most advanced and
versatile SVG shape of them all. It is probably also the hardest element to master.
SVG Path - Video Tutorial
Here is a video version of this tutorial:
Path Example
Let us first start with a simple SVG <path> example:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M50,50
A30,30 0 0,1 35,20
L100,100
M110,110
L100,0"
style="stroke:#660000; fill:none;"/>
</svg>
Here is the resulting image:
Notice how the image contains an arc and two lines, and how the second line is not joined with the first arc and line.
All drawing with the <path> element is specified inside the d attribute.
The d attribute contains drawing commands. In the example above the M signals a "move to"
command, the A signals an "Arc" command, and the L signals a "Line" command. The commands are given
to a "virtual pen". This pen can be moved, made to draw shapes etc.
Setting and Moving the Pen
The first drawing command inside the <path> d attribute should
always be a move command. Before you can draw anything you should move the virtual pen to some
location. This is done using the M command. Here is a simple example:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M50,50"
style="stroke:#660000; fill:none;"/>
</svg>
This example moves the virtual pen to the point 50,50. The next drawing command
will start from that point.
Lines
Drawing a line is probably the simplest command you can give the <path> element.
Drawing lines is done using the L and l (lowercase L) commands.
Here is an example:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M50,50
L100,100"
style="stroke:#660000; fill:none;"/>
</svg>
This example draws a line from the point 50,50 (the point of the M command)
to the point 100,100 (the point of the L command). Here is the resulting
image:
The difference between the L and l command is that the uppercase version (L)
draws a line to the absolute point passed to the command, whereas the lowercase version (l) version
draws a line to the relative point passed to the command. The relative point is the point of the virtual pen
before the line starts plus the coordinates given to the l command.
If the virtual pen is located
at 50,50 and you use an l100,100 command, the line will be drawn to 50+100,50+100 =
150,150.
Using an L100,100 command would have drawn the line to 100,100 exactly, regardless of the location
of the virtual pen.
Drawing Moves the Virtual Pen
Path shapes are always drawn from the last virtual pen point to a new point. Each drawing command takes an end point. After executing that command, the virtual pen point will be located at the end point of that drawing command. The next drawing command will start from that point.
Arcs
Drawing arcs using the <path> element is done using the A and a
commands. Like with lines, the uppercase command (A) uses absolute coordinates for its endpoint, where the
lowercase command (a) uses relative coordinates (relative to the start point). Here is an example:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M50,50
A30,50 0 0,1 100,100"
style="stroke:#660000; fill:none;"/>
</svg>
Here is the resulting image:
This example draws an arc from the point 50,50 to the point 100,100
(specified last in the A command).
The radius of the arc is set by the two first
parameters set on the A command. The first parameter is rx (radius
in x-direction) and the second is ry (radius in y-direction).
Setting rx and ry to the same value will result in a circular
arc. Setting rx and ry to different values will result in an elliptical
arc. In the example above rx was set to 30 and ry to 50.
The third parameter set on the A command is the x-axis-rotation. This sets the
rotation of the arc's x-axis compared to the normal x-axis. In the above example the x-axis-rotation
is set to 0. Most of the time you will not need to change this parameter.
The fourth and fifth parameters are the large-arc-flag and sweep-flag parameters.
The large-arc-flag determines whether to draw the smaller or bigger arc satisfying the
start point, end point and rx and ry. Here is an example drawing 4 arcs
each with different combinations of the large-arc-flag and sweep-flag:
<path d="M40,20 A30,30 0 0,0 70,70"
style="stroke: #cccc00; stroke-width:2; fill:none;"/>
<path d="M40,20 A30,30 0 1,0 70,70"
style="stroke: #ff0000; stroke-width:2; fill:none;"/>
<path d="M40,20 A30,30 0 1,1 70,70"
style="stroke: #00ff00; stroke-width:2; fill:none;"/>
<path d="M40,20 A30,30 0 0,1 70,70"
style="stroke: #0000ff; stroke-width:2; fill:none;"/>
Here is the resulting image:
Four different arcs can be drawn from 40,20 to the point 60,70.
A long arc, a small arc, and two mirrored versions of each small/large arc. The large-arc-flag
determines whether the large or small arc is to be drawn. The sweep-flag determines
whether the arc is mirrored around the axis going form start point to end point. Actually,
the sweep-flag controls the direction the arc is drawn (clock-wise or counter-clock-wise)
which results in a "mirroring" effect.
The first arc drawn is the yellow arc. Having large-arc-flag set to 0 means
that the smaller of the possible arcs will be drawn. The sweep-flag is also
set to 0 meaning the arc is not mirrored. Here is the yellow arc:
The second arc drawn is the red arc. Having the large-arc-flag set to 1
means that the larger of the two possible arcs are drawn from 40,20 to 60,70.
Here is the yellow and the red arc shown together to illustrate the difference:
The green and the blue arc (from the example earlier with all four arcs) are the same as the yellow and red arc,
but drawn with the sweep-flag set to 1. This means that they will draw the same
arcs but mirrored over the axis going from the starting point to the end point.
Quadratic Bezier Curves
It is also possible to draw quadratic Bezier curves using the <path>
element. Drawing quadratic Bezier curves is done with the Q and q commands.
Like with lines, the uppercase command (Q) uses absolute coordinates for its endpoint, where the
lowercase command (q) uses relative coordinates (relative to the start point).
Here is a simple quadratic curve example:
<path d="M50,50 Q50,100 100,100"
style="stroke: #006666; fill:none;"/>
Here is the resulting image:
The example draws a quadratic Bezier curve from 50,50 to the point 100,100
with a control point at 50,200. The control point is the first of the two parameters set on
the Q command.
The control point pulls the curve like a magnet. The closer a point on the curve is to the control point, the more the control point pulls in it, meaning the closer to the control point it will be. Here are a few more examples with the control points drawn on the image:
In fact, if you draw a line from the start point to the control point, and another line from the control point to the end point, then the line from the middle of the first line to the middle of the second line will be a tangent of the curve. Here is an image illustrating that:
Cubic Bezier Curves
Drawing cubic Bezier curves is done using the C and c commands. Cubic Bezier
curves are like quadratic Bezier curves except they have two control points instead of one.
Like with lines, the uppercase command (C) uses absolute coordinates for its endpoint, where the
lowercase command (c) uses relative coordinates (relative to the start point).
Here is an example:
<path d="M50,50 C75,80 125,20 150,50"
style="stroke: #006666; fill:none;"/>
Here is the resulting image with the control points drawn too.
You can create advanced curves with cubic Bezier curves. Here are a few examples:
Closing the Path
The <path> element has a shortcut command for closing the path,
meaning drawing a line from the last point back to the first point. The command
is Z (or z - there is no difference between the uppercase and lowercase
close path command). Here is an example:
<path d="M50,50 L100,50 L100,100 Z"
style="stroke: #006666; fill:none;"/>
And here is the resulting image:
Combining Commands
You can combine the path commands inside the same <path> element.
Here is an example:
<path d="M100,100
L150,100
a50,25 0 0,0 150,100
q50,-50 70,-170
Z"
style="stroke: #006666; fill: none;"/>
This example draws a line, an arc, a quadratic Bezier curve and finishes by closing the path with a line back to the starting point. Here is the resulting image:
Filling Paths
You can fill paths using the fill CSS property. Here is an example:
<path d="M100,100 L150,100 L150,150 Z"
style="stroke: #0000cc;
stroke-width: 2px;
fill : #ccccff;"/>
Here is the resulting image:
Notice how the inside of the shape is filled with a light blue color.
Markers
You can use markers on a <path> element. Markers are small symbols located at the
start, mid and end of the path, showing the direction of the path. For instance, a circle or square
at the beginning of the path, and an arrowhead at the end.
Markers are explained in more detail in the marker element text.
Notational Shortcuts
If you need to use the same command multiple times after each other, you can omit the command letter and just provide an additional set of parameters as if the command was there. Here is an example:
<path d="M10,10 l100,0 0,50 -100,0 0,-50"
style="stroke: #000000; fill:none;" />
This example shows how additional parameters are passed to the l command as if an l
was located in front of each parameter pair. This works for the other path commands too. Here is the
resulting image:
Path Commands
Below is a list of possible pen commands for the SVG path element. Each command consist of one letter and
a set of numbers (coordinates etc.) which are parameters to that command. Uppercase
commands usually interpret coordinate parameters as absolute coordinates. Lowercase
commands usually interpret coordinate parameters as being relative from current pen location.
| Com. | Parameters | Name | Description |
| M | x,y | moveto | Moves pen to specified point x,y without drawing. |
| m | x,y | moveto | Moves pen to specified point x,y relative to current pen location, without drawing. |
| L | x,y | lineto | Draws a line from current pen location to specified point x,y . |
| l | x,y | lineto | Draws a line from current pen location to specified point x,y relative to current pen location. |
| H | x | horizontal lineto | Draws a horizontal line to the point defined by (specified x, pens current y). |
| h | x | horizontal lineto | Draws a horizontal line to the point defined by (pens current x + specified x, pens current y). The x is relative to the current pens x position. |
| V | y | vertical lineto | Draws a vertical line to the point defined by (pens current x, specified y). |
| v | y | vertical lineto | Draws a vertical line to the point defined by (pens current x, pens current y + specified y). The y is relative to the pens current y-position. |
| C | x1,y1 x2,y2 x,y | curveto | Draws a cubic Bezier curve from current pen point to x,y. x1,y1 and x2,y2 are start and end control points of the curve, controlling how it bends. |
| c | x1,y1 x2,y2 x,y | curveto | Same as C, but interprets coordinates relative to current pen point. |
| S | x2,y2 x,y | shorthand / |
Draws a cubic Bezier curve from current pen point to x,y. x2,y2 is the end control point. The start control point is is assumed to be the same as the end control point of the previous curve. |
| s | x2,y2 x,y | shorthand / smooth curveto |
Same as S, but interprets coordinates relative to current pen point. |
| Q | x1,y1 x,y | quadratic Bezier curveto | Draws a quadratic Bezier curve from current pen point to x,y. x1,y1 is the control point controlling how the curve bends. |
| q | x1,y1 x,y | quadratic Bezier curveto | Same as Q, but interprets coordinates relative to current pen point. |
| T | x,y | shorthand / smooth quadratic Bezier curveto | Draws a quadratic Bezier curve from current pen point to x,y. The control point is assumed to be the same as the last control point used. |
| t | x,y | shorthand / smooth quadratic Bezier curveto | Same as T, but interprets coordinates relative to current pen point. |
| A | rx,ry x-axis-rotation large-arc-flag, sweepflag x,y |
elliptical arc | Draws an elliptical arc from the current point to the point x,y.
rx and ry are the elliptical radius in x and y direction. The x-rotation determines how much the arc is to be rotated around the x-axis. It only seems to have an effect when rx and ry have different values. The large-arc-flag doesn't seem to be used (can be either 0 or 1). Neither value (0 or 1) changes the arc. The sweep-flag determines the direction to draw the arc in. |
| a | rx,ry x-axis-rotation large-arc-flag, sweepflag x,y |
elliptical arc | Same as A, but interprets coordinates relative to current pen point. |
| Z | closepath | Closes the path by drawing a line from current point to first point. | |
| z | closepath | Closes the path by drawing a line from current point to first point. |
| Tweet | |
Jakob Jenkov | |
