Optimize SVG

Why optimize an SVG

An SVG is a text (XML) file describing shapes, not pixels. That makes it perfect for logos, icons and illustrations: it's sharp at any size and usually very light. But design tools add a lot of information on export that serves no purpose on the web:

• Editor metadata: program name, version, layers, guides, custom namespaces (sodipodi:, inkscape:, sketch:…).
• Coordinates with too many decimals, like M12.000001 4.9999998, when two are enough.
• Empty or redundant groups, transforms that could be applied directly to shapes, repeated styles.
• Comments, layer titles and auto-generated IDs.

All of that multiplies the file size. For one icon it doesn't seem like much, but an icon system with dozens of inline SVGs, or a complex logo in every page header, adds up to kilobytes downloaded on every visit.

How to optimize your SVGs

1. Drop one or more .svg files, or paste the SVG code straight into the text box (or with Ctrl+V anywhere on the page).
2. ImageZap optimizes them instantly with SVGO and shows the size before and after, the gzip-compressed size and a preview of both to check they look the same.
3. Adjust the options if needed: changes apply to every file immediately.
4. Download each SVG, all of them in a ZIP, or copy the code or a data URI for use in CSS.

What SVGO does

SVGO (SVG Optimizer) is the reference tool for optimizing SVG, used by most build tools and frameworks. ImageZap runs its browser build with the default preset, which applies dozens of safe transformations, including:

• Removing metadata, comments, hidden elements and default attributes.
• Rounding coordinates to the chosen precision.
• Converting basic shapes into shorter paths and merging paths when possible.
• Simplifying colors (#ffffff → #fff) and moving styles into attributes.
• Collapsing unnecessary groups and removing unused IDs.

What's never removed is the viewBox: it's what lets the SVG scale correctly, and removing it is the most common cause of icons that look clipped after optimizing.

Options

• Multiple passes: repeats the optimization until there are no more improvements. Usually saves a bit more at no risk.
• Coordinate decimals: the setting with the biggest impact on size. For 16-48 px icons, 1 decimal is enough; for large or detailed illustrations, 2-3. If you see distorted curves, raise it.
• Remove width/height: keeps only the viewBox, so the SVG adapts to whatever size you give it in CSS. Useful for inline icons; don't use it if the SVG must have a fixed size when opened on its own.
• Keep IDs: turn it on if your CSS, JavaScript or animations reference elements by id.

Inline SVG, file or data URI

• As a file (<img src="logo.svg">): cached and reusable. The simplest choice for logos and illustrations. Remember to set width and height on the <img> to avoid layout shifts.
• Inline (pasting the <svg> into the HTML): lets you change colors with CSS (fill: currentColor) and adds no requests. Ideal for UI icons.
• As a data URI in CSS: handy for backgrounds, bullets or small decorations. The Copy data URI button generates a URL-encoded version, shorter than base64.

If the SVG is also your favicon, you can generate every format with the favicon generator.

Frequently asked questions

Will my SVG look different?

It shouldn't: SVGO only applies transformations that preserve the visual result. Always compare both previews; if you spot differences, raise the decimal precision or turn on Keep IDs.

How much can it shrink?

It depends on the source. SVGs exported from Illustrator or Inkscape typically drop 50-80%; those from Figma, already fairly clean, 20-40%.

Is it safe to open third-party SVGs here?

Yes. Previews are displayed as images, a mode in which the browser doesn't run embedded scripts. And nothing leaves your device.

Why show the gzip size?

Because web servers compress SVGs when sending them. The gzip size estimates what's actually downloaded.