About the SVG Path Editor
This SVG path editor renders the d attribute of an SVG <path> so you can see what it draws, and analyses it: the exact bounding box, a tight viewBox, the total path length (useful for stroke-dasharray line-drawing animations) and the number of commands. It parses every command in the SVG specification — M, L, H, V, C, S, Q, T, A and Z in absolute and relative form, including compact notation such as arc flags written without spaces.
You can move and scale the path, round coordinates to a chosen precision, and get two outputs: a readable version with absolute commands, and a minified version that picks the shorter of absolute or relative form for each segment, drops repeated command letters, leading zeros and unnecessary spaces. It also writes a complete, ready-to-paste <svg> element.
It suits front-end developers cleaning up icons exported from Figma, Illustrator or Inkscape, people hand-editing paths, and anyone debugging why an icon is clipped (the viewBox does not cover the bounding box). Scaling is uniform so arcs stay correct; the bounding box measures geometry only, not stroke width.
How to use the svg path editor
- 1Paste the d attribute from an SVG <path> element.
- 2Check the preview and the bounding box to see what the path draws.
- 3Translate or scale it if needed, and pick how many decimals to keep.
- 4Copy the minified path or the complete SVG markup with a tight viewBox.
- 5Use the path length for stroke-dasharray line-drawing animations.
Formula and method
The path is parsed command by command into absolute coordinates: relative commands are added to the current point, S and T reflect the previous control point, and Z returns to the start of the subpath. The optional transform scales every coordinate (and arc radii) by s and then translates by dx, dy.
The bounding box is exact for lines and Bézier curves — besides the end points it includes the curve at every t in (0, 1) where the derivative is zero, found with the quadratic formula. Arcs are converted from endpoint to center form as in the SVG specification and sampled finely. Length is the sum of chord lengths over 128 steps per curve, accurate to well under 0.1%. The minified path rounds to your chosen precision and, for each segment, keeps whichever of the absolute or relative form is shorter, tracking the rounded current point so errors do not accumulate.
- s
- Uniform scale factor
- dx, dy
- Translation in user units
- B(t)
- Bézier curve at parameter t from 0 to 1
Worked examples
Square outline
The square spans x and y from 10 to 90, so the bounding box is 80 × 80 starting at (10, 10), and its perimeter is 4 × 80 = 320. Minifying writes h80 and v80 relatively (same length as absolute, relative preferred) but keeps H10, which is shorter than h-80.
Circle drawn with two arcs, moved right
Two half-circle arcs of radius 50 make a full circle with circumference 2π × 50 ≈ 314.16. Translating by 10 in x shifts the bounding box to start at (10, 0) while the size stays 100 × 100.
Cubic Bézier scaled by half
At full size the curve peaks where its y-derivative is zero, at t = 0.5, with y = 300 × 0.5 × 0.5 = 75; scaling by 0.5 gives a 50 × 37.5 bounding box. Measured numerically the curve is about 200 units long at full size, so 100 after scaling.
Frequently asked questions
How do I view an SVG path online?+
Paste the contents of the path’s d attribute into the editor. The preview draws it inside a viewBox fitted to its bounding box, so even paths with large or negative coordinates are visible.
What is the difference between uppercase and lowercase SVG path commands?+
Uppercase commands (M, L, C, A…) use absolute coordinates in the user coordinate system. Lowercase commands (m, l, c, a…) are relative to the current point, which often makes paths shorter and easier to move.
How do I get the length of an SVG path?+
In the browser call path.getTotalLength(). This tool computes the same value numerically, which is handy for setting stroke-dasharray and stroke-dashoffset in CSS line-drawing animations without running JavaScript.
Why is my SVG icon cut off?+
Usually the viewBox does not cover the path’s bounding box, or the stroke extends beyond it. Use the tight viewBox from this tool and add padding equal to half the stroke width.
Does minifying a path change how it looks?+
Only through rounding. With two decimal places the difference is invisible for typical 24-unit icons; use more decimals for small coordinates or very large scaling. The tool never changes the command types or reorders segments.