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></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:

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.

  
    ""
  

‍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.

‍

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.

‍

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.

‍

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’.

‍

The final list of all the SVG Line Commands: