SVG Path Inspector

Parse an SVG <path d="..."> attribute and see each command broken out: type (M, L, C, Q, A, Z, etc.), points, control points. Useful for debugging path animations, understanding existing SVGs, or learning path syntax.

Render

Commands

How to use the SVG Path Inspector

Paste the contents of a d attribute. The renderer shows the path; the commands list breaks down each step. Drag M moves the pen; L lines to a point; C is a cubic Bezier; Q is quadratic; A is arc; Z closes the path.