The Path Element – Web Scripting

The <path> element can be used to create lines, polylines, polygons, arcs, circles, ellipses, and other more complex shapes.

The shape of a path is defined by the d attribute and includes a sequence of commands and parameters for those commands.

Line Commands

There are 5 line commands: M, L, H, V, and Z.

M x y – Move to position (x,y). Each path begins with a M command.
L x y – Draw line from current position to (x,y).
H x – Draw a horizontal line from the current position to (x.y) where y is the y-coordinate of the current position.
V y – Draw a vertical line from the current position to (x.y) where x is the x-coordinate of the current position.
Z – Draw a line from the current position to the first point on the path.

Example

The example above was created using the following SVG code.

<path d="M 20 20 H 120 V 120 H 20 Z" stroke-width="4" stroke="blue" />
<path d="M 20 20 L 120 120" stroke-width="4" stroke="blue" />

The first path produces a rectangle as described by the following commands:

M 20 20 – from (20,20)
H 120 – to the point horizontally to the right of the first point at (120,20)
V 120 – to the point vertically below the second point at (120,120)
H 20 – to the point horizontally to the left of the first point at (20,120).
Z – to the starting point at (20,20)

The second path creates a diagonal line using the following commands:

M 20 20 – from (20,20)
L 120 120 – to the point (120,120).

A closed path is filled black by default. We can change this using the fill attribute. We can also use CSS to stylize the graphic. In the example above, we use CSS to modify the graphic’s fill attributes when the cursor hovers over the graphic. Give it a try. The CSS code is shown below.

path:hover {
    fill:transparent;
}

Relative Line Commands

The line commands that draw lines have relative forms and are denoted by lowercase letters. The arguments to the relative forms specify the distance (in pixels) between the current point and the new point.

l dx dy – Draw line from current position to (x + dx,y + dy).
h dx – Draw a horizontal line from the current position to (x + dx,y) where y is the y-coordinate of the current position.
v dy – Draw a vertical line from the current position to (x,y + dy) where x is the x-coordinate of the current position.

Example

The above graphic is the same as the first graphic but was created using relative line commands as shown below.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" 
 width="160" height="160" >
 
    <path d="M 20 20 h 100 v 100 h -100 Z" stroke-width="4" stroke="blue" />
    <path d="M 20 20 l 100 100" stroke-width="4" stroke="blue" />
</svg>

The first path produces a rectangle as described by the following commands:

M 20 20 – from (20,20)
h 100 – to the point horizontally to the right of the first point at (20+100,20)
v 100 – to the point vertically below the second point at (120,20+100)
h -100 – to the point horizontally to the left of the first point at (120-100,120).
Z – to the starting point at (20,20)

The second path creates a diagonal line using the following commands:

M 20 20 – from (20,20)
l 100 100 – to the point (20+100,20+100).

Curve Commands

There are 4 different curve commands: C, Q, and A. There are also shortcut commands for C and Q and relative commands for each of these.

C x1 y1, x2 y2, x y – draw a Cubic Bezier curve from the last point to (x,y) using (x1,y1) and (x2,y2) as control points.
Q x1 y1 x y – draw a quadratic curve from the last point to (x,y) using (x1,y1) as the control point.
A rx ry x-axis-rotation large-arc-flag sweep-flag x y – draw an arc from the last point to (x,y) using radii rx and ry to form the ellipse.

Please refer to the Mozilla Path tutorial for descriptions on the parameters for these commands.

You might find the SVG Path Builder tool useful for visualizing SVG curves and for producing the values for the C, Q, and A commands.

Below is the complete SVG code for each of the graphics shown above.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" 
 width="325" height="175" viewBox="25 25 325 175">

    <rect x="0" y="0" width="100%" height="100%" fill="red" />
    <path d="M 50 100 l 100 50" stroke="black" stroke-width="4" />
    <circle r="5" cx="150" cy="150" fill="white" />
    <path d="M 300 100 l -100 -50" stroke="black" stroke-width="4" />
    <circle r="5" cx="200" cy="50" fill="white" />
    <path d="M 50 100 C 150 150 200 50 300 100" stroke="blue" stroke-width="4" fill="transparent" />
    <circle r="5" cx="300" cy="100" fill="white" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" 
 width="325" height="175" viewBox="25 25 325 175">

    <rect x="0" y="0" width="100%" height="100%" fill="red" />
    <path d="M 50 150 L 175 50" stroke="black" stroke-width="4" />
    <path d="M 300 150 L 175 50" stroke="black" stroke-width="4" />
    <circle r="5" cx="175" cy="50" fill="white" />
    <path d="M 50 150 Q 175 50 300 150" stroke="blue" stroke-width="4" fill="transparent" />
    <circle r="5" cx="300" cy="150" fill="white" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" 
 width="175" height="175" viewBox="25 25 175 175">

    <rect x="0" y="0" width="100%" height="100%" fill="red" />
    <path d="M 50 100 A 50 50 0 1 1 100 150" stroke="blue" stroke-width="4" fill="transparent" />
    <circle r="5" cx="100" cy="150" fill="white" />
</svg>

Shortcut Commands for C and Q

S x2 y2, x y
T x t

Relative Commands for C,Q,S, and T

c dx1 dy1 dx2 dy2 dx dy
s dx2 dy2, dx dy
q dx1 dy1 x y
t dx dy