SVG Path Viewer
Paste the d attribute of an SVG path and it is split into commands, with start, end and control points drawn over the shape. Relative commands are converted to absolute coordinates in the list, and the implicit control points of S and T are shown too. You can edit coordinates by hand or reduce decimal places to shorten the data. To shrink a whole SVG file, use the SVG Optimizer; for wave shapes, try the SVG Wave & Blob Generator.
🔒 Runs in your browser · Your data is never sent to a server
Preview
- Start point
- End point (anchor)
- Control point
- Computed control point (S / T)
Optimize (reduce decimals)
Commands
Edit a number to update the path data. Arc flags (large, sweep) must be 0 or 1.
How to use
- Paste the d value of your path into "Path data (d attribute)", or press "Insert sample" to try it.
- Press "Select" on a row to highlight that segment in the preview. Change a number in the list and the path data and the preview follow.
- Choose "Decimal places" and press "Optimize" to shorten the path data, then take it with "Copy path data".
Notes
- Supported commands are M, L, H, V, C, S, Q, T, A and Z (uppercase is absolute, lowercase is relative). Repeated commands with the letter omitted, including the implicit L after M, are expanded in the list.
- The preview area fits the start, end and control points. For arcs only the end points are counted, so the bulge of an arc can extend past the frame.
- Reducing decimals rounds the coordinates, so the shape changes slightly. In paths with many relative commands the rounding errors can add up; use "Convert to absolute coordinates" if that matters.
- The optimized output packs separators (for example .5 for 0.5 and 10-5 for 10 -5). This is valid SVG, but very old software may not read it.
Glossary
Path data (d attribute)
The string that defines the shape of an SVG path element: commands such as M (move) and C (curve) followed by coordinates.
Control point
A point that shapes a Bézier curve. The curve does not pass through it; it sets the direction and strength of the pull.
Relative / absolute commands
Uppercase commands use absolute coordinates; lowercase commands use offsets from the current point.
Elliptical arc (A command)
Draws part of an ellipse from radii, rotation, the large-arc and sweep flags and an end point. The flags pick one of four possible arcs.
FAQ
Where do I find the d attribute of a path?
Open the SVG file in a text editor and copy what is inside the quotes of <path d="...">. You can also select the path element in your browser developer tools.
What is the difference between uppercase and lowercase commands?
Uppercase commands (M, L, C and so on) use absolute coordinates; lowercase ones (m, l, c) use offsets from the current point. The preview uses absolute values for both, as shown in the command list.
Why are control points shown for S and T when I did not write them?
S reuses the previous C/S second control point and T the previous Q/T control point, mirrored around the current point. They are drawn as hollow circles.
How much does the shape change when I reduce decimal places?
With a viewBox of a few hundred units, one or two decimals is usually invisible. For paths with small coordinates (around 0 to 1), too few decimals will distort the shape, so check the preview.
Share this page