Jenkov.com
Tutorials Books About
Svg

1 SVG Tutorial
2 SVG Examples
3 A Simple SVG Example
4 Displaying SVG in Web Browsers
5 SVG Coordinate System
6 SVG svg element
7 SVG g element
8 SVG rect element
9 SVG circle element
10 SVG ellipse element
11 SVG line element
12 SVG polyline element
13 SVG polygon element
14 SVG path element
15 SVG marker element
16 SVG text element
17 SVG tspan element
18 SVG tref element
19 SVG textpath element
20 SVG switch element
21 SVG image element
22 SVG a element
23 SVG defs Elements
24 SVG symbol Element
25 SVG use Element
26 SVG and CSS - Cascading Style Sheets
27 SVG Stroke
28 SVG Fill
29 SVG Viewport and View Box
30 SVG Animation
31 SVG Scripting
32 SVG Transformation
33 SVG Gradients
34 SVG Fill Patterns
35 SVG Clip Path
36 SVG Masks
37 SVG Filters




SVG path element


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.

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 /
smooth curveto
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.


Connect with me: Newsletter - Get all my free tips!