SVG path parser: read the d attribute command by command

What is SVG path data?

An SVG path is one long string in a d attribute: a letter, some numbers, another letter, more numbers. M moves the pen, L draws a line, C draws a cubic curve, A draws a piece of an ellipse, Z closes the shape. Capital letters take absolute coordinates and lowercase ones take offsets from wherever the pen already is. Everything you see drawn as vector art — an icon set, a map, a logo — is that string.

It is designed to be written tersely, and the grammar goes further in that direction than almost anyone realises. Separators between numbers are optional whenever two values cannot run together: a number may start with a dot, so a path can read M.5.5 and mean two coordinates, and a sign starts a new number, so 1-2 is also two. That is why minified SVG is unreadable but still completely valid.

This page parses that string the way the grammar actually defines it, and shows you what came out: each command with its arguments and the point it ends at, a preview drawn by your own browser, the bounding box of the real curve, and the whole path rewritten with every relative command resolved.

How to use it

1. Paste the d attribute. Just the path data, without the surrounding markup. The sample buttons cover a rounded shape, the arc flags, a deliberately terse path and one with a genuine mistake in it.
2. Read the command table. One row per command, with its arguments and the coordinate it leaves the pen at. A row whose letter is in brackets did not have a letter of its own — it is a repetition of the one above.
3. Check the box and the absolute form. The bounding box comes from the curve rather than from its control points, so it is the box the shape actually occupies. Underneath it, the same path with every relative command resolved, ready to copy.

The arc flags are the strangest corner of the format

An elliptical arc takes seven values: two radii, a rotation, two flags, and the point to finish at. The flags choose which of the four possible arcs between two points you meant — the big one or the small one, clockwise or anticlockwise. And in the grammar they are not numbers. They are the literal characters 0 and 1, the only place in the whole path syntax where a value is a character rather than a number.

That has a consequence nobody expects. Because a flag is exactly one character wide, it cannot run into whatever follows it, so the separators around the two flags are optional. Writing an arc as a5 5 0 0110 10 is completely legal: radii 5 and 5, no rotation, then flag 0, flag 1, and the endpoint 10 10. It looks like a typo. A parser that splits the arguments on whitespace and reads seven numbers sees 0110 and produces something wildly wrong. Of three published parsers checked while this page was built, two handle it correctly and the third rejects it as malformed.

The rule cuts the other way too. Because a flag is a character and not a number, 0.0 and +0 are not flags — both are perfectly good numbers, and both are accepted anywhere else in the same path, including as the arc's own rotation. Write one where a flag belongs and the path is malformed. The same three parsers split on this as well: two reject it, and the one that rejected the legal spelling accepts this illegal one and quietly turns it into flag 0.

There is one separator in an arc that is required, and it is the one after the rotation. That asymmetry has a reason: the rotation is a number, and a number is greedy. Without a space it would swallow the flag digits into itself, which is exactly what happens if you try — a5 5 00110 10 reads the rotation as one hundred and ten and then runs out of arguments.

What the bounding box is really made of

The obvious way to box a curve is to take the extremes of its control points, and it is wrong. A cubic curve does not pass through its two middle control points at all: it is pulled towards them and falls short. Box a path that way and you get something too large, sometimes considerably.

The box here comes from the curve. A cubic's steepest and shallowest points are where its derivative is zero, and that derivative is a quadratic with at most two roots per axis; a quadratic curve's derivative is linear and has one. An arc turns where the parametric ellipse turns, which is a pair of angles that has to be checked against the piece of the ellipse actually being drawn. Every one of those is computed in closed form and then checked, in the test suite, against walking the same curve in two thousand steps and taking the minimum and maximum. Closed form against brute force is a real check: agreeing with a second copy of the same algebra would prove nothing.

One detail that reads as a bug when you first meet it: a move command lifts the pen, so where it started is not part of the shape. Including that point puts the origin inside the box of every path that begins somewhere else — which is a mistake this page made until the sampling check caught it.

What this tool does not do

It does not edit the path. There are no draggable handles and no simplification, because the point here is to read what a path says rather than to author a new one. The absolute conversion is the one rewrite it offers, and it is deliberately lossless: no rounding beyond six decimal places, no merging of commands, no reordering.

It does not apply transforms, strokes or markers. A transform attribute on the element, or on any ancestor, moves the whole thing; a stroke widens it by half the stroke width in every direction, and more at a sharp corner. The box shown here is the geometry of the path itself, which is what a viewBox usually wants and is not what the rendered ink occupies.

It also stops at the first thing it cannot parse. That is a choice rather than a limitation of the format — the specification says a renderer should draw the path up to the error and no further, so a broken path is not blank, it is truncated. Seeing where the parse stopped is usually enough to find the mistake, and the character position is given.

Why is it free?

Parsing a string and solving a quadratic are things your browser does in microseconds. There is no server in the path, so there is nothing to meter and no account to create.

Nothing is uploaded. The path you paste stays in this tab, and the preview is drawn by your own browser from the same string.