SVG Path CommandsMove, Horizontal, Vertical, Line, Close

M means Move, and indicates the point where we will start drawing. Currently, the Move value is set to 150, 150. The first number indicates the x-axis, and the second number indicates the y-axis. You can play around with the values to see the changes.

<svg viewbox="0 0 300 300">
  <path d="M 150,150" />
</svg>

H means Horizontal and it draws a horizontal line to the x-coordinate given as 200. In the following example, observe the changes by moving the points around.

<svg viewbox="0 0 300 300">
  <path d="M 100,150 H 200" />
</svg>

V means Vertical and it draws a vertical line to the y-coordinate given as 200. In the following example, observe the changes by moving the points around.

<svg viewbox="0 0 300 300">
  <path d="M 150,100 V 200" />
</svg>

L means Line, and it draws a line from our current position to the specified position. Currently, the Line value is set to 150, 200. Also, our new pointer will be at the end of the line. The first number indicates the x-axis, and the second number indicates the y-axis. You can play around with the values to see the changes.

<svg viewbox="0 0 300 300">
  <path d="M 100,100 L 150,200" />
</svg>

Since our last command was L, we can continue drawing lines by entering the new coordinates without entering the command again. The next point that our line will go to will be 200, 100.

<svg viewbox="0 0 300 300">
  <path d="M 100,100 L 150,200 200,100" />
</svg>

Z is a command that we use to draw a line back to the starting point of the path that we have drawn. It can be called Close Path.

<svg viewbox="0 0 300 300">
  <path d="M 100,100 L 150,200 200,100 Z" />
</svg>

@aykutkardas