SVG Path Simplifier
How it works
Paste an SVG or drop the file on the drop zone and the page rewrites its path data with SVGO v4, then shows you exactly what that cost: the raw byte count before and after, the percentage saved, the gzipped size, and a side-by-side render of the original against the result so you can confirm the shape did not move.
Precision is the lever. Design tools export coordinates at six decimal places (`M 12.847362 4.019283`), roughly a thousand times finer than any screen can resolve. The slider runs from 0 to 6 and starts at 2 here, one step lower than the general optimizer, because path data is what this page is pointed at and two decimals halves most `d=` attributes on its own. It drives two SVGO plugins at once: `convertPathData` for the path commands and `cleanupNumericValues` for every other number in the document, so nothing is left carrying six decimals next to a path that carries two.
A rule of thumb for the value: 3 is visually lossless at any zoom, 2 is right for icons and logos rendered under a few hundred pixels, 1 works for small monochrome UI glyphs and starts to visibly shift curves on anything larger, and 0 is only safe for rectangles and other axis-aligned shapes. The preview re-renders on every change, so the honest method is to lower the slider until you can see a difference, then go back one step.
What `convertPathData` does besides rounding. It rewrites each path into the shortest equivalent form: absolute commands become relative where the relative version is shorter (`M 100 100 L 120 100` becomes `M100 100h20`), straight segments collapse from `L` into `H` or `V`, zero-length and redundant subpaths are dropped, and curve commands are re-expressed in whichever of the shorthand forms fits in fewer characters. All of it is lossless at a sane precision: the renderer draws the same pixels out of fewer bytes.
`mergePaths` takes consecutive `<path>` siblings that share the same style attributes and joins them into one element with one `d=`. On an icon exported as a dozen separate shapes that is often 5 to 20% of the file, most of it the repeated tags and `fill=` attributes that disappear. It runs automatically, and it is the reason to keep the original if you plan to animate individual paths later: once two paths are merged, nothing can target them separately.
Useless segments and attributes go the same way. `removeUselessStrokeAndFill` drops `stroke` and `fill` attributes that only restate the default, `convertShapeToPath` turns `<rect>`, `<polygon>` and their relatives into paths so `mergePaths` can reach them, `removeUselessDefs` clears `<defs>` entries nothing references, and `collapseGroups` folds `<g>` wrappers that carry nothing of their own.
What it does not do, and this is the part most pages get wrong: it does not remove anchor points. A path that arrives with 4,000 points leaves with 4,000 points. Everything above makes each point cost fewer bytes; nothing here refits the curve. If you genuinely need fewer nodes, because the path came out of an image trace and is heavy to animate or edit by hand, that is curve refitting (Ramer-Douglas-Peucker and its relatives) and it is lossy by definition: the shape changes. Inkscape's Path menu, Illustrator's Object then Path then Simplify, and the simplify-js library all do it. Run that first, bring the result here for the lossless byte pass, and the two steps compound.
The other four settings. Keep viewBox is on and should stay on unless the SVG is a fixed size you never scale, because removing it breaks CSS sizing to save about 25 bytes. Keep id attributes is off, which is right unless the file is a sprite or your CSS and JavaScript select nodes by id. Keep title and desc is off; turn it on when the graphic conveys meaning, because screen readers announce `<title>`. Multipass is on and re-runs the whole pipeline until the output stops shrinking, which finds another 3 to 8% on complex paths.
Read the gzipped number, not the raw one. Every web server compresses SVG before sending it, and gzip was already collapsing much of the repetition SVGO deletes outright. A 60% raw saving is often 25 to 40% after gzip. The gzipped figure is the one that turns into load time.
The engine is SVGO itself, the same library the CLI, webpack, Vite and svgr use, running in your browser instead of in Node. With matching settings the output is byte-for-byte what `npx svgo` produces locally. Nothing is uploaded and there is no queue, which the Network tab will confirm. For a general clean-up pass, the same engine with a precision default of 3 and the editor-metadata stripping in front, use the SVG Simplifier & Optimizer on this site.
Frequently Asked Questions
How do I simplify an SVG path?
- Lower the numeric precision slider. It is by far the biggest lever on path data, because design tools export six decimal places and two is enough for anything rendered under a few hundred pixels. Dropping from 6 to 2 typically halves the d= attribute on its own. Watch the side-by-side preview as you slide, and leave multipass on so the pipeline re-runs until the output stops shrinking.
Does it reduce the number of points in a path?
- No. A path that arrives with 4,000 anchor points leaves with 4,000 anchor points. What changes is what each point costs in bytes: coordinates are rounded, absolute commands become relative, straight segments collapse from L into H and V, and paths sharing a style are merged. For genuinely fewer nodes you need curve refitting, which is lossy: use Inkscape's Path menu, Illustrator's Simplify, or simplify-js first, then bring the result here.
What precision should I use?
- 2 for icons and logos, which is the default here. Use 3 when the artwork is large or detailed and you want a guarantee that nothing moves, 1 only for small monochrome UI glyphs, and 0 only for rectangles and other axis-aligned shapes. Anything drawn on a big canvas, such as a map or a detailed illustration, may need 4. The preview is the arbiter: lower it until you see a change, then step back one.
What does convertPathData actually change?
- Four things. It rounds every coordinate to your chosen precision, converts absolute commands to relative ones where that is shorter, collapses straight L segments into H and V, and drops zero-length segments and redundant subpaths. At a sane precision all four are lossless: the rendered pixels are identical, the d= attribute is 20 to 60% shorter.
Will merging paths break my SVG animation?
- It can, and that is the one thing to watch for. mergePaths joins consecutive path elements that share styles into a single element, so a CSS or JavaScript selector that targeted one of them no longer has anything to target. If individual paths are animated or scripted, keep the pre-merge original in version control and treat the optimized file as build output.
Is this the same as running SVGO from the command line?
- Yes. It is SVGO v4 itself, the library the CLI, webpack, Vite and svgr all delegate to, executing in your browser rather than in Node. With matching settings the output is byte-for-byte identical to npx svgo input.svg. The precision slider maps onto the floatPrecision option of convertPathData and cleanupNumericValues, which is what an svgo.config.js would set.
Why is the gzipped saving smaller than the raw saving?
- Because gzip was already compressing the repetition SVGO removes. A path full of six-decimal numbers has a lot of redundancy for gzip to exploit, so deleting those digits recovers less than the raw byte count suggests. A 60% raw reduction commonly lands at 25 to 40% gzipped, and that gzipped figure is what actually travels to your users, since every web server compresses SVG.
Can I get the original path back afterwards?
- No. Rounding coordinates and merging paths are destructive: the discarded decimals and the element boundaries are gone. Keep the original in version control, or treat the simplifier as a build step that runs on a copy. This is also why the preview matters, since it is the only check you get before the bytes are dropped.
Is my SVG uploaded anywhere?
- No. SVGO runs as JavaScript inside your browser tab, so the file never leaves your device. Open DevTools, watch the Network tab and press Optimize: no request fires. That matters for logos and client artwork under NDA, which is most of what gets pasted into a tool like this.
SVGO path plugins and how this page drives them
The plugins that touch path data, what each one changes, and which control on this page moves it.
| Plugin | What it does to path data | Driven by | Typical saving |
|---|---|---|---|
| convertPathData | Rounds coordinates, converts absolute commands to relative, collapses L into H and V, drops zero-length and redundant subpaths | Numeric precision slider | 20–60% |
| cleanupNumericValues | Rounds every other number in the file (width, x, y, stroke-width) to the same precision | Numeric precision slider | 5–30% |
| mergePaths | Joins consecutive path siblings that share styles into one d= attribute | Always on, from preset-default | 5–20% |
| convertShapeToPath | Rewrites rect, polygon, line and polyline as paths so mergePaths can reach them | Always on, from preset-default | Up to 30 bytes per shape |
| convertEllipseToCircle | Rewrites an ellipse with equal radii as a circle | Always on, from preset-default | A few bytes per shape |
| convertTransform | Collapses and rounds transform lists, turning matrix() into the shorter translate, scale or rotate form when they are equivalent | Always on, from preset-default | 1–10% |
| removeUselessStrokeAndFill | Drops stroke and fill attributes that only restate the default | Always on, from preset-default | 1–5% |
| collapseGroups | Folds g wrappers that add nothing, moving their attributes down onto the paths | Always on, from preset-default | 1–8% |
| cleanupIds | Removes or shortens id attributes nothing references | Keep id attributes toggle | 5–15% |
Behaviour verified against SVGO v4, the version this page runs. The precision slider is passed to convertPathData and cleanupNumericValues as floatPrecision. Plugins marked always on come from preset-default and cannot be switched off here; removeViewBox, removeTitle and removeDesc are not in preset-default in v4 and are appended as standalone plugins only when their toggles are unticked. Savings are typical ranges measured across icons exported from Illustrator, Figma and Sketch.