NaN

Cursors

At the heart of all SVG paths is the cursor. All path commands use the cursor to determine where to start drawing from, and all path commands move the cursor to ensure the following command starts from the correct position.

05101520250510152025

Consider this little corner, defined with the following commands:

  1. M5.05.0
  2. v5.0
  3. L10.015.0
  4. h5.0
0510152005101520

Initially, the cursor is at the top left corner, the origin point (0, 0). Then, the three commands change the cursor as follows:

  • M 5 5 moves the cursor to (5, 5);
  • v 5 draws a vertical line of length 5, moving the cursor to (5, 10);
  • L 10 15 draws a line to (10, 15), moving the cursor to (10, 15);
  • h 5 draws a horizontal line of length 5, moving the cursor to (15, 15).

Generally speaking, the cursor will end up wherever the current path "section" finishes - after all, you want your path sections to be connected to one another most of the time.

Where the current path section ends depends on whether the command is absolute or relative (which, if you recall, depends on whether the command code is uppercase or lowercase).

For absolute commands, the cursor will end up at the command's x and y values. For example, L 10 15 will move the cursor to (10, 15) regardless of where the cursor is currently at.

  1. M5.05.0
  2. L10.015.0
0510152005101520(5.0, 5.0)(10.0, 15.0)

For relative commands, the cursor will end up at the cursor's current position plus the command's dx and dy values. For example, if the cursor is currently at (15, 5), then l 10 15 will move the cursor to (25, 20).

  1. M15.05.0
  2. l10.015.0
051015202530051015202530(5.0, 5.0)(10.0, 15.0)15.015.010.010.0(15.0, 5.0)(25.0, 20.0)

Remember: commands written with an uppercase letter are absolute commands, while commands written with a lowercase letter are relative commands.

Move Command

There is a special command that only moves the cursor without drawing anything. This command is called the move command and is denoted with the M (or m) code:

M <x> <y>
m <dx> <dy>

These are useful when you want to draw paths that aren't connected to one another:

  1. M3.05.5
  2. q2.02.00.04.0
  3. m3.0-6.0
  4. q4.04.00.08.0
  5. m3.0-10.0
  6. q4.06.00.012.0
051015051015

Practice

Using the M and/or m commands, move the cursor to the points shown on the canvas.

0510152005101520