Compress SVG

An SVG exported from Figma, Illustrator or Sketch typically carries 2-5x more markup than it needs: editor namespaces, comments, empty groups, redundant transforms and 6-decimal coordinates. This tool runs your SVG through an SVGO-style pass, stripping the noise while keeping the rendered output pixel-identical.

How to compress an SVG

  1. 1

    Paste or upload your SVG

    Accepts raw XML text or a .svg file.

  2. 2

    Pick an optimisation level

    Safe (remove comments and editor metadata), aggressive (collapse groups, round coords, merge paths), or custom.

  3. 3

    Review the diff

    Compare byte count before and after, and preview the rendered result to confirm nothing changed visually.

  4. 4

    Copy or download

    Paste the optimised SVG directly into your code, or save as a file.

What bloats an SVG

Open a Figma-exported SVG in a text editor and you will typically see:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="..."
     xmlns:sketch="..." width="24.000000" height="24.000000"
     viewBox="0 0 24.000000 24.000000" ...>
  <!-- Generator: Figma ... -->
  <title>icon</title>
  <desc>Created with Figma</desc>
  <g id="Page-1" stroke="none" fill="none" fill-rule="evenodd">
    <g id="icon" transform="translate(0.000000, 0.000000)">
      <path d="M12.000000,2.000000 L..." fill="#000000"/>
    </g>
  </g>
</svg>

Almost every line is removable. The rendered output only needs the svg, viewBox, and path.

What the optimiser removes

Removed Why safe
XML comments Never rendered
Editor namespaces (sketch, figma) Not used by browsers
<title> / <desc> (optional) Accessible text, keep if meaningful
Empty <g> groups No visual effect
Default attribute values Browsers use defaults anyway
Identity transforms translate(0,0) does nothing
Coordinate decimals 3 decimals look identical on screen
Unused IDs Only keep IDs referenced elsewhere

Gotchas

  • Do not remove IDs referenced by CSS or by url(#...) in fills, masks, filters. Aggressive mode can break gradients.
  • Keep viewBox. Without it, the SVG will not scale responsively.
  • Keep <title> if you rely on it for accessibility (screen readers announce it).
  • Avoid collapsing <use> instances. The optimiser may inline them and lose the source-of-truth pattern.

When compression saves real bytes

SVG is text, which means gzip on the server already removes a lot of the redundancy. An SVG that drops from 4KB to 1KB uncompressed might only drop from 1.2KB to 0.7KB over the wire. Still worth it, and the smaller source is easier to read.

Frequently Asked Questions

Safe mode will not. Aggressive mode can remove IDs referenced by CSS or SMIL animations, if your SVG has animations, use safe mode or manually whitelist the IDs.

Figma/Illustrator exports typically shrink 50-80%. Hand-written SVG is already compact and usually only drops 10-20%.

By default yes, <title>, <desc> and aria-* attributes are preserved. You can opt to strip them if the SVG is purely decorative and the surrounding HTML provides the label.

Yes. The xmlns attribute is kept because it is required when pasting SVG directly into HTML. Inline SVG is usually the fastest delivery method for small icons.

Related Tools