SVG Optimizer

SVG files exported from design tools carry a great deal of material that has no effect on rendering: editor metadata, hidden layers, comments, excessive coordinate precision. Stripping it commonly halves the file size without changing a pixel.

Free · runs in your browser · updated

SVG Raw Code
Optimized Output
Advertisement

SVG Optimizer at a glance

What it does
Strip editor metadata, comments and redundant markup from SVG files to reduce their size.
Where it runs
Entirely in your browser — no data is uploaded
Works offline
Yes, once the page has loaded
Cost
Free, with no account and no usage limit
Category
Design & Colors

How to use the optimizer

  1. Paste your SVG markup or open the file.
  2. Optimize, and compare the before and after sizes.
  3. Check the preview - always confirm the graphic still renders correctly.
  4. Copy the cleaned markup into your project.

What gets removed

  • Editor metadata. Illustrator, Figma and Sketch each embed proprietary blocks describing layers, artboards and document settings. Illustrator's can exceed the size of the artwork itself.
  • Comments and DOCTYPE. Neither affects rendering, and a DOCTYPE on an SVG is a legacy artefact.
  • Empty groups and hidden elements. Layers turned off in the editor are frequently exported anyway.
  • Excessive precision. A coordinate of 12.3456789 is indistinguishable from 12.35 at any realistic size, and each removed digit is a byte saved across hundreds of path points.
  • Redundant attributes - defaults restated explicitly, and unused id values.

What to keep

Aggressive optimisation can break things. Watch for these.

The viewBox. Removing it makes the SVG non-scalable, which defeats the purpose of using SVG at all. Always keep it.

IDs referenced by CSS or JavaScript. If you animate or style parts of the graphic, an optimiser that renames or removes IDs will silently break it.

Accessibility elements. <title> and <desc> are what screen readers announce. An icon conveying meaning needs one.

The xmlns declaration, when the file is used standalone. It can be omitted for SVG inlined in HTML, but not for a separate file.

Advertisement

When SVG is the right format

SVG describes shapes mathematically, so it scales to any size without loss and is usually tiny for simple graphics. It is the correct choice for logos, icons, diagrams, charts and line illustrations.

It is the wrong choice for photographs. A photo traced into thousands of vector paths produces a file far larger than a JPEG and renders slowly.

The crossover is complexity: a graphic with a handful of shapes is smaller as SVG; a highly detailed illustration with gradients and thousands of nodes may well be smaller as a compressed raster image. If an SVG is over about 30 KB, it is worth comparing.

Serving SVG efficiently

Enable compression. SVG is text, so gzip or Brotli typically cuts it by 60-80%. This matters more than any markup optimisation, and a surprising number of servers do not compress image/svg+xml because it is not in the default MIME type list.

Inline small icons. Pasting the markup into your HTML removes a request and lets CSS style the paths - fill: currentColor makes an icon follow the surrounding text colour automatically.

Use a sprite for icon sets. One file with <symbol> definitions, referenced by <use>, beats dozens of separate requests.

Be careful with untrusted SVG. SVG can contain scripts, so user-uploaded files must be sanitised before being served, or delivered from a separate origin.

Frequently asked questions

It should not - the removed material does not affect rendering. Precision reduction can theoretically shift a point by a fraction of a pixel, which is invisible at any normal size. Always check the preview.

Commonly 30-70% for exports from design tools, occasionally much more when the editor has embedded a large metadata block. Files already cleaned will barely change.

Inline for small icons you want to style with CSS or animate. An <img> for larger graphics reused across pages, so the browser can cache the file separately.

No. The markup is processed in your browser, so unreleased logos and client work stay on your machine.

Nothing you enter here leaves your browser

SVG Optimizer does its work in JavaScript running on your own device. The page loads once, and after that there is no upload step and no server involved — which matters here because images carry metadata, and unreleased artwork should not be uploaded to convert it.

You can verify this rather than taking our word for it: load the page, disconnect from the internet, and the tool keeps working. Our privacy policy sets out what is and is not collected, and this guide explains why the distinction matters.

Sponsored