Tutorial SVG 4: paths

svg elementen

Paths in SVG are exactly what you think it is: lines that define a shape. They are the most powerful instruments in SVG, because of their enormous flexibility and large amount of possibilities. A path is defined by the <path> element.

The <path> element

Example 1: drawing a line

The line in Image 1 has the following syntax:

<path stroke="black" d="M 20 20 L 200 100"/>

Paths have a d attribute which contains the collection of visiting point which always begin with the M subcommand, which represent the starting point (x,y)of the drawing. In our example above the starting point is (20,20). You could think of the M command as the place where you put your pen down on the paper when drawing a shape. The L option means drawing a line tot (200,100).

A line formed by a path
Image 1. A line formed by a path

Check this example in your browser

Example 2: drawing a triangle

The triangle in Image 2 has the following syntax:

<path d="M 20 20 L 200 100 300 150"/>

The triangle consists of two lines where the last point is connected to the starting point. There are a few things you should pay attention to here:

  • The path doesn't apply a stroke; by default, the figure is filled with black. If you
    specify fill="none", the figure will be invisible unless you specify a stroke
  • You might use commas between the consecutive pairs of coordinates which makes the code more legible.
  • If the same command is used more than once on a line of code, you can omit the subsequent commands. (as we omitted the second L command here)
A triangle formed by a path consisting  connected lines
Image 2. A triangle formed by a path consisting connected lines.

Check this example in your browser

Example 3: filling a path: nonzero or evenodd

The question arises what happens with the fill when a number of paths cross each other. By default the union of regions is filled (fill-rule="nonzero"). Another option for the fill is evenodd. In image 2 we demonstrate the difference between nonzero and evenodd.

<path d="M 100,50 L 100,200 150,200 150,100 50,100 50,150 200,150 200,100 150,100 150,50"/>
    <path d="M 100,50 L 100,200 150,200 150,100 50,100 50,150 200,150 200,100 150,100 150,50"
    fill-rule="evenodd" fill="#f16529" transform="translate(200,0)"/>
Filled paths with nonzero and evenodd
Image 3. Filled paths with nonzero and evenodd.

Check this example in your browser

Example 4: Drawing Quadratic Bézier Curves with the the Q Subcommand

A quadratic Bézier segment is defined by a start point, an end point, and one control point.
In this example

  • the beginning point (pen-down point)= (50,25)
  • the control point = (175,300)
  • the ending point = (300,25)

For drawing a Quadratic Bézier Curve we use the Q command instead of the L command

<path d="M 50,25 L 175,300 300,25" fill="none" stroke="#666" stroke-dasharray="2" stroke-width="2px" />
    <path d="M 50,25 Q 175,300 300,25"  fill="none" stroke="red" stroke-width="3px"/>

The difference between drawing lines here to the next point is that in a Bézier curve, you don't reach the next point, you just aim at it, meanwhile trying to reach the endpoint (like you have to much speed at the begin-point in the direction to the control point, while trying to travel to the end point; you are simply spinning out.)

We call this particular Bézier Curve a Quadratic Bézier Curve because the mathematical formula for this line is: y=ax2 + bx+c (e.g. y=2x2 +3x+2). There is however only one Quadratic Bézier Curve for every set of beginning point, control point, and ending point. The other possible curves are, although Bézier Curves, not quadratic. The conclusion which we can draw out of of all this is that defining curves in SVG can be quite a challenge, which is most likely the reason that most people use vector drawing programs such as Inkscape and Illustrator to create SVG curves

Example 4: Drawing Quadratic Bézier Curves with the the Q Subcommand

A quadratic bézier curve
Image 4. A quadratic bézier curve .

Check this example in your browser

Example 4a: Drawing Cubic Bézier Curves with the the C and S Subcommand

A cubic Bézier segment is defined by a start point, an end point, and two control points.

For drawing a Quadratic Bézier Curve we use the C command instead of the Q command

 <svg width="1200px" height="1200px">
  <path                                d="M 20,50   C 20,100  120,100  120,50"  fill="none" stroke="red" stroke-width="3px"/>
  <path transform="translate(150,0)"   d="M 20,90   C 20,20   120,20   120,90"  fill="none" stroke="red" stroke-width="3px"/>
  <path transform="translate(300,0)"   d="M 20,50   C 50,100   90,100  120,50"  fill="none" stroke="red" stroke-width="3px"/>
  <path transform="translate(0,120)"   d="M 20,50   C 50,100  150,100  120,50"  fill="none" stroke="red" stroke-width="3px"/>
  <path transform="translate(150,120)" d="M 20,50   C  0,100  150,100  120,50"  fill="none" stroke="red" stroke-width="3px"/>
  <path transform="translate(300,120)" d="M 20,50   C 20,100  120,0    120,50"  fill="none" stroke="red" stroke-width="3px"/>
  <path transform="translate(0,240)"   d="M 20,50   C 20,0     70,0     70,50 S 120,100   120,50"  fill="none" stroke="red" stroke-width="3px"/>
  <path transform="translate(150,240)" d="M 20,50   C 40,0     50,0     70,50 S 100,100   120,50"  fill="none" stroke="red" stroke-width="3px"/>
  <path transform="translate(300,240)" d="M 20,50   C 40,0     50,0     70,50 S 100,100   120,50 Z" fill="none" stroke="red" stroke-width="3px"/>
</svg>
    

Example 4a: Drawing a Cubic Bézier Curves with the C Subcommand

