path - Path Element

The <path> element is powerful and you can use it to create all the basic svg shapes and more.

Paths create complex shapes by using straight or curved lines. A solid understanding of paths is neccessary to draw anything useful using SVG. While it is not useful, and for sure not easy to create complex paths using a text editor, understaning how they work will allow you to fix common display issues in SVGs.

The shape of a path element is defined by the d attribute. The d attribute contains a series of commands and parameters used by those commands. For example the M or moveto command looks like the following

<path d="M10 10" />

The moveto does not draw anything it simply moves the starting point. In the case above 10px from the left and top.

The commands are instantiated by its letter followed by parameters describing the x and y coordinates to be used by the command.

  • M = move to
  • L = line to
  • H = horizontal line to
  • V = vertical line to
  • C = curve to
  • S = smooth curve to
  • Q = quadratic Bézier curve
  • T = smooth quadratic Bézier to
  • A = elliptical Arc
  • Z = close path

Note: The first command specified should always be a moveto command.

Note: All commands can also be expressed using lower-case letters. Upper-case letters means absolute positioning and lower-case means relative postioning.

Move Commands

Move (M or m)

This command moves the virtual pen to the position specified in preparation for drawing. Following draweing commandswill start from this point. Use upper-case M to move to an absolute position and a lower-case m to move to a position relative to the current postion.

M x y
m dx dy

Line Commands

There are three commands that draw lines. The most generic one is, L, the line to command. L takes two parameters, x and y coordinates — and draws a line from the current position to the next.

Lines (L or l)

L x y
l dx dy

Horizontal and Vertical Lines (H, h and V , v)

There are two abbreviated forms for drawing horizontal and vertical lines. H draws a horizontal line, and V draws a vertical line. Both commands only take a single argument since they only move in one direction.

H x 
h dx

and

V y 
v y

We now know enough command to draw something simple. An easy one would be to draw a simple rectangle. The rectangle is made up of horizontal and vertical lines only.

Note: This could be done easier using the `<rect> element.

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">

  <path d="M10 10 H 90 V 90 H 10 L 10 10" fill="#529587"/>

</svg>

Edit in JSFiddle

Like with all other shapes the default stroke and fill color is black.

Finally, we can shorten the above path declaration a little bit by using the "Close Path" command, Z. This command draws a straight line from the current position back to the first point that started the path. It is often placed at the end of a path node, although it's not necessary to close a path all the time. Apparently there is no difference between the uppercase and lowercase command.

Z

So, the rectangle example from above could be shortened to:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="#529587"/>
</svg>

Edit in JSFiddle

For the fun of it we will make the fill tranparent in this example.

You also could use the relative positioning. As mention relative commands use lower-case letters and move the cursor relative to its last position. Have a look at the example below.

<path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="#529587"/>

The path will move to point (10,10) and then move horizontally 80 points to the right, then 80 points down, then 80 points to the left, and then back to the start.

Curve Commands

There a three commands that you can use to create curvers. Two of those are known as Bézier curvers and the third is an arc or a part of a circle. You can read up about Bézier curves on this Wikipedia entry as it would be far to much to cover here.

Bézier Curves

The cubic Bézier takes in two control points for each point. So, to create a cubic Bézier you need to specify three sets of coordinates.

C x1 y1, x2 y2, x y

or if you use relative positioning

c dx1 dy1, dx2 dy2, dx dy

The last set of coordinates here (x,y) are where you want the line to end. The other two are control points. (x1,y1) is the control point for the start of your curve, and (x2,y2) for the end point of your curve. If you are familiar with algebra or calculus, the control points essentially describe the slope of your line starting at each point. The Bezier function then creates a smooth curve that transfers you from the slope you established at the beginning of your line, to the slope at the other end.

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">

  <path d="M10 110 C 20 140, 40 140, 50 110" stroke="#529587" fill="transparent"/>
  <path d="M70 110 C 70 140, 110 140, 110 110" stroke="#529587" fill="transparent"/>
  <path d="M130 110 C 120 140, 180 140, 170 110" stroke="#529587" fill="transparent"/>

</svg>

The example creates three cubic Bézier curves.

Edit in JSFiddle

You can combine several Bézier curves to create extended, smooth shapes.

S x2 y2, x y

or

s dx2 dy2, dx dy

S produces the same type of curve as in the earlier example but it follows another S or C command. The cirst point is assumed to be a reflection of the one used previously. If the S command doesn't follow another S or C command, then it is assumed that both control points for the curve are the same.

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="#529587" fill="transparent"/>
</svg>

Edit in JSFiddle

The other type of Bézier curve that is available is a quadratic Bézier, Q. It is a simpler than the cubic one and only requires a single control point. This control point determines the slope of the curve at both the start point and the end point. It takes two arguments: the control point and the end point of the curve.

Q x1 y1, x y

or

q dx1 dy1, dx dy

Here is an example:

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 80 Q 95 10 180 80" stroke="#529587" fill="transparent"/>
</svg>

Edit in JSFiddle

As with the cubic Bézier curve, there is a short version for combining multiple quadratic Béziers, T.

T x y

or

t dx dy

As before, the shortcut looks at the previous control point you used and infers a new one from it. This means that after your first control point, you can make fairly complex shapes by specifying only end points. Note that this only works if the previous command was a Q or a T command. If it is not, then the control point is assumed to be the same as the previous point, and you'll only draw lines.

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="#529587" fill="transparent"/>
</svg>

Edit in JSFiddle

Arcs

Another type of curved line is an arc, A. Arcs are sections of circles or ellipses.

For a given x-radius and y-radius, there are two ellipses that can connect any two points (as long as they're within the radius of the circle). Along either of those circles there are two possible paths that you can take to connect the points, so in any situation there are four possible arcs available. Because of that, arcs have to take in quite a few arguments:

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

or

a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

At its start the arc element takes in two arguments for the x-radius and y-radius. If you need to, look up ellipses to see how they behave. The third parameter describes the rotation of the arc. This is best explained with an example:

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 315
           L 110 215
           A 30 50 0 0 1 162.55 162.45
           L 172.55 152.45
           A 30 50 -45 0 1 215.1 109.9
           L 315 10" stroke="#BBBBBB" fill="#529587" stroke-width="2" fill-opacity="0.5"/>
</svg>

Edit in JSFiddle

The example shows a path element that goes diagonally across the page. At its center, two elliptical arcs have been cut out (x radius = 30, y radius = 50). In the first one, the x-axis-rotation has been left at 0, so the ellipse that the arc travels around (shown in gray) is oriented straight up and down. For the second arc, though, the x-axis-rotation is set to -45 degrees. This rotates the ellipse so that it is aligned with its minor axis along the path direction, as shown by the second ellipse in the example image.