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

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

**Vertical command**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>
```

**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 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 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 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>
```

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 z | Draw 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.

##### Related Posts

5th October 2019

### Sonic Design – Backlash and how is it related to UX?

Sonic's design in the movie trailer…

24th February 2019

### Material Design vs Flat Design – Which one to use?

Material and Flat. Both Design Styles.…