SVGVectorDesign

SVG Path CommandsMove, Line, Close Path

M means Move, and indicates the point where we will start drawing. Currently, the Move value is set to 50, 50. 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.

M
Code
<svg viewbox="0 0 300 300">
  <path d="M 50,50" />
</svg>
Preview

L means Line, and it draws a line from our current position to the specified position. Currently, the Line value is set to 100, 150. 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.

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

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 150, 50.

M
L1
L2
Code
<svg viewbox="0 0 300 300">
  <path d="M 50,50 L 100,150 150,50" />
</svg>
Preview

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.

M
L1
L2
Code
<svg viewbox="0 0 300 300">
  <path d="M 50,50 L 100,150 150,50 Z" />
</svg>
Preview

- to be continued -


Soon you will see interactive articles and courses on various topics about the web here. Add your email below to be notified.


Related Article: Perfect Nested Rounded Corners