SVG Path Visualizer
See what every command in a path draws, with anchor points and a command table.
See What Your SVG Path Data Is Doing
An SVG path is a dense string of letters and numbers that describes a shape entirely without whitespace requirements — M10 10L90 90Q95 50 10 10Z is perfectly valid and perfectly unreadable. When a path renders wrongly, staring at the string rarely helps.
This visualizer parses the data, draws the result, and lists every command in plain language with its coordinates. Anchor points and Bézier control handles are marked on the drawing, which is usually enough to spot the command that went wrong.
Key features
- Every command supported — M, L, H, V, C, S, Q, T, A and Z, in both absolute and relative forms.
- Points and handles shown — anchors and Bézier control points marked on the rendered path.
- Segment breakdown — each command listed with its arguments explained in words.
- Anchor points marked — one tick draws a dot on every point the path passes through, so you can see where each command ends.
- Stroke, fill and width — including a stroke-only mode, which is how you read a path that would otherwise be a solid blob.
- Three sample paths — a heart, a wave and a star to take apart when you are learning what each command does.
This tool runs entirely inside your browser using native Web APIs. Your files and text are never uploaded to a server, never logged and never shared with third parties.
How to use: SVG Path Visualizer
- Paste your path data
Just the <code>d</code> attribute contents, or a whole path element. - Look at the drawing
The path is rendered with anchors and control handles marked. - Read the breakdown
Each command is listed in order with what it does and where it goes. - Adjust and re-check
Edit the data and watch both the shape and the command table update, then save the result as an SVG file.
Technical specifications
| Processing location | Entirely in your browser — no server round trip |
|---|---|
| Data uploaded | None. Files and text never leave your device |
| Price | Free — no account, no trial, no usage cap |
| Category | Design |
| Works offline | Yes, once the page has loaded |
| Browser support | Chrome 90+, Edge 90+, Firefox 90+, Safari 15+ |
| Interface languages | English, 中文, हिन्दी, Español, العربية |
Frequently asked questions
What is the difference between uppercase and lowercase commands?
Uppercase takes absolute coordinates from the origin; lowercase takes coordinates relative to the current point. Mixing them without noticing is the single most common reason a path goes somewhere unexpected.
What do S and T do?
They are smooth continuations. S extends a cubic Bézier by mirroring the previous control point; T does the same for quadratics. They keep curves continuous with less data — and they misbehave if the preceding command was not a curve.
Why is the arc command so difficult?
Because A takes seven arguments including two flags that select which of four possible arcs to draw between the same two points. Flipping either flag produces a wildly different curve, which is why arcs are usually the hardest paths to debug.
How do I animate a path being drawn?
Read the path’s length in the browser with <code>path.getTotalLength()</code>, then set <code>stroke-dasharray</code> and <code>stroke-dashoffset</code> to that value and animate the offset to zero. Export the SVG here and that technique works on it directly.