SVG Path Visualizer

The SVG Path Visualizer parses the d attribute of an SVG <path> and lets you step through each command — M (moveto), L (lineto), the cubic C and quadratic Q Beziers, arcs (A), the horizontal and vertical shortcuts (H, V), and the close-path Z — to see exactly how a shape is constructed. It renders the path on a grid and highlights the current segment, control points, and start/end coordinates as you advance, turning an opaque string of numbers into something you can read.

Each command moves a virtual pen: uppercase letters use absolute coordinates while lowercase letters are relative to the current point, and Bezier commands pull the curve toward off-curve control handles that the tool draws as anchor markers. Seeing those handles makes it obvious why a curve bulges the way it does, and stepping through reveals how shorthand commands like S and T reuse the previous control point by reflection.

This is invaluable for debugging hand-written or tool-exported paths, learning the path syntax, reverse-engineering an icon, or understanding why an animation along a path behaves unexpectedly. It pairs naturally with an SVG Sprite Generator workflow when you're auditing icon geometry, and with an SVG Color Editor when you need to inspect which sub-paths get which fills.

Practical tips: watch the difference between absolute and relative commands when a path drifts unexpectedly, and remember the arc command's flag parameters (large-arc and sweep) control which of four possible ellipse arcs is drawn. If a path looks broken, stepping to the offending command usually exposes a missing close, a stray relative move, or mismatched control-point counts.