SVG Path Commands

Every shape in an SVG, from a small icon to a whole logo, can be drawn with one element: path. Its d attribute is a short list of instructions for a pen: move here, draw a line to there, curve over to that point. Each instruction is a letter followed by numbers. Once you can read those letters, path data stops looking like noise.

First, where is "here"? A point is two numbers: x, how far it is from the left, and y, how far it is from the top. Unlike the graphs from math class, y grows downward. The first command, M for Move, puts the pen at a point without drawing anything. Drag the pen and watch the numbers.

<path d="M 100,200" />

Now let's draw. L for Line draws a straight line from where the pen is to a new point. H for Horizontal and V for Vertical are shortcuts: they take only one number, because the other one stays the same. Z closes the shape with a straight line back to where it started.

Two more rules make paths shorter. When a command repeats, you can leave out its letter and just keep writing numbers. After M, extra numbers count as L lines. And a new M lifts the pen and starts a new piece in the same path. Step through the house below, and try to guess where the pen goes before each step.

<path d="M 70,240 V 140 H 230 V 240 Z M 70,140 L 150,70 230,140" />

Every command also has a lowercase version. A capital letter means a position on the grid: "go to x = 230". A lowercase letter means a step from where the pen is now: "go 160 to the right". Negative numbers step left or up. The house below looks the same both ways, until you move it.

<path d="M 70,240 V 140 H 230 V 240 Z M 70,140 L 150,70 230,140" />

That is why lowercase letters are handy for shapes you want to move around: only the first point says where the shape is, and every other point is a step from the one before it.

Straight lines only get you so far. C for Curve takes three points: two handles and an end point. The curve does not pass through the handles. It leaves the start heading toward the first handle and arrives at the end from the direction of the second one, as if the handles were pulling on it. The farther away a handle is, the longer the curve follows it.

<path d="M 50,230 C 80,60 240,60 250,230" />

A few more commands are built on the same idea. S continues a C curve smoothly, Q is a simpler curve with only one handle, T continues a Q curve, and A draws an arc, a piece of an ellipse. They all have lowercase versions too. To see C curves at work, the SVG Sticky Shapes article uses them to build a gooey effect.

Now it is your turn. Pick a shape, or write your own commands and watch them being drawn.

So a path is just a pen and a list of moves. M puts the pen down; L, H and V draw straight lines; C draws curves; and Z closes the shape. Capital letters go to positions on the grid, lowercase letters take steps from the pen. The next time you open an SVG icon and see a long d attribute, read it the same way, one letter at a time.

@aykutkardas

—

0/50 claps