We’ll discuss on the SVG Path Commands – Lines in this article and how to draw shapes using them.

SVG is the most popular and widely supported method of displaying vector graphics in browsers. SVG is basically an XML language. SVG uses lines or paths and shapes to draw images. Since SVG is basically an XML language it is widely supported by all browsers including Chrome, Firefox, Opera, Safari and more.

SVG Path Commands - Lines:

The <path> element in an SVG is one of the most important aspects of SVG. The path tag takes in one attribute which is called as ‘d’. This is how a typical SVG which you come across may look like:

  <path d="M213.1,6.7c-32.4-14.4-73.7,0-88.1,30.6C110.6,4.9,67.5-9.5,36.9,6.7C2.8,22.9-13.4,62.4,13.5,110.9
  C33.3,145.1,67.5,170.3,125,217c59.3-46.7,93.5-71.9,111.5-106.1C263.4,64.2,247.2,22.9,213.1,6.7z"/>

Like you see in the above example, the ‘d’ attribute takes in a series of commands and parameters. The commands can be basically divided into line and curves. There are 5 line commands. They are:

• Move to (M or m)
• Line to (L or l)
• Horizontal (H or h)
• Vertical (V or v)
• Close Path (Z or z)

The Move Command is the starting point of any line and it takes in two values which are the x and y coordinates.

Each command has both Uppercase and lowercase representations. If M is used in Uppercase, then it means that the values passed specify the actual coordinates whereas if it’s used in lowercase, then it means that the values are relative coordinates.

For Example:
M (50,50) – Move to the coordinates 50,50 = M (x,y)
m (50,50) – Move 50 down and 50 to the left from the current point = M(dx,dy)

The Horizontal command is used to draw a line horizontally to the right or the left. Similarly, the Vertical command draws a line vertically above or below. Both these commands take in one value. The lowercase ‘h’ and ‘v’ takes in values x and y respectively. These would draw a line ‘x’ to the right or left and ‘y’ to the above or below respectively. We would see the explanation of the uppercase ‘H’ and ‘V’ later down.

Now that we know the basics of the relative move, horizontal & vertical, let’s see how to draw a square using these 3 commands.

Example 1:  Drawing a Square using M, h & v

This is the final code to draw a square using the M, h & v commands.

  <svg viewBox="0 0 6 6"> <path d=" M 2,2 
                                     h 2
                                     v 2
                                     h -2
                                     v -2
                                   "/>
 </svg>
Artboard Created with Sketch. EXAMPLE 1 Using M, h & v <svg viewBox="0 0 6 6"> <path d=" M 2,2 " /> <svg viewBox="0 0 6 6"> <path d=" M 2,2 h 2 " /> <svg viewBox="0 0 6 6"> <path d=" M 2,2 h 2 v 2 " /> <svg viewBox="0 0 6 6"> <path d=" M 2,2 h 2 v 2 h -2 " /> <svg viewBox="0 0 6 6"> <path d=" M 2,2 h 2 v 2 h -2 v -2 " /> Step 1: Keep the initial point at (2,2) Step 2: Then we use the ‘h’ command to tell the pen to draw a line, 2 to the right. Step 3: Now we use the ‘v’ command to draw a line 2 below from the current point. Step 4: Now using the ‘h’ command with a negative value to tell it to a draw line to the left Step 5: We close it by using the ‘v’ command again with a negative value to tell it to move upwards.

Note:
• Any positive value given to the relative command ‘h’ or ‘v’ will always tell it to move ‘right’ or ‘below’ respectively. If you need to go in the opposite direction use negative values with the same commands.

Example 2: Drawing a Square using M, h, v & z

Now we construct the same square with a slight change. We’ll now use the ‘z’ command in the end. What it does is that, it simply closes the path from the current point to the last used ‘M’ or ‘m’ command. Both ‘Z’ and ‘z’ does the same thing.

This is the final code to draw a square using the M, h, v & z commands.

  <svg viewBox="0 0 6 6"> <path d=" M 2,2 
                                     h 2
                                     v 2
                                     h -2
                                     z 
                                   "/>
 </svg>
Example 2 Created with Sketch. EXAMPLE 2 Using M, h, v & z <svg viewBox="0 0 6 6"> <path d=" M 2,2 h 2 v 2 h -2 " /> <svg viewBox="0 0 6 6"> <path d=" M 2,2 h 2 v 2 h -2 z " /> Step 1: We have drawn a near complete square using the M, h & v commands. Step 2: We close it by using the ‘z’ command. It will connect the current point to the last ‘Move’ point

Example 3: Drawing a Square using M, l & z

Another way to do the same thing without using horizontal or vertical commands is to use the ‘L’ Line command. We will replace all ‘h’ and ‘v’ commands with ‘l’ and see how it works.

‘L’ or ‘l’ simply means ‘Draw a line to a certain point from the current point’.

