SVG Path Data Viewer

Paste an SVG path d attribute and the viewer renders it on a grid with each command (M, L, C, Q, A, Z) labeled at the point it acts. Hover any command in the parsed list to see which segment of the path it draws.

The parser walks the path in order and shows absolute coordinates even for relative commands (lowercase letters), so you can verify what your m and c offsets actually resolve to. Useful when you've optimized a path and need to debug why one corner went sideways.

The grid auto-scales to the path's bounding box. Zoom in to inspect tight curves; the rendered tangent handles on cubic and quadratic Béziers show you the control points without needing a vector editor.

What the path grammar covers: M/m (moveto), L/l (lineto), H/h (horizontal lineto), V/v (vertical lineto), C/c (cubic Bézier), S/s (smooth cubic), Q/q (quadratic Bézier), T/t (smooth quadratic), A/a (arc), Z/z (closepath). Uppercase = absolute coordinates relative to the SVG origin. Lowercase = relative to the current pen position. The viewer normalizes everything to absolute internally so the displayed coordinates match what's actually rendered.

Worked example: paste M 10 10 h 80 v 80 h -80 z. The viewer draws a 80x80 square starting at (10,10). The parser breaks it into M(10,10) → H(90,10) → V(90,90) → H(10,90) → Z. Each step's resolved coordinate appears in the inspector panel. Now try the same shape using cubic curves: M 10 10 C 40 0, 60 0, 90 10 C 100 40, 100 60, 90 90 .... The control points appear as connecting lines from each curve segment's start and end, showing exactly where the Bézier 'pulls' toward.

Where paths surprise you: the A (arc) command. Two radii, an x-axis rotation, two boolean flags (large-arc, sweep), and an endpoint — and the geometry has four valid arcs between any two points. The flags pick which one. Get a flag wrong and you get the wrong arc. The viewer shows a tiny sketch of all four candidate arcs when you select an A command, so you can see which combination of flags produces the curve you actually wanted. Also: stroke vs fill. A path that visually closes only has a clean stroke if you include Z; otherwise the start and end aren't joined and you'll see a gap at line caps.