SVG Path Command Visualizer & Inspector

Reading the commands

Uppercase commands use absolute coordinates, lowercase ones move relative to the current point. Each takes a fixed number of values: H and V one, M, L, and T two, S and Q four, C six, A seven, and Z none. Extra values repeat the command, and extra pairs after M are treated as L. An arc's seven are the two radii, the rotation, two flags choosing the large or small arc and its direction, and the end point.

Preview size and compact numbers

The preview shows a 200 × 200 unit area from the origin. An icon drawn on a 24-unit grid appears small in the top-left corner, and paths from a 512-unit icon set run off the edge; that is the canvas, not the path.

Optimizers often drop separators, writing M10-5 or .5.5 for two numbers. The breakdown reads them as browsers do: a minus sign or a second decimal point starts a new number, so .5.5 is 0.5 and 0.5. Arc flags are single digits, so in a5 5 0 015 5 the flags are 0 and 1 and the end point is 5 5. To change the shape rather than read it, open it in the SVG editor.

How to use it

1. Paste SVG path data (e.g. M10 10 L90 90 Z).
2. Inspect command tokens and descriptions.
3. View the rendered vector path preview.

Privacy & limitations

Processing is 100% browser-side with zero data retention.