How much smaller will my file get?

It depends entirely on the source. A file exported from Inkscape or Illustrator with all its metadata intact commonly drops by half or more, because the editor data outweighs the drawing. A file already cleaned by a build step will barely change. The size comparison shows the actual result rather than an estimate.

Is the optimisation safe?

The removals are chosen to be safe for rendering, and in the great majority of cases the image is pixel-identical afterwards. Because SVG can be structured in unusual ways, the preview is there to confirm. Compare it against the original before replacing a production asset.

What is Inkscape data and why is it in my file?

Namespaced attributes that Inkscape uses to remember layers, guides, grids and window state. They are meaningless to a browser, which ignores them, but they are written into every saved file and can be a substantial share of its size.

Should I remove the XML declaration?

For SVG embedded in HTML, yes: it is unnecessary and browsers do not require it. For a standalone .svg file served on its own it is conventional but still optional in practice. If the file is consumed by a strict XML tool rather than a browser, keep it.

Why is my SVG still large after optimising?

Because the drawing itself is large. Path data dominates once the metadata is gone, and a traced or highly detailed illustration can contain thousands of coordinates. Reducing that means simplifying paths or lowering precision in your editor, which is a design decision rather than a cleanup.

Can I style the SVG with CSS afterwards?

Yes, when the SVG is inlined in your HTML. Removing presentation attributes that duplicate defaults actually helps here, because an attribute on an element takes precedence over a stylesheet rule in some cases and can quietly defeat your CSS.

Does it handle animated SVG?

Animation elements are part of the drawing rather than editor metadata, so they are preserved. That said, an animated SVG is more likely to depend on specific structure, so check the preview carefully and confirm the animation still runs.

What about SVG containing embedded raster images?

An embedded bitmap, usually as a data URI inside an image element, is left alone and will dominate the file size. If that is your situation, the real saving comes from optimising the bitmap itself before embedding it, or from referencing it as a separate file.

Should I use SVG or a font for icons?

SVG, in almost all cases now. Icon fonts have accessibility problems, are rendered as text by assistive technology, fail awkwardly when the font does not load, and cannot carry more than one colour. Inline SVG avoids all of that, which is why icon fonts have largely been abandoned.

Is the SVG I paste sent to a server?

No. Parsing, optimisation and preview all run in your browser, and the file is never transmitted, stored or logged.

SVG Optimizer – Strip Editor Metadata and Shrink Files

SVG Optimizer

// SVG INPUT

// OPTIMISED OUTPUT

Paste some SVG...

// SVG Optimizer: Features

Why exported SVGs are so large

A vector editor writes a file for itself as much as for the web. Inkscape records its own namespaced attributes for layers, grids and guides; Illustrator adds generator comments and metadata blocks; both write the XML declaration and often a DOCTYPE. None of it affects how the image renders, and it commonly accounts for more of the file than the drawing does. A small icon can arrive at several kilobytes and leave at a few hundred bytes.

What each option removes

The XML declaration is unnecessary for SVG embedded in HTML. Comments are usually the editor announcing itself. Metadata blocks hold licensing and provenance data no renderer reads. Editor data covers the namespaced attributes Inkscape and similar tools use to remember their own state. Empty groups are containers left behind by editing. Default attributes are values equal to what the specification already assumes, so writing them changes nothing.

Check the preview, not just the size

Optimisation is only worthwhile if the image still looks right, which is why the preview sits next to the output. Most removals are entirely safe, but an SVG that relies on an unusual structure can be affected by removing groups, and an image that depends on a specific attribute being stated explicitly can shift. Compare the preview against the original before replacing a production asset.

Inline SVG and why size matters more there

An SVG inlined into your HTML is downloaded with every page rather than cached separately as a file, so the bytes are paid repeatedly. That makes cleaning up an inlined icon set disproportionately valuable. Inlining also lets CSS style the image, which is why icon systems favour it despite the caching trade-off; keeping each icon small is what makes the trade-off acceptable.

Unreleased logos never leave your machine

Parsing, optimisation and preview all happen locally, so unreleased logos, internal diagrams and client artwork can be processed without being transmitted, stored or logged. To inline the cleaned result as a data URI, the Image to Base64 converter produces a complete data: URI, although for SVG a percent-encoded URI is usually smaller than a Base64 one.

// SVG Optimizer: FAQ

How much smaller will my file get?: It depends entirely on the source. A file exported from Inkscape or Illustrator with all its metadata intact commonly drops by half or more, because the editor data outweighs the drawing. A file already cleaned by a build step will barely change. The size comparison shows the actual result rather than an estimate.
Is the optimisation safe?: The removals are chosen to be safe for rendering, and in the great majority of cases the image is pixel-identical afterwards. Because SVG can be structured in unusual ways, the preview is there to confirm. Compare it against the original before replacing a production asset.
What is Inkscape data and why is it in my file?: Namespaced attributes that Inkscape uses to remember layers, guides, grids and window state. They are meaningless to a browser, which ignores them, but they are written into every saved file and can be a substantial share of its size.
Should I remove the XML declaration?: For SVG embedded in HTML, yes: it is unnecessary and browsers do not require it. For a standalone .svg file served on its own it is conventional but still optional in practice. If the file is consumed by a strict XML tool rather than a browser, keep it.
Why is my SVG still large after optimising?: Because the drawing itself is large. Path data dominates once the metadata is gone, and a traced or highly detailed illustration can contain thousands of coordinates. Reducing that means simplifying paths or lowering precision in your editor, which is a design decision rather than a cleanup.
Can I style the SVG with CSS afterwards?: Yes, when the SVG is inlined in your HTML. Removing presentation attributes that duplicate defaults actually helps here, because an attribute on an element takes precedence over a stylesheet rule in some cases and can quietly defeat your CSS.
Does it handle animated SVG?: Animation elements are part of the drawing rather than editor metadata, so they are preserved. That said, an animated SVG is more likely to depend on specific structure, so check the preview carefully and confirm the animation still runs.
What about SVG containing embedded raster images?: An embedded bitmap, usually as a data URI inside an image element, is left alone and will dominate the file size. If that is your situation, the real saving comes from optimising the bitmap itself before embedding it, or from referencing it as a separate file.
Should I use SVG or a font for icons?: SVG, in almost all cases now. Icon fonts have accessibility problems, are rendered as text by assistive technology, fail awkwardly when the font does not load, and cannot carry more than one colour. Inline SVG avoids all of that, which is why icon fonts have largely been abandoned.
Is the SVG I paste sent to a server?: No. Parsing, optimisation and preview all run in your browser, and the file is never transmitted, stored or logged.

// How to Use SVG Optimizer

Paste your SVG

Paste the markup, or press the sample button to see the tool working on an example. Files exported from Inkscape or Illustrator benefit most.
Choose what to remove

Enable the categories you want stripped: XML declaration, comments, metadata, editor data, empty groups and default attributes. All are safe for rendering in normal files.
Compare, then copy

Check the preview against the original and read the size comparison. Copy the optimised markup when you are satisfied the image is unchanged.

Category Design