SVG Optimizer

One input per line. Output is numbered to match the input order.
Pinned tools are listed in your favourites on the home page.Copies a link to this tool that carries your current input, so it opens ready to run.Gives you an iframe snippet for putting this tool on your own site.
Drag & drop an .svg file here, or click to browse
Paste SVG markup above or drag & drop an .svg file to get started.
Ctrl+Enter Run  · Ctrl+Shift+C Copy  · Esc Clear

Understand SVG Optimizer

Strips editor metadata, comments, and unused attributes out of SVG markup and reports the exact byte saving.

How it works

SVG exported from Inkscape, Illustrator, Figma, or Sketch carries a large amount of information the browser never reads: XML processing instructions, a DOCTYPE, comments, a `<metadata>` block of RDF, and whole namespaces of editor-private attributes such as `inkscape:label` and `sodipodi:docname`. Those are removed, simple `style` declarations like `style="fill: #5C5BFE"` are promoted to presentation attributes (`fill="#5C5BFE"`), `id` attributes that nothing in the document references are dropped, and whitespace between tags is collapsed. Sizes are measured as UTF-8 bytes before and after, so the percentage shown is the real saving on the wire before compression.

When to use it

  • Cleaning an icon set before inlining it in a component library or building a sprite sheet
  • Cutting the payload of an SVG that is being embedded in HTML, where every byte is in the critical path
  • Removing an editor's document name, layer names, and author metadata before publishing a file
  • Making a machine-generated SVG readable enough to edit by hand

Watch out for

  • An `id` referenced only from external CSS or JavaScript looks unused and is removed. If your stylesheet targets `#logo-path` or your script calls `getElementById`, check the output before shipping it.
  • Promoting inline `style` to attributes lowers its specificity. An inline style beats every stylesheet rule; a presentation attribute loses to all of them, so a rule that was previously overridden may now win.
  • Path data is left untouched. Coordinates are not rounded, paths are not merged, and shapes are not converted — the deepest savings in a detailed illustration need a full optimizer such as SVGO.
  • Byte savings shrink after gzip or brotli. Repetitive metadata compresses well, so a 60% raw reduction may be closer to 25% over the network.

Not the right tool for: Sanitizing untrusted SVG. This is a size optimizer, not a security filter — an SVG accepted from a user can carry `<script>`, event handlers, and `foreignObject`, and must be sanitized server-side before it is ever rendered.

Frequently Asked Questions

How much can SVG optimization reduce file size?

Typical reductions are 20–70%. SVGs exported from Inkscape, Adobe Illustrator, or Figma contain extensive editor metadata, comments, and redundant attributes. A 50KB exported SVG often becomes 10–20KB after optimization — a critical improvement for icon sprites.

Will optimization break my SVG animations?

Possibly. This optimizer deletes id attributes it cannot see referenced by url(#id) or href="#id", so CSS or JavaScript that targets an element by ID may stop matching. Class-based CSS animations and SMIL inside the file are unaffected. Check the output before replacing an animated SVG.

What is the difference between minification and optimization?

Minification only removes whitespace and comments. Optimization also rewrites content: dropping editor metadata, promoting simple style properties to presentation attributes, and deleting unreferenced IDs. This tool does both of those. It does not merge paths, collapse groups, or convert shapes to paths — SVGO does that.

How to Use SVG Optimizer

  1. Paste or type your input in the input area above.
  2. The tool processes your input automatically or click Run.
  3. Copy or download the result using the action buttons.
  4. Use Ctrl+Enter to run quickly from the keyboard.