SVG Optimizer

Why optimize SVG files?

SVG is the best format for logos, icons and illustrations on the web: it’s sharp at any size and usually small. But SVGs exported from design tools such as Illustrator, Figma, Sketch or Inkscape carry a lot of baggage — editor metadata, comments, hidden layers, empty groups, verbose path commands and coordinates with six or more decimal places. None of it changes how the image looks, but it can double or triple the file size. Smaller SVGs load faster, make your HTML lighter when inlined, and keep your code base tidy.

How to optimize an SVG

1. Open an .svg file, or paste SVG code into the box. An example is loaded so you can see it in action.
2. Adjust the options if needed — the defaults are safe for most icons and logos.
3. Check the savings and compare the original and optimized previews side by side.
4. Download the optimized file, copy the code, or copy it as a data URI for use in CSS.

What the optimizer does

This tool runs SVGO, the widely used open-source SVG optimizer, entirely in your browser. Its default preset removes comments, metadata, editor namespaces and unused definitions; rounds numbers to the precision you choose; converts shapes and paths to shorter equivalents; merges and collapses unnecessary groups; and minifies colors and styles. It deliberately keeps the viewBox and <title>, which matter for scaling and accessibility.

• Multipass repeats the optimization until no more savings are found.
• Number precision sets how many decimal places coordinates keep. Three is safe for most artwork; lower values save more but can distort tiny details.
• Keep IDs preserves element IDs used by CSS, scripts, animations or gradient references.
• Remove width/height makes the SVG fill its container, so you control its size with CSS.
• Remove <title> saves a few bytes but removes the accessible name, so only use it for decorative images.

Safe to use with any SVG

SVG files can contain scripts. This tool never runs them: the optimization happens on the text of the file, and the previews are shown as images, where browsers don’t execute scripts. Your files never leave your device.

Tips

• Outline text in your design tool before exporting if the SVG uses fonts visitors may not have.
• Serve SVGs with gzip or Brotli compression on your server for even smaller transfers.
• For icons used many times on a page, consider an SVG sprite or inline SVG instead of many separate files.

Building a set of site icons? Create favicon.ico and app icons with the Favicon Generator, convert brand colors with the Color Converter, or pull colors from a photo with the image palette tool.