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.
Decoding the SVG path d attribute
The d attribute of an SVG <path> is a dense string of single-letter commands and numbers — M, L, C, Q, A, Z — that's almost unreadable at a glance. When a path animation misbehaves or you're trying to learn how a shape is built, you need that string broken into its individual steps.
This inspector parses the d attribute and lists every command with its points and control points, alongside a live render of the path. It turns an opaque string into a step-by-step account of how the pen moves, draws curves, and closes the shape. To rasterize the finished path, use SVG to PNG.
Common use cases
- Debugging animations — inspect each command in a path being morphed.
- Learning path syntax — see how commands build a shape step by step.
- Reverse-engineering — understand a path copied from another SVG.
- Spotting errors — find a malformed segment in a complex path.
- Teaching — demonstrate how M, L, C, Q, A, and Z work.