SVG Optimizer

SVG Optimizer runs SVGO — the de-facto open-source SVG optimiser used by Webpack, Vite, Next.js, and most modern build pipelines — directly in your browser. The library is dynamically imported from svgo/browser on first use so the main page bundle stays small; once imported, every subsequent run is instant. SVGO walks the SVG XML tree as a series of plugins, each one removing or rewriting nodes that match its rule.

The default plugin set covers the optimisations that matter for most sites. removeMetadata strips Inkscape and Adobe Illustrator metadata blocks; removeComments drops editor comments; cleanupNumericValues rounds path coordinates to a configurable precision (the default is 3 decimal places, which is invisible at every reasonable display size); convertPathData rewrites paths to the most compact form that produces identical pixels; mergePaths combines adjacent paths sharing styles; collapseGroups flattens unnecessary g elements.

Designer-tool exports are usually the biggest wins. Figma's SVG export includes lots of redundant transform attributes and absolute coordinates that SVGO can rewrite as compact relative paths. Illustrator and Inkscape exports often carry editor metadata, sodipodi namespaces, and inkscape: attributes that browsers ignore but that bloat the file by 30-50 percent. Running such files through this tool typically cuts the size by half without any visible change.

The optimisation is mathematically lossless for path data. Coordinate rounding can theoretically alter rendering at extreme zoom levels, but at the default precision the change is sub-pixel even at 16x zoom on a 4K display. The look stays identical to the source for every realistic display scenario.

Configurable plugin toggles let you opt out of specific optimisations. For example, removeViewBox is disabled by default because some sites rely on the viewBox attribute for responsive scaling; cleanupIDs is configurable because some apps need to keep specific id values for JavaScript hooks. The defaults mirror what svgo --preset=default uses on the command line.

Output is rendered both as the optimised SVG markup (with a copy-to-clipboard button) and as a live preview rendered with dangerouslySetInnerHTML so you can compare the visual output to the source side by side. A file size comparison shows the absolute bytes saved and the percentage reduction.

Everything runs locally. The SVGO bundle ships with the page, the SVG markup is parsed and rewritten in your tab, and the optimised markup is held in React state until you copy or download it. No SVG file is uploaded, which is helpful for branded icons that have not been published yet.