How to Optimize an SVG (and Cut Its File Size in Half)

Open an SVG that Illustrator or Inkscape just exported and you’ll often find a tidy little icon wrapped in a mountain of junk — editor metadata, comments, hidden layers, and coordinate numbers with fourteen decimal places. The picture is a few hundred bytes; the file is several kilobytes. Optimizing an SVG strips all that away without changing a single pixel. Here’s what’s actually in there, and how to clean it up in your browser — free, and with nothing uploaded.

Why SVGs get so bloated

SVG is just text — XML describing shapes — so it’s easy to read and easy to fill with cruft. The usual offenders:

Editor metadata. Illustrator, Inkscape, Figma and Sketch each stamp their own namespaces, <metadata> blocks and custom attributes (inkscape:label, sodipodi:namedview, data-name…) into the file. None of it renders; all of it ships.
Comments and the XML declaration. <?xml … ?>,  and friends add bytes for no visual gain.
Over-precise numbers. A path point like d="M10.123456789 20.987654321" carries far more precision than any screen can show. Rounding to two decimals is invisible and saves a surprising amount.
<title> and <desc> you didn’t write. Editors often auto-fill these. (Keep them if you added a real accessible label — drop them if they’re just “Layer 1”.)

Together these commonly make an exported SVG two to three times larger than a cleaned-up version.

What “optimizing” actually removes

A good optimizer is conservative — it shrinks the file while keeping the render pixel-identical. Concretely it:

Deletes comments, the XML declaration and <!DOCTYPE>.
Strips editor-only elements and attributes (Inkscape, Sodipodi, Sketch namespaces, <metadata>, the sodipodi:namedview block).
Rounds coordinate and transform numbers to a precision you choose.
Collapses the whitespace between tags.

It does not re-draw or “simplify” your shapes, so there’s no risk of the icon looking different afterward.

Optimize an SVG in your browser (free, private)

Our SVG tools do all of the above locally — the file is parsed and cleaned on your own device, never uploaded:

Open the SVG tools page and leave the task on Optimize / minify.
Drop your .svg in (or a whole batch of them).
Pick a number precision — 2 decimals is the sweet spot; 1 decimal squeezes out a little more; Keep as-is rounds nothing if you need exact coordinates.
Leave Strip <title> / <desc> on unless you rely on them for accessibility.
Click Optimize. Each file shows its new size and the percentage saved; download one file directly, or many together as a .zip.

A typical editor-exported icon drops 40–60% this way, with zero visible change.

How much precision is safe?

Precision is the one setting that can, in theory, distort a shape — so here’s the rule:

Precision	Effect	Use for
2 decimals	Invisible on any screen	The default — use this
1 decimal	Slightly smaller; fine for most icons	Simple logos, UI icons
3 decimals	Safest, a touch larger	Detailed or very large artwork
Keep as-is	No rounding at all	When exact coordinates matter

For everyday icons and logos, 1–2 decimals is imperceptible. Only reach for “keep as-is” if the SVG feeds something that needs the original numbers (precise CAD-like data, say).

Squeeze it further

Optimizing the file is step one. A few extra wins:

Serve it gzipped/brotli. SVG is text, so it compresses beautifully over HTTP — a cleaned SVG often shrinks another 60–70% on the wire. Most hosts (including Cloudflare) do this automatically.
Simplify at design time. Fewer anchor points and merged paths mean a smaller file before any optimizer runs. Delete hidden layers and off-canvas objects in your editor.
Reuse with <use>. Repeating the same shape? Define it once and reference it, rather than duplicating the path.
Inline small SVGs. For tiny icons, dropping the SVG straight into your HTML/CSS saves an extra network request entirely.

When you want a PNG instead

Sometimes you don’t want a vector at all — an email client, an older CMS, or a social preview needs a raster. You don’t have to leave the page: switch the SVG tools to Rasterise and export a PNG, JPG or WebP at 1×, 2× or 3× (or an exact pixel width). Because SVG is resolution-independent, you can render a crisp 2×/3× image for retina screens from the same source. Keep PNG (or WebP) if you need the transparent background — JPG will fill it white.

Why do this in the browser?

Most “SVG optimizer” and “SVG to PNG” sites upload your file to a server. For a throwaway icon that’s fine; for a client logo or an unreleased brand asset, it’s not ideal. Our SVG tools run 100% in your browser using its built-in XML and Canvas engines, so the artwork never leaves your device — the same way our image, PDF and 3D tools work.

FAQ

Will optimizing change how my SVG looks? No. It removes metadata and rounds numbers within a precision you set; it doesn’t redraw shapes. At 2 decimals the result is pixel-identical.

How much smaller will my SVG get? Editor-exported files typically drop 40–60%. Hand-written or already-clean SVGs will shrink less — there’s simply less junk to remove.

Is it safe to round the coordinates? Yes, at sensible precision. 2 decimals is invisible on screen. Use “keep as-is” only if something downstream needs the exact original numbers.

Can I optimize many SVGs at once? Yes — drop a batch, optimize them all with one setting, and download them together as a .zip.

Are my files uploaded? No. Everything runs locally in your browser; your SVGs never leave your device.

Got a heavy SVG? Open the SVG tools, drop it in, and watch it shrink — free, private, no upload. Need a raster? The same page exports crisp PNG, JPG or WebP at any size.