A quadratic bézier curve
Image 4. A cubic bézier curve .

Check this example in your browser

Example 5: Elliptical Arcs

One other often-used path command is the elliptical arc command (A), which allows you to quickly draw subsets of ellipses or intersecting ellipses. The arc subcommand of the element has the following syntax:

<path d="M(x,y)
A rx ry XAR fl fs xy"/>

M(x,y) - pen-down point

A= elliptical arc command

rx = radius x-direction ellips

ry = radius y-direction ellips

XAR)= x-axis-rotation

fl = large-arc-flag

fs = sweep-flag

x y = coordinates ending point

for example

 
 <svg width="600" height="400" >
    <path stroke="#333" stroke-width="2" fill="none"
    d="M50,100
    A100,50 0 0 1 250,100" />
</svg>
 

The arc begins at the Starting point (M) and ends at the Ending point (x,y), as demonstrated below:


Image 5. Elliptical arcs segments .

Check this example in your browser

You now have the choice of four elliptical arc segments: two small ones and two large ones. These arc segments can have a positive angular orientation (clockwise) or a negative orientation. The largearc- flag (fl) controls the angular orientation of the larger arc segment via fl = 0 : small, fl = 1 : large. The sweep-flag (fs) controls the angular orientation analogously, via fs = 0 : positive, and fs = 1 : negative.

Note! For the special case where the endpoint coordinates (x,y) are equal to the current point’s coordinates, the arc will not get rendered. Because this behavior is not intuitive when large-arc-flag is set to 1, this might be changed in the SVG 2.0 specification

Using this elliptical arc information, here’s the code to create a simple spiral:

 
 	<svg width="600" height="400" >
    <path stroke="darkslategray" stroke-width="6" fill="none"
    stroke-linecap="round"
    d="M50,100
    A100,50 0 0 1 250,100
    A80,40 0 0 1 90,100
    A60,30 0 0 1 210,100
    A40,20 0 0 1 130,100
    A20,10 0 0 1 170,100" />
    </svg>
 
A spiral
Image 5a. A spiral .

Check this example in your browser

Table 1 Paths commands

Table 1 shows us a quick reference for path commands and properties

CommandsParametersDescription
M, mx, yMove to a new point (x,y).
L, lx, y

Draw a line from the current point to a new point (x,y).

H, hxDraw a horizontal line from the current point to a new point (x,current-point-y).
V, vyDraw a vertical line from the current point to a new point (current-point-x,y).
A, arx, ry,
x-axis-rotation,
large-arc-flag,
sweep-flag, x, y
Draw an elliptical arc from the current point to a new point (x,y). The arc belongs to
an ellipse that has radii rx and ry and a rotation with respect to the positive x-axis of
x-axis-rotation (in degrees). If large-arc-flag is 0 (zero), then the small arc (less than
180 degrees) is drawn. A value of 1 results in the large arc (greater than 180 degrees)
being drawn. If sweep-flag is 0, then the arc is drawn in a negative angular direction
(counterclockwise); if it is 1, then the arc is drawn in a positive angular direction
(clockwise).
Q, qx1, y1
x, y
Draw a quadratic Bézier curve from the current point to a new point (x,y) using
(x1,y1) as the control point.
T, tx, yDraw a smooth quadratic Bézier curve segment from the current point to a new
point (x,y). The control point is computed automatically as the reflection of the control
point on the previous command relative to the current point. If there is no previous
command or if the previous command was not a Q, q, T, or t, the control point is
coincident with the current point.
C,cx1, y1
x2, y2
x, y
Draw a cubic Bézier curve from the current point to a new point (x,y) using (x1,y1)
and (x2,y2) as control points.
S,sx2, y2 x, yDraw a smooth cubic Bézier curve segment from the current point to a new point
(x,y). The first control point is computed automatically as the reflection of the control
point on the previous command relative to the current point. If there is no previous
command or if the previous command was not a C, c, S, or s, the first control point is
coincident with the current point. (x2,y2) is the second control point.
Z close path

Example 6: Relative vs. Absolute Path Coordinates

This example uses a combination of theMoveTo (M), Vertical (V), LineTo (L), Bézier (Q), HorizontalTo (H), and ClosePath (Z) commands to produce a shape, as shown on the left of the following image. The example on the right requires less spatial brain power to generate the same shape because it uses relative versions of commands (i.e., lowercase commands). The coordinates of the new point are relative to the position of the previous point (10,120).

Note For the special case where the endpoint coordinates (x,y) are equal to the current point’s coordinates, the arc will not get rendered. Because this behavior is not intuitive when large-arc-flag is set to 1, this might be changed in the SVG 2.0 specification

 
 <svg width="600" height="400" >
  <path stroke="brown" stroke-width="4" fill="white" 
  stroke-linecap="round"
  d="M 20,120
  V 40 l 10,-10  10,10 V 80 l 40,0 l 20,20 V110
  q 20,-20 40,0 20,20 40,0
  l 20,20
  V 140
  H 20
  z" />
<path transform="translate(220,0)"
  stroke="brown" stroke-width="4" fill="white" 
  stroke-linecap="round"
  d="M 20,120
  V 40 L 30,30  40,40 V 80 L 100,80 120,100 V110
  Q 130,100 140,100 T 165,115 200,110
  L 220,130
  V 140
  H 20
  Z" />
</svg>
 
A spiral
Image 6. Relative vs. Absolute Path Coordinates .

Check this example in your browser

Next tutorial

Leave a comment