L(x,y) will draw a line to the coordinates (x,y) from the current point. l(x,y) will draw a line to a point which ‘x’ to the horizontal and ‘y’ to the vertical. Since you already know about the ‘h’ and ‘v’ commands, you can also interpret this as l(h,v).

This is the final code to draw a square using the M, l & z commands.

  <svg viewBox="0 0 6 6"> <path d=" M 2,2 
                                    l 2,0
                                    l 0,2
                                    l -2,0
                                    z 
                                   "/>
 </svg>
Example 3 Created with Sketch. EXAMPLE 3 Using M, l & z <svg viewBox="0 0 6 6"> <path d=" M 2,2 " /> <svg viewBox="0 0 6 6"> <path d=" M 2,2 l 2,0 " /> <svg viewBox="0 0 6 6"> <path d=" M 2,2 l 2,0 l 0,2 " /> <svg viewBox="0 0 6 6"> <path d=" M 2,2 l 2,0 l 0,2 l -2,0 " /> <svg viewBox="0 0 6 6"> <path d=" M 2,2 l 2,0 l 0,2 l -2,0 z " /> Step 1: Keep the initial point at (2,2) Step 2: We draw a line from this point to 2 right and 0 below. [Remember => l(h,v)] Step 3: Now, from the 2nd point we draw a line to 2 below. Step 4: And now from there, we draw a line to 2 left. Step 5: And then we close the path.

Example 4: Drawing a Square using M, L & z

Now, we replace the ‘l’ commands with the ‘L’ and see how it works.

As explained before, L(x,y) will draw a straight line from the current point to the coordinates passed to it. Simple enough, right?

This is the final code to draw a square using the M, L & z commands.

  <svg viewBox="0 0 6 6"> <path d=" M 2,2 
                                    L 4,2
                                    L 4,4
                                    L 2,4
                                    z 
                                   "/>
 </svg>
Example 4 Created with Sketch. EXAMPLE 4 Using M, L & z <svg viewBox="0 0 6 6"> <path d=" M 2,2 " /> <svg viewBox="0 0 6 6"> <path d=" M 2,2 L 4,2 " /> <svg viewBox="0 0 6 6"> <path d=" M 2,2 L 4,2 L 4,4 " /> <svg viewBox="0 0 6 6"> <path d=" M 2,2 L 4,2 L 4,4 L 2,4 " /> <svg viewBox="0 0 6 6"> <path d=" M 2,2 L 4,2 L 4,4 L 2,4 z " /> Step 1: Keep the initial point at (2,2) Step 2: We draw a line from this point to (4,2) Step 3: From the last point, we draw a line to (4,4) Step 4: From the point from step 3, we draw a line to (2,4) Step 5: And then we close the path.

Example 5: Drawing a Square using M, H, V & z

Now, for the final ending one.

We will replace all the ‘L’ commands with ‘H’ and ‘V’. So the syntax is basically just, H(x) and V(y). ‘H’ will draw a horizontal line to the exact coordinate ‘x’ and ‘V’ will draw a vertical line to the exact coordinate ‘y’.

  <svg viewBox="0 0 6 6"> <path d=" M 2,2 
                                    H 4
                                    V 4
                                    H 2
                                    z 
                                   "/>
 </svg>
Example 5 Created with Sketch. EXAMPLE 5 Using M, H, V & z <svg viewBox="0 0 6 6"> <path d=" M 2,2 " /> <svg viewBox="0 0 6 6"> <path d=" M 2,2 H 4 " /> <svg viewBox="0 0 6 6"> <path d=" M 2,2 H 4 V 4 " /> <svg viewBox="0 0 6 6"> <path d=" M 2,2 H 4 V 4 H 2 " /> <svg viewBox="0 0 6 6"> <path d=" M 2,2 H 4 V 4 H 2 z " /> Step 1: Keep the initial point at (2,2) Step 2: We draw a horizontal line from this point to the x coordinate 4 Step 3: We draw a vertical line from the last point to the y coordinate 4 Step 4: We draw a horizontal line from the point from step 3 to the x coordinate 2 Step 5: And then we close the path.

The final list of all the SVG Line Commands:

M (x,y)Move to the absolute coordinates x,y
m (x,y)Move to the right x and down y (or left and up if negative values)
L (x,y)Draw a straight line to the absolute coordinates x,y
l (x,y)Draw a straight line to a point that is relatively right x and down y (or left and up if negative values)
H (x)Draw a line horizontally to the exact coordinate x
h (x)Draw a line horizontally relatively to the right x (or to the left if a negative value)
V (y)Draw a line vertically to the exact coordinate y
v (y)Draw a line vertically relatively down y (or up if a negative value)
Z or zDraw a straight line back to the start of the path

What are different line commands in SVG?

M, L, H, V and Z are the different line commands available for the path element in SVG. All these commands also have lowercase variations.