SVG Path Converter
Rewrite SVG path data the way you need it. Convert every command to absolute coordinates for easier editing, or to relative coordinates for shorter, movable paths, and turn basic shapes such as rectangles with rounded corners, circles, ellipses, lines, polylines and polygons into equivalent paths. Paste just the d attribute or a whole SVG and compare the result visually.
- Runs in your browser
- No sign-up
- Free to use
How to use SVG Path Converter
- Paste path data such as M10 10 h20 v20 z, or a whole SVG.
- Choose the decimal places and output style.
- Click To absolute, To relative or Shapes → paths.
- Check the before/after preview and copy the result.
SVG Path Converter features
All commands
M, L, H, V, C, S, Q, T, A and Z, upper and lower case.
Absolute ↔ relative
Tracks the current point and subpath start exactly.
Shapes to paths
rect (with rx/ry), circle, ellipse, line, polyline, polygon.
Whole SVGs
Converts every path or shape and keeps other attributes.
Compact output
Shortest valid notation, or readable spacing.
Visual check
Before and after previews that should look identical.
When to use SVG Path Converter
- Editing path coordinates by hand.
- Preparing shapes for morphing animations that need paths.
- Combining shapes into a single path or icon font glyph.
- Shortening path data with relative commands.
SVG Path Converter FAQ
What is the difference between absolute and relative commands?
Uppercase commands (M, L, C) use coordinates from the SVG origin; lowercase commands (m, l, c) are offsets from the current point. Relative paths are often shorter and can be moved by changing only the first M.
Why convert shapes to paths?
Some tools and animation libraries only work with paths, and a single path can combine several shapes. Paths also allow transforms and morphing that shapes do not.
Does conversion change the drawing?
No, apart from rounding to the chosen number of decimal places. Choose more decimals for detailed artwork.
What about arcs?
Arc radii and flags stay the same; only the end point changes between absolute and relative. Rounded rectangles, circles and ellipses become arc commands.
Why are some shapes skipped?
Shapes with zero size draw nothing, and values in % or em cannot be converted without knowing the layout.
Is anything uploaded?
No. Everything runs in your browser.
Understanding SVG path data
The d attribute of an SVG path is a compact drawing language. M moves the pen, L draws lines, H and V draw horizontal and vertical lines, C and S draw cubic Bézier curves, Q and T quadratic curves, A elliptical arcs and Z closes the shape. Each command exists in an absolute uppercase and a relative lowercase form.
Converting between the two forms requires following the pen: the current point after every command, and the start of the current subpath, which Z returns to. The converter parses every number and arc flag, including compact forms such as 1.5.5 or arc flags written without spaces, expands implicit repeated commands and recalculates each coordinate.
Absolute coordinates are easier to read and edit by hand, because each point says exactly where it is. Relative coordinates are usually shorter and make a shape independent of its position. The compact style drops unnecessary spaces, leading zeros and repeated command letters for the smallest valid output.
Basic shapes become paths with the same geometry. Rectangles become four lines, or four lines and four arcs when they have rounded corners; circles and ellipses become two half arcs; lines, polylines and polygons become line commands. Fill, stroke, class and other attributes are copied to the new path.
The previews render the original and converted SVG through images, side by side. They should look identical, which is a quick way to confirm that nothing went wrong before you use the new path data.