SVG Path Visualiser
Paste the d attribute of an SVG path. See the shape with its anchor points and control handles, and get a cleaned-up path you can move, scale and round.
Worked examples
Relative to absolute
M10 10 h 10 v 10 z
M10 10 L20 10 L20 20 Z
The h and v commands become lines to full coordinates.
About SVG Path Visualiser
The d attribute of an SVG path is a dense string of letters and numbers. A small change can reshape the whole drawing, and exported icons often contain paths that are far longer than they need to be. This visualiser draws the path with its anchor points and curve handles, so you can see how it is built.
It reads every kind of command, including shortcuts for horizontal and vertical lines, smooth curves and arcs, and rewrites the path using absolute coordinates only. You can move and scale the path, round its numbers to shrink it, and copy the matching viewBox, which is worked out from the true outer edges of the curves.
How to use SVG Path Visualiser
- Paste the path data into the box.
- Look at the preview, the points and the table of commands.
- Set any move, scale, rounding and padding you want.
- Copy the absolute path and the viewBox.
Common uses
- Understanding a path from an icon set
- Shrinking an exported path by rounding its numbers
- Finding the exact size and viewBox of a shape
- Converting relative commands to absolute ones
Frequently asked questions
What is the difference between capital and small command letters?
A capital letter uses absolute coordinates, measured from the origin of the drawing. A small letter uses relative ones, measured from the current point. M10 10 h10 and M10 10 L20 10 draw the same line.
Which commands become which?
Horizontal and vertical lines become L, smooth curves S become C, smooth quadratic curves T become Q. The shape is unchanged, but every command now carries full coordinates.
Why can a rotated arc not be stretched unevenly?
Stretching a rotated ellipse unevenly produces a shape that an arc command cannot describe. Scale both directions by the same amount, or remove the rotation.
How is the viewBox worked out?
From the exact extremes of the lines, curves and arcs, not just the points, plus your padding. Stroke width is not included, so add padding if you plan a thick outline.