SVG Path Visualiser
Visualise and understand an SVG path, seeing how its commands draw the shape.
Making sense of path data
An SVG path is a compact string of commands and coordinates — move here, line to there, curve like this — that draws a shape, and it is almost impossible to read by eye. This renders the path and helps you see how its commands build the shape, so you can understand, debug or tweak path data instead of staring at an inscrutable string of letters and numbers.
Paste the path data and see the shape it draws.
Reading the command language
Path data is its own little language: letters are commands — move, line, curve, arc, close — and the numbers are their coordinates, with uppercase meaning absolute positions and lowercase meaning relative ones. Curves in particular use control points that are hard to picture from the numbers alone. Seeing the path drawn, and how each command contributes, is the way to grasp what a path is doing, fix a shape that is coming out wrong, or hand-edit path data with any confidence.
Frequently asked questions
What is SVG path data?
A string of commands — move, line, curve, arc, close — with coordinates, that together draw a vector shape.
Why is a path hard to read?
The commands and coordinates, especially curve control points, are almost impossible to picture from the raw string. Seeing it drawn makes it clear.
Is my path uploaded?
No. It is rendered in your browser.