SVG Optimizer
Shrink SVG file size in one click — strips comments, metadata, and excess whitespace, then reports exactly how many bytes you saved.
Paste SVG markup and get a cleaned version instantly: the optimizer removes the XML prolog, DOCTYPE, comments, <metadata> blocks, and collapses whitespace between tags. A before/after byte readout shows exactly what you saved, with each applied step listed for transparency.
Lightweight optimizer: removes comments, metadata, and excess whitespace. For maximum compression (path simplification, precision reduction), use SVGO.
How to use this calculator
- Paste your SVG markup into the input area (a sample is pre-loaded).
- Click Optimize SVG.
- Review the byte stats: original size, optimized size, and bytes saved.
- Check the applied-steps list to see exactly what was stripped.
- Copy the optimized output into your HTML, CSS, or asset file.
Worked example
A 61-byte SVG containing a comment and indentation optimizes down to 41 bytes — 20 bytes (32.8%) saved — with the markup rendering pixel-identically.
Frequently Asked Questions
What does this optimizer actually remove?
The XML prolog, DOCTYPE declarations, all <!-- comments -->, <metadata> blocks, and whitespace between tags, plus leading/trailing whitespace. These are safe removals: they never change how the SVG renders. It deliberately does not touch paths, ids, or styling, so nothing breaks.
How is this different from SVGO?
SVGO is a full build-tool optimizer that rewrites paths, merges shapes, and reduces numeric precision for maximum compression. This tool is a lightweight, in-browser cleaner for the quick wins — comments and whitespace — with zero setup. For production icon pipelines, run SVGO; for a quick paste-and-ship cleanup, this is faster.
Will optimizing change how my SVG looks?
No. Everything removed is non-rendering: comments, metadata, and formatting whitespace between tags. The visual output is pixel-identical. If your SVG uses whitespace-sensitive <text> content, check the result — collapsing whitespace between tags does not touch text nodes, but verify anyway.
Why optimize SVGs at all?
SVGs from design tools are full of editor metadata, comments, and pretty-printed indentation that can double or triple file size. Smaller SVGs mean faster page loads, less bandwidth, and better Core Web Vitals scores — which feed into search rankings. Inline SVGs in HTML benefit the most, since every byte ships with the page.
Is my SVG uploaded anywhere?
No. Optimization runs entirely in your browser — your markup never leaves the page. That makes it safe for proprietary icons and unreleased designs you would never paste into a server-side tool.