SVG optimizer: shrink files with SVGO
SVGs exported from Illustrator, Figma, Inkscape or Sketch contain much more than the shapes you drew: editor namespaces, metadata, comments, hidden layers, redundant groups and coordinates with six or more decimals. This SVG optimizer runs SVGO, the standard Node.js optimisation tool, directly in your browser to remove all of that. Savings of 30–70% are common for icons and illustrations.
Example
<!-- before, 380 bytes -->
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
<!-- Badge icon -->
<circle cx="60.000" cy="60.000" r="54" fill="#0f766e" />
<path d="M 36 62 L 52 78 L 84 42" … />
</svg>
<!-- after -->
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><circle cx="60" cy="60" r="54" fill="#0f766e"/><path … d="m36 62 16 16 32-36"/></svg>What SVGO does
- Removes comments, metadata, editor-specific attributes and empty elements.
- Rounds numbers to the chosen precision and rewrites path data with relative and shorthand commands.
- Collapses unnecessary groups, merges paths where it is safe and shortens colours (
#ffffff→#fff). - Converts simple shapes to shorter equivalents and removes default attribute values.
Options explained
- Number precision: 3 decimals is safe for most graphics; icons drawn on a 24-pixel grid often look identical with 1 or 2. Too low a value can distort small details — check the preview.
- Multipass: repeats optimisation until nothing else changes, which can squeeze out a few more bytes.
- Remove viewBox: off by default. Without a viewBox the SVG cannot scale responsively, so keep it unless you know you need fixed dimensions.
- Remove width/height: makes the SVG fill its container, useful for inline icons sized with CSS.
- Keep IDs: prevents renaming or removing IDs referenced by your CSS or JavaScript.
- Pretty print: indents the output for readability instead of minifying it onto one line.
After optimising
Serve SVG files with gzip or Brotli compression for further savings. To embed the optimized icon in CSS, convert it with SVG to CSS data URI; for React projects, turn it into a component with SVG to JSX. You can inspect the result with the SVG viewer.
Safe versus aggressive settings
For logos and illustrations that will be edited again, use pretty print and keep IDs so the file stays readable and scriptable. For production icons, minify to one line, keep precision at 2–3 and enable multipass. Always keep a copy of the original export: optimisation is one-way, and editors like Illustrator may not be able to restore layers or text objects that SVGO flattened.
Where the savings come from
For exported icons, most bytes are editor metadata and verbose path data. A path like M 36 62 L 52 78 L 84 42 becomes m36 62 16 16 32-36 using relative coordinates and implicit commands. Colour values, default attributes and whitespace add further savings. The status bar reports the exact before and after sizes in bytes and the percentage saved, so you can compare the effect of different precision settings.
Privacy
The tool runs entirely in your browser. Nothing you type or paste is sent to our servers.