SVG Path Inspector
Parse an SVG path into readable commands, show each segment on a diagram, report the bounding box and point count, and find the common faults that make paths larger than they need to be.
Last reviewed by the Radiatus Cloud team
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
Path data is compressed to the point of unreadability
An SVG path is a string of single letters and numbers with almost no punctuation, designed to be short rather than legible. A capital letter means absolute coordinates and a lowercase one means relative to the current point, a repeated command can omit its letter, and separators between numbers are optional wherever the parse is unambiguous. The result is a format that is efficient and impossible to read, so most people edit paths by regenerating them rather than by understanding them.
Most exported paths are far larger than they need to be
Design tools export coordinates at whatever precision the internal representation happens to hold, commonly six or more decimal places. At typical display sizes anything beyond two decimals is invisible, and dropping the excess frequently halves the file size with no visible change. Exports also carry absolute commands where relative ones would be shorter, repeated command letters that could be omitted, and closing line segments where a close command would do.
The arc command is where things go wrong
The elliptical arc takes seven parameters including two flags that are single digits and easy to misplace when editing by hand. Getting a flag wrong does not produce an error; it produces an arc going the wrong way round, which frequently looks like a completely different shape. The two flags select between the four possible arcs through two points with a given radius, and understanding which is which is the difference between fixing an arc and regenerating it.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
What is the difference between uppercase and lowercase commands?
Uppercase takes absolute coordinates measured from the origin; lowercase takes coordinates relative to the current point. Relative commands usually produce shorter data and make a path harder to edit by hand.
Why is my exported path so large?
Because design tools export coordinates at their internal precision, often six or more decimals. At typical display sizes anything beyond two is invisible, and rounding frequently halves the file size with no visible difference.
What are the arc flags?
The large-arc flag chooses between the shorter and longer of the two possible arcs, and the sweep flag chooses the direction. Together they select one of four arcs through the same two points, which is why getting one wrong produces a completely different shape rather than an error.
Can command letters be omitted?
Yes, when the same command repeats. A sequence of line commands can be written once followed by all the coordinate pairs. It shortens the data and makes it harder to read, which is the usual trade in this format.
Does the order of subpaths matter?
For rendering with the default fill rule, yes. Overlapping subpaths in the same direction fill differently from ones in opposite directions, which is how a hole is made in a shape without any subtraction operation.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Paste SVG path data to see each command explained and drawn.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.