Every SVG path is built from a string of single-letter commands and numbers — M to move the pen, L to draw a line, C for a cubic Bézier curve, A for an arc, Z to close the shape. The string is compact and powerful but notoriously hard to read once it gets longer than a handful of commands. This tool parses the string, renders the path, and lists every command in order with a hover highlight so you can trace exactly which chunk of the text corresponds to which piece of the drawing.
Paste a path into the text area. The preview re-renders instantly, and the table below shows every parsed command with its name and numeric arguments. Hover any row to highlight that segment (and every segment up to it) in accent colour on the canvas.
The SVG path grammar in one minute
A path d attribute is a sequence of commands. Each command is a single letter followed by a fixed number of arguments:
- M / m — move the pen without drawing (2 args: x, y)
- L / l — draw a straight line to a new point (2 args: x, y)
- H / h — horizontal line only (1 arg: x)
- V / v — vertical line only (1 arg: y)
- C / c — cubic Bézier curve (6 args: two control points and the endpoint)
- S / s — smooth cubic (4 args — the first control point is inferred)
- Q / q — quadratic Bézier (4 args: one control point and the endpoint)
- T / t — smooth quadratic (2 args — control point inferred)
- A / a — elliptical arc (7 args: rx, ry, rotation, large-arc-flag, sweep-flag, x, y)
- Z / z — close the path (0 args)
Uppercase letters use absolute coordinates. Lowercase letters use coordinates relative to the current pen position. The difference is load-bearing: a path full of lowercase commands is translatable by changing just the first M, while a path full of uppercase commands needs every number rewritten.
Implicit continuation
If you write M 10 20 30 40 50 60, the browser reads it as M 10 20 L 30 40 L 50 60. After a moveto, extra coordinate pairs are treated as lineto. This is true for most commands — a run of L continues as L without needing the letter repeated, and the same applies to C, Q, and the others. The parser here expands those implicit commands so the breakdown table shows one row per logical operation, not one row per explicit letter.
The arc flag oddity
Arcs are the most fiddly command. Beyond the two radii, rotation, and endpoint, they take two single-digit flags — large-arc-flag and sweep-flag — that pick which of the four possible arcs you actually want. Because each flag is always exactly one character, SVG syntax lets them touch adjacent numbers without a separator: A 10 10 0 0120 20 is parsed as A 10 10 0 0 1 20 20. This parser handles that too, because real-world minified SVG in the wild uses the compact form.
What this tool is good for
- Debugging a hand-written path: you wrote a compound path and something is off-screen. Hover through the commands to find where the pen goes wrong.
- Reading a minified path from a design tool: Figma and Illustrator output dense strings with no whitespace and scientific notation. Paste them here to see structure — then feed the file into the SVG optimiser to strip the rest of the export metadata.
- Learning the grammar: if you’ve only ever used SVG via a drawing app, the commands feel cryptic. Seeing them side-by-side with their names is the fastest way to internalise what each letter does.
What this tool does not do
It does not currently support editing paths by dragging control points — the command listing is read-only. It does not compute the true visual bounding box (which requires curve flattening to account for Bézier control-point extents); the viewBox is fit to the endpoint coordinates instead, which is usually close enough but can clip the edges of aggressive curves. And it does not render SVG fills, strokes, or full stylesheets — the preview draws the path as an outlined stroke only, so you can see the skeleton. For full rendering, open the path in a real SVG.