Optimize an SVG in your browser and copy it as an optimized file, a data URI, or a CSS background — powered by SVGO, with nothing uploaded. Drop or paste an icon, tune the settings, and grab the smallest inline form for CSS, HTML, or your design system.
How it works
The tool loads SVGO — the standard SVG optimizer, the same engine behind SVGOMG — once from a public CDN, then runs entirely on your device. It strips editor metadata, comments, and redundant data, and rounds coordinates to a precision you choose. The optimized markup is then offered in four ready-to-use shapes, side by side with a live preview and the before/after size.
Steps
- Drop an
.svgfile onto the uploader, or paste your SVG code into the source box. - Adjust the optimization toggles — lower Precision for smaller files, or leave the safe defaults.
- Watch the preview and the size reduction update live.
- Copy the shape you need (SVG, data URI, or CSS) or download the optimized
.svg.
Output shapes — which to copy
| Output | Best for | Notes |
|---|---|---|
| Optimized SVG | Committing to a repo, icon systems, <img src> | Cleanest source; download or copy |
| Data URI (URL-encoded) | CSS background-image, inline HTML | Smallest data URI for SVG (~20–30% under Base64) |
| Data URI (Base64) | Maximum compatibility, older tooling | Larger, but never needs escaping |
| CSS snippet | Pasting straight into a stylesheet | Wraps the URL-encoded data URI in background-image |
When to use URL-encoded vs Base64
SVG is text, and Base64 inflates text by about a third. For SVG specifically the URL-encoded data URI is smaller and just as valid in CSS and HTML, so it is the default choice for a CSS background. Reach for Base64 only when a build tool or platform mangles the reserved characters in a URL-encoded URI.
Optimization settings
| Setting | Default | What it does |
|---|---|---|
| Precision | 3 | Coordinate/number precision (0–8). The biggest size lever; too low distorts curves |
| Multipass | On | Re-runs passes until the output stops shrinking |
| Remove comments / metadata | On | Drops <!-- --> and <metadata> / editor cruft |
| Clean up IDs | On | Minifies and drops unused ids |
| Remove viewBox | Off | Removing it breaks responsive scaling — the classic SVGO footgun |
| Remove width/height | Off | Lets CSS size the icon via viewBox |
Remove <title> / <desc> | Off | Kept by default for accessibility |
| Sort attributes | Off | Deterministic attribute order for better gzip and diffs |
Example
A 2.1 KB icon exported from a design tool — full of editor metadata, comments, and 6-decimal coordinates — typically drops to well under 1 KB with the defaults, then to an inline data:image/svg+xml,... string you can paste directly into a CSS rule with no extra request.
Private by design
Your SVG never leaves your browser. Only SVGO's code is fetched from the CDN (once, then cached); the markup you paste or drop is optimized locally, so it is safe for internal icons and unreleased brand assets.