SVG Optimizer

Clean and minify SVG files by removing editor bloat, comments, and redundant data.

100% private

Run SVGO-style optimisations over an SVG — strip unused metadata, collapse redundant groups, round path numbers to a sensible precision, and remove inline editor cruft. Files exported from Figma or Illustrator commonly drop by 50–80% with no visible change. Per-rule toggles let you keep IDs (often needed when CSS or JS targets them) and preserve viewBox precision where the rendering quality matters. The optimisation runs in your browser; SVG markup stays local.

Drop or tap to optimize SVG

Fast. Private. No uploads.

Input

Next steps

Compress image

Shrink images by up to 80% without visible quality loss.

Create favicon

Upload any image and get favicons in every size your site needs.

Color Palette Generator

Pull a beautiful color palette from any image — export as CSS or JSON.

Resize image

Resize to exact pixel dimensions or pick from ready-made presets.

View all tools →
Runs right inside your browser tab. No uploads. Your files stay private.

Optimise SVG Markup With SVGO Running In Your Browser

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 not in the default preset 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.

Common Use Cases

01

Icon set optimisation

Optimise an icon set before bundling it into a React or Vue app so the icons-as-modules path stays light in the final JavaScript bundle.

02

Figma SVG export cleanup

Strip the redundant transforms, ids, and Figma-specific namespaces that Figma adds to its SVG exports.

03

Illustrator and Inkscape cleanup

Remove editor metadata, sodipodi attributes, and namespaces that browsers ignore but that bloat the file by 30-50 percent.

04

Web performance Core Web Vitals

Shrink inline SVGs to improve First Contentful Paint and Largest Contentful Paint scores on Lighthouse and PageSpeed Insights.

Frequently Asked Questions

SVGO, the open-source SVG optimiser used by Webpack, Vite, Next.js, and most modern build pipelines. The browser build (svgo/browser) runs the same plugin pipeline as the Node CLI.
Typically 20-80 percent. Designer-tool exports (Figma, Illustrator, Inkscape) hit the high end because they carry lots of editor metadata. Already-optimised SVGs may not shrink much further.
No, in any realistic display scenario. The default coordinate precision rounds values to 3 decimal places, which is sub-pixel even at extreme zoom. The look stays identical to the source.
The standard SVGO default preset: removeMetadata, removeComments, cleanupNumericValues, convertPathData, mergePaths, collapseGroups, and a dozen more. removeViewBox and removeXMLNS are not included in the default preset, so the SVG stays renderable in HTML and as a standalone file.
Yes. The Plugins panel exposes individual toggles so you can opt out of optimisations that conflict with your specific needs (for example, keeping ids for JavaScript hooks or keeping the viewBox attribute for responsive scaling).
Yes. SVGO does not strip path data; it only rewrites it to a more compact form. Icon fonts and inline SVG icons render identically before and after.
No. SVGO runs in your browser, the markup is parsed and rewritten in your tab, and the result is held in React state. No SVG bytes are sent to a server.
If you used a non-default precision setting, coordinates may have been rounded more aggressively. Bump the precision back up to 4 or 5 decimal places. Empty groups and unused defs may also have been collapsed; this is intentional and visually invisible.
Mostly yes. Plugins that could break animation (removing ids referenced by animate elements, collapsing groups with transforms targeted by animation) are aware of references and skip those nodes by default.
Not in this tool — paste markup or upload one file at a time. For batch work, use the SVGO command line directly or integrate it into your build tool.
Maintained by the WebToolVerse teamLast updated Suggest an edit

Advertisement