That’s a huge pain to read, but turns out it’s not that complicated. Each letter is an instruction, and each number following a letter are parameters for that instruction.

You have some notion of the current location that your “pen” is at, and by giving instructions you can move to a new point and draw lines and curves as you move. (The metaphor is similar to the Turtle, if you’re familiar with that, but you have no orientation.) That’s basically it!

There are example images in the rest of the article, and you can click on the jsfiddle links in their captions to get to the SVG path code that drew them.

Language rules

The format is always an instruction (a letter) followed by arguments (mostly numbers). e.g. “M 100 100 L 150 150”

Commas and spaces can be dropped unless absolutely necessary to distinguish individual commands (e.g. “M100 100L150 150”). This makes things confusing but it’s helpful to know about when reading paths you didn’t create.

If you use the same instruction a few times in a row, you can drop the instruction letter above. (e.g. “l 100 100 -200 100” instead of “l 100 100 l -200 100”) Again, this makes things confusing, but you’ll often see this in the wild.

Moving without drawing (“M x1 y1”)

You need this most commonly when starting to draw something that doesn’t start at the top left of the canvas. Alternatively you can use this in the middle of a path if you are drawing disconnected lines.

Moving and drawing straight lines (“L x1 y1”, “H y” and “V x”)

L is for line, H is for horizontal, V is for vertical. L takes two parameters describing the location to move and draw to. H and V take only one.

Here’s a silly example with lines using all three:

Moving and drawing curves

For more complex stuff, you can draw elliptical arcs (segments of a circle / ellipse) or Bézier Curves. The parameters for these are more complex so I won’t delve into them here but you’re better off just looking at the SVG spec.

Cubic: C and S

Quadratic: Q and T

Elliptical arc: A

Returning home: ClosePath (“Z”)

Just draws a straight line from the current point to the starting point of the current subpath being drawn, “closing” the shape. For the sake of this definition, a new subpath is considered started whenever the “M” instruction is run. So you could draw a triangle by drawing two lines, and then using Z to complete the shape, like so:

Relative vs Absolute

If the instruction letter is written in a upper case, it interprets its parameters in “absolute” mode, meaning that all the location specifications are assumed to be relative to (0,0). On the other hand if it is in lower case, it’s in “relative” mode, meaning the distance values are relative to the last location the pen was at. This means that you don’t have to always keep track of the current coordinates, you can just say “80 more than where I was”.

Relative commands are interesting because they provide a sort of abstraction layer — almost like a function in other programming languages. With relative commands, you can draw a small thing as part of the current path, regardless of where you currently are:

So what’s the point of all this?

You might have noticed that this is very very low level stuff. No one would really want to do this by hand. Usually you’d use some software like Adobe Illustrator or Inkscape to be able to graphically draw images, which then spits out a file containing pages and pages of these paths, like so:

Or perhaps you’re already using paths without even knowing it, if you’re using a library like D3 or similar to draw SVG charts with complex shapes. Either way, knowing this stuff comes in handy if you ever need to debug those images or if you want to generate some of your own.

That should be most of what you need to dive in and get your hands dirty with paths. Don’t forget to check out the actual SVG path reference for specifics!