Free SVG Path Visualizer
Paste a path’s d attribute to see it drawn with its control points, read each command, and convert it.
What is a SVG Path Visualizer?
This SVG path visualizer draws the path data from an SVG d attribute and shows the point each command ends on and the control points that bend its curves. It explains every command in plain words, rewrites the path in absolute or relative coordinates, and measures its bounds and length.
It reads the full SVG 2 path grammar, including packed numbers such as 1.5.5, exponents, implicit repeated commands and arc flags written without spaces. Paste bare path data, a whole path element or open an SVG file, and errors point to the exact character that broke.
Key Features
Drawn With Points
The path in its own bounds, with anchors and curve handles.
Plain-Word Commands
Each command explained with its absolute coordinates.
Absolute and Relative
Rewrite the whole path in either style.
Bounds and Length
A tight viewBox and the path’s length, arcs and curves included.
Exact Errors
Malformed data is reported with the character position.
Perfect for everyone
- Front-end developers
- Icon designers
- Creative coders and anyone editing SVG by hand
How to Use the SVG Path Visualizer
Paste the d attribute from an SVG, a whole path element, or open an .svg file to read its first path. The drawing, explanations and conversions update as you type, so you can change one number and see which part of the shape moves.
Paste the Path
The d attribute, a path element or an .svg file.
Look at the Drawing
Anchors are circles; control points are squares.
Read the Commands
Explain lists each command in plain words.
Convert or Check
Rewrite as absolute or relative, or measure it.
Paths, Taken Apart
Each row is path data of the kind found in icon sets, illustrations and hand-written SVG, from a heart icon to a curve one point short. Each answer is this tool’s explanation, conversion or check, with coordinates resolved to absolute.
“M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z”
“M10 80 Q 52.5 10, 95 80 T 180 80”
“M0 50 C 20 10, 40 10, 60 50 S 100 90, 120 50 S 160 10, 180 50”
“M 4 4 H 20 V 20 H 4 Z M 8 8 H 16 V 16 H 8 Z”
“M0,0a5 5 0 0110 0”
“M0 10 A10 10 0 1 1 20 10 A10 10 0 1 1 0 10 Z”
“M10 10 L10 10 M40 40 A0 20 0 0 1 80 40 a5 5 0 0 1 100 0”
“L 10 10 L 90 90”
“M 10 10 C 20 20 30 30”
“<path fill="none" stroke="currentColor" d="M2 12h20M12 2v20"/>”
The Ten Path Commands
Each letter is a command and the numbers after it are its arguments. Uppercase letters use absolute coordinates; lowercase letters are relative to where the last command ended, which is why icon sets favour them.
M x y
Moves the pen without drawing and starts a new subpath.
“What do extra pairs after M draw?”
L x y
A straight line to the point.
“Which command draws a diagonal?”
H x
A horizontal line; only the x changes.
“How many numbers does H take?”
V y
A vertical line; only the y changes.
“Which command keeps x the same?”
C x1 y1 x2 y2 x y
A cubic Bézier with two control points.
“How many numbers does C take?”
S x2 y2 x y
A cubic whose first control mirrors the last curve’s.
“What does S reuse?”
Q x1 y1 x y
A quadratic Bézier with one control point.
“How many control points has Q?”
T x y
A quadratic whose control mirrors the last one.
“Which takes only an end point?”
A rx ry rotation large sweep x y
An elliptical arc to the point.
“How many numbers does A take?”
Z
Closes the subpath with a line back to its start.
“Does Z take numbers?”
Reading an Arc Command
The arc is the command people find hardest to read, because two endpoints and two radii fit four different arcs. These five parts decide which one the browser draws, and the Explain view spells them out for every arc in your path.
Radii
rx and ry size the ellipse; a zero radius makes a straight line.
Rotation
Turns the ellipse in degrees; it does nothing for a circle.
Large-Arc Flag
1 picks the arc more than half way round, 0 the shorter one.
Sweep Flag
1 draws clockwise on screen, 0 anticlockwise.
Scaled Radii
If the radii can’t reach the end point, browsers scale them up.
Where Path Data Turns Up
The same path grammar is used well beyond SVG files, so a path you fix here can be pasted into CSS, canvas code or a component library unchanged. Knowing where it lives helps you find the right string to paste in the first place.
SVG Files
The d attribute of every path element, as design apps export it.
CSS clip-path
path() takes the same data to clip an element to any shape.
CSS Motion Paths
offset-path: path() moves an element along a curve.
Canvas Path2D
new Path2D(d) draws the same shape on an HTML canvas.
Icon Components
React and Vue icon packages store each icon as one or more d strings.
Working With Path Data
Habits that make hand-editing paths faster and the output smaller, whether you’re tweaking an icon or writing paths in code. Most of them come down to choosing the coordinate style that suits the job and checking the result against the drawing before you commit it.
Relative Is Portable
A relative path can move by changing only its first M.
Pick the Shorter Form
The check compares the length of each form, for smaller files.
Use the Tight viewBox
Crop an icon’s empty space by copying the bounds.
Find a Point Fast
Turn on points and count circles to find a command.
Mind the Stroke
Bounds ignore stroke width, so pad the viewBox by half of it.
When to Visualize a Path
Whenever path data needs reading, fixing or reshaping rather than redrawing from scratch in a design app. A path is only text, so small fixes are often quicker by hand than by round-tripping through an editor.
Debugging Icons
Find the command that makes a corner go wrong.
Learning SVG
See what each command and number does.
Animation Prep
Check paths match before morphing between them.
Code Review
Read a path in a pull request without opening a design tool.
Cropping Icons
Get a tight viewBox for an exported icon.
Path Data Pitfalls
The slips that make a path draw nothing, draw the wrong shape or fail to parse at all. Browsers often render a broken path up to the first error and quietly drop the rest, so a shape that looks half finished usually points here.
No Starting Move
Every path has to begin with M or m.
Missing Numbers
A curve one number short makes the whole path invalid.
Wrong Case
Changing l to L turns relative steps into absolute points.
Arc Flag Mix-Ups
Swapping the large-arc and sweep flags draws a different arc.
Stray Characters
Units such as px aren’t allowed inside path data.