Objective: Learn to use the path element and it's many drawing value options

The <path /> element is the most complex drawing element in SVG. It is also very versatile and the element that is necessary in drawing freehand shapes  and shapes that require combinations of straight lines and curves.

Because <path /> is so big it is broken across a number of tutorials.

All of the SVG attributes you have learned up until now apply to path. The big new attribute is d=" ". the d attribute is the container for drawing commands.

The path element

<path d=""></path>

<path> ... </path> The full rectangle element with open and closing tags.

<path /> Because this does not contain any content it can also be  used as a self-closing element.

Path construction attributes

d="M50,50 L50,100" The path drawing attribute d contains a number of drawing commands and uses a controlling set of letters to achieve this. Different drawing commands have different combinations of X,Y coordinates and in some cases other controlling values.

Remember the default units are pixels.

All other styling and transform attributes can be used with <path>.

In SVG the term "virtual pen" is used to describe drawing a path. This virtual pen is moved by the instructions and coordinates we give to draw lines and shapes that are filled or not. In this tutorial we just use the term pen.

The drawing commands you will need to be familiar with are:

M  m Move to

L  l  Line to

H h Horizontal line to

V v Vertical line to

A a Elliptical Arc to

C c Curve to

Q q Quadratic Bezier curves

T t Quadratic Bezier curve using

C c Cubic Bezier curves

Z z Close a path shortcut

Don't panic. We will learn how to use them one at a time.

Absolute and Relative Coordinates

A new concept that is introduced with <path> is ABSOLUTE and RELATIVE coordinates.

If a drawing command is in uppercase it means the coordinates are ABSOLUTE positioned with respect to the viewBox 0, 0 reference.

If a drawing command is in lowercase it means the coordinates are RELATIVE to the current position of the pen.

Different combinations of Coordinates

Each of these drawing commands use different combinations of coordinates to draw the required line. These can be relatively complex and long path statements can be difficult to read and inteprete.

The maximum value in hand-crafted paths is for graphs and illustrations for maths and science as these become huge when created with applications such as Inkscape or Adobe Illustrator. Creating graphs and charts will be explained in following tutorials.

Simple examples of the various <path /> drawing options

Here is an illustration of Rohit (with one shoe missing) created with <path /> drawings. It demonstrates the power, and detail work that can be achieved with hand-crafted <path />. 

The original drawing was created with Inkscape by tracing hand drawings. Then the paths were optimized and most importantly had decimal point values removed. This reduced the original file size from 60KB (created by Inkscape) to just 8KB for final use. You will learn how to do this in the <path /> tutorials.