SVG Path Prettifier
Paste a raw SVG d attribute and get it back formatted — one command per line, each labeled. Runs entirely in your browser.
Preview
22 commands · 50 parameters
SVG path command reference
| Command | Name | Parameters |
|---|---|---|
| M / m | Move to | x y |
| L / l | Line to | x y |
| H / h | Horizontal line to | x |
| V / v | Vertical line to | y |
| C / c | Cubic Bézier curve | x1 y1 x2 y2 x y |
| S / s | Smooth cubic Bézier | x2 y2 x y |
| Q / q | Quadratic Bézier curve | x1 y1 x y |
| T / t | Smooth quadratic Bézier | x y |
| A / a | Elliptical arc | rx ry x-rot large-arc sweep x y |
| Z / z | Close path | — |
Uppercase commands use absolute coordinates; lowercase commands use coordinates relative to the current point.
Why is path data so hard to read?
SVG exporters (Figma, Illustrator, Inkscape) and icon libraries compress path data to save bytes — they strip spaces, chain multiple parameter sets on a single command letter, and omit separators wherever the spec allows. The result is correct but unreadable. This tool re-inserts structure without changing any coordinates, so the prettified output is semantically identical to the original.
Frequently Asked Questions
Does prettifying change the shape?+
No. The prettifier only reformats the whitespace and adds label comments — it does not alter any coordinate values, command types, or parameter order. The output is a byte-for-byte equivalent path that renders identically to the input.
What does implicit command repetition mean?+
If a command letter is followed by more parameter sets than it needs, the extra sets are treated as a repeat of the same command — except after M (absolute Move to), where subsequent pairs become L (Line to), and after m, where they become l. This tool expands those implicit repeats into explicit command lines.
Is my path data sent to a server?+
No. All parsing and formatting happens in your browser using JavaScript. Your path data never leaves your device.
What path commands are supported?+
All standard SVG path commands: M and m (move to), L and l (line to), H and h (horizontal line), V and v (vertical line), C and c (cubic Bézier curve), S and s (smooth cubic), Q and q (quadratic Bézier), T and t (smooth quadratic), A and a (elliptical arc), and Z and z (close path).
Related Tools
How to use
- Paste a raw SVG
dattribute value — the formatted output and preview update instantly. - Toggle Show command labels to add a comment on each line identifying the command type.
- Toggle Label absolute vs relative to annotate whether each command uses absolute or relative coordinates.
- Click Copy to copy the prettified output, or Copy minified to get a compact single-line version.