SVG Path Visualizer
Paste SVG path data and see it drawn with anchor points, control points, length and a full command breakdown.
Paste SVG path data above to see it drawn instantly.
- Commands
- Points
- Length
- Bounding box
Command breakdown
| # | Cmd | Meaning | Arguments | End point |
|---|
How it works
Paste the d attribute of any SVG <path> and it is parsed,
drawn and explained as you type. The preview auto-fits the path's bounding box, draws an
optional coordinate grid, and marks every anchor point (circles) and Bézier control point
(squares joined by dashed handles) so you can see exactly where each curve is being pulled.
The command table lists every instruction in order — its letter, its meaning, its raw
arguments and the absolute coordinate it ends on — which makes hand-editing path data far
less guesswork.
The tool also normalises the path: relative commands (m, l,
c, s…) are rewritten as absolute ones, shorthand
H/V are kept but resolved, and implicit repeated commands are
expanded, so you get a path that is easy to diff and reuse. Length is measured with the
browser's own getTotalLength() — the exact number you need for
stroke-dasharray line-drawing animations — and the bounding box comes from
getBBox().
Everything runs locally in your browser using the native SVG DOM. Nothing is uploaded, so
you can safely inspect icons, logos and paths from private design files. Use Copy absolute
path to grab the normalised d string, or Copy SVG / Download .svg for a
ready-to-use standalone file.
Frequently asked questions
What does the d attribute in an SVG path mean?
The d attribute is a list of drawing commands. Each starts with a letter — M moves the pen, L draws a line, H and V draw horizontal and vertical lines, C and S draw cubic Bézier curves, Q and T draw quadratic ones, A draws an elliptical arc and Z closes the shape. Uppercase letters use absolute coordinates, lowercase letters are relative to the previous point. Paste your path above and the command table names every instruction and shows the absolute coordinate it ends on.
How do I convert a relative SVG path to absolute coordinates?
Paste the path and read the "Normalised path" box: every relative command (m, l, c, s, q, t, a) is rewritten as its absolute equivalent, implicit repeated commands are expanded, and numbers are rounded to three decimals. Copy absolute path puts the result on your clipboard. Absolute paths are much easier to diff in version control and to hand-edit.
Is my SVG uploaded anywhere?
No. The path is parsed and rendered entirely in your browser using the native SVG DOM, so nothing ever leaves your device. There is no server, no account and no tracking of what you paste, which makes it safe to inspect icons and logos from private or client design files.