How To Create Paths In SVG

Creating basic shapes in SVG is described in the previous post “How To Create Basic Shapes in SVG”, which are shorthand forms of the more general <path> element. You can create paths in SVG using the <path> element. It is more general than these shapes, using the path element, you can draw the outline of any arbitrary shape by specifying a series of connected lines, arcs, and curves, which can be filled, stroked, used as a clipping path, or any combination of the three. This outline can be filled and drawn with a stroke, just as done on creating basic shapes.

Table of Contents

<path> element

The <path> element consists of two attributes which are “path data” and “pathLength”. All of the data describing an outline of a shape is in the <path> element’s path data(d) attribute. Every path must begin with a moveto command. The path data consists of one-letter commands, such as M for moveto or L for lineto, followed by an x- and y-coordinate for that particular command separated by commas or white-space. The pathLength attribute used in <path> element includes numbers as its value for the computation of the total length of the path.

Path data commands

A path is defined by including a <path> element which contains path data(d) attribute, where the d attribute contains the moveto, line, curve, arc and closepath commands. Path data can contain newline characters and thus can be broken up into multiple lines to improve readability but they are only allowed at certain places within path data.

moveto commands

The “moveto” commands (M or m) establish a new current point. The effect is as if the “pen” were lifted and moved to a new location. A path data segment must begin with a “moveto” command. Subsequent “moveto” commands represent the start of a new subpath

closepath commands

The “closepath” (Z or z) ends the current subpath and causes an automatic straight line to be drawn from the current point to the initial point of the current subpath. If a “closepath” is followed immediately by a “moveto”, then the “moveto” identifies the start point of the next subpath. If a “closepath” is followed immediately by any other command, then the next subpath starts at the same initial point as the current subpath.

lineto commands

The various “lineto” commands draw straight lines from the current point to a new point. The commands L or l draws a line from the current point to the given (x,y) coordinate which becomes the new current point, where L indicates that absolute coordinates will follow and l indicates that relative coordinates will follow. A number of coordinates pairs may be specified to draw a polyline. At the end of the command, the new current point is set to the final set of coordinates provided.

Another set of commands H or h draws a horizontal line from the current point (cpx, cpy) to (x, cpy), where H indicates that absolute coordinates will follow and h indicates that relative coordinates will follow. Multiple x values can be provided. At the end of the command, the new current point becomes (x, cpy) for the final value of x.

The next set of commands V or v draws a vertical line from the current point (cpx, cpy) to (cpx, y), where V indicates that absolute coordinates will follow and v indicates that relative coordinates will follow. Multiple y values can be provided. At the end of the command, the new current point becomes (cpx, y) for the final value of y.

Example of Drawing Paths Using Moveto, Lineto and Closepath Commands

If you want to use a <path> to draw a triangle, you can draw all three lines, or you can draw the first two lines and then use the closepath command, denoted by a capital Z, to draw a straight line back to the beginning point of the current subpath. The following example shows the way to draw a triangle with closepath, and a path that draws a triangle by opening and closing subpaths.

<svg width="300" height="250" xmlns="http://www.w3.org/2000/svg">
<desc>A path that draws a triangle</desc>  
<rect x="1" y="1" width="250" height="200"fill="none" stroke="blue" />  
<path d="M 50 50 L 200 50 L 125 175 z" fill="lime" 
stroke="red" stroke-width="3"/> 
</svg>

Preview:

Curve Commands

The curve commands consist of three groups of commands to draw curves which are Cubic Bézier commands (C, c, S and s), Quadratic Bézier commands (Q, q, T and t) and Elliptical arc commands (A and a).

The Cubic Bézier commands (C, c, S and s) consists of a cubic Bézier segment, which is defined by a start point, an end point, and two control points. Quadratic Bézier commands (Q, q, T and t) includes a quadratic Bézier segment, which is defined by a start point, an end point, and one control point. And the Elliptical arc commands (A and a) include an elliptical arc segment that draws a segment of an ellipse.

Example of cubic Bézier curve commands

Using the C or c command, you can create a cubic Bézier curve. The command is followed by three sets of coordinates that specify the control point for the start point, the control point for the end point and the end point. As with all the other path commands, an uppercase command implies absolute coordinates and a lowercase implies relative coordinates. The curve in the following example was drawn from (20,80) to (200,120) with control points at (50,20) and (150,60).

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<desc>A path that draws a cubic Bézier curve</desc>  
<rect x="1" y="1" width="250" height="150"fill="none" stroke="blue" />
<path d="M20 80 C 50 20, 150 60, 200 120"
style="stroke: brown; stroke-width:3; fill: none;"/>
</svg>

Preview:

Example of quadratic Bézier curve commands

You create a quadratic curve in a <path> data with the Q or q command. The command is followed by two sets of coordinates that specify a control point and an endpoint. The uppercase command implies absolute coordinates and lowercase implies relative coordinates. The curve in the following example was drawn from (20, 75) to (230, 90) with the control point at (240, 30).

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<desc>A path that draws a quadratic Bézier curve</desc>  
<rect x="1" y="1" width="250" height="150"fill="none" stroke="blue" />
<path d="M20 75 Q 240 30, 230 90" style="stroke: green; stroke-width:3;fill:
none;"/>
</svg>

Preview:

Example of elliptical arc curve commands

Here are the paths used to draw the elliptical arcs in <path> data with A or a command.

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<desc>Paths that draws elliptical arc curves</desc>  
<rect x="1" y="1" width="250" height="150"fill="none" stroke="blue" />
<path d="M 25,25 a75,25 0 0,0 75,25" style="fill:none; stroke:red; stroke-width:6"/>
<path d="M 125,75 a100,50 0 0,1 100,50" style="fill:none; stroke:red; stroke-width:6"/>
</svg>

Preview:

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<desc>Paths that draws elliptical arc curves</desc>  
<rect x="1" y="1" width="250" height="150"fill="none" stroke="blue" />
<path d="M 35,25 a50,50 0 1,0 75,25" style="fill:none; stroke:red; stroke-width:6"/>
<path d="M 125,75 a60,35 0 1,1 70,25" style="fill:none; stroke:red; stroke-width:6"/>
</svg>

Preview: