⚡ SVG Optimizer
SVGO in your browser — editor junk out, paths merged, icons half their size
Optimizer
Presets on a Real Editor-Exported Icon — Verified Numbers
| Preset | Bytes out (of 1,756) | Saved | What it adds / changes |
|---|---|---|---|
| Safe (SVGO default) | 552 | 68.6% | Metadata, comments, editor namespaces, unused defs, empty groups out; precision 3; paths merged |
| Aggressive | 484 | 72.4% | + removes title & desc, drops width/height (viewBox scales) |
| Safe + precision 1 | 527 | 70.0% | Coordinates to 1 decimal (40.123456 → 40.1) — still clean at icon sizes |
| Optimize + pretty-print | 588 | 66.5% | Same removals, reformatted with 2-space indent for humans |
Generated by running this page's own engine on this page's own test icon — click "Load test icon" and reproduce any row yourself. Your files' numbers depend on how much cruft the export carried; clean hand-written SVG saves less.
What SVGO Removes (and What It Won't Touch)
| Removed by default | Kept by default |
|---|---|
| XML declaration & DOCTYPE | viewBox — scaling depends on it |
| Generator comments, hidden comments | <title> — accessibility label |
| Editor namespaces (inkscape:, sodipodi:, svgjs:) & their elements | <desc> — long descriptions |
| Metadata blocks, editor-namedview elements | Text content — it's real content |
| Empty groups, empty text, unused defs (gradients, clips) | IDs that other elements reference |
| Default attribute values, trailing zeros in numbers | width/height (droppable via Aggressive) |
| Redundant path commands; converts absolute → relative where shorter | Scripts and event handlers — SVGO is an optimizer, not a sanitizer |
That last row matters: never paste an SVG from an untrusted source into a page — or this preview — without sanitizing. Our before/after previews render through <img> tags, which browsers isolate so embedded scripts can't run.
How SVG Optimization Works
An SVG is a small XML program describing shapes, and design tools export it defensively: everything the editor tracked — layer names, namespaces, metadata, six-decimal coordinates — comes along for the ride. Optimization removes what no renderer uses, then shortens what's left. Two phases, worth understanding separately because they fail separately.
Phase one: remove the invisible
The XML declaration and DOCTYPE (browsers don't need them), comments, editor namespaces and their elements, <metadata> blocks, empty groups left over from the layers panel, and unreferenced <defs> entries. This phase is risk-free: if nothing references it, no renderer misses it. On our test icon it's the bulk of the win — namespaces, metadata, two unused defs, an empty group, and every wrapper <g> the editor added.
Phase two: shrink the visible
Path data. A coordinate like 40.123456 becomes 40.123 — the third decimal is a thousandth of a unit, invisible at any icon size — absolute commands become relative where shorter (M 40.123 180.235 L 200.346 180.235 becomes M40.123 180.235h160.223), and adjacent shapes merge into one path when they share styling: the test icon's two truck-rectangle paths collapse into a single d attribute with two subpaths. Push precision to one decimal and curves can distort — that's why it's a separate option, with the preview one click away.
How to use it
- Paste your SVG, or load the test icon to see the machinery work on known input.
- Pick the preset: Safe for anything shipped to production; Aggressive when the SVG is inline and sized by CSS; Pretty when a human will read the markup afterward.
- Compare the previews — they should be indistinguishable. If they're not, raise precision back to 3.
- Copy or download. The output is a drop-in replacement wherever the original lived.
A worked example
The test icon: a delivery-truck pictogram exported with realistic cruft — an XML header, a generator comment, three editor namespaces, a namedview element, a metadata block, two unused defs (a gradient and a clip path), an empty group, three wrapper groups, and coordinates to six decimals. 1,756 bytes. Safe preset output: 552 bytes, 68.6% smaller, one line long. What left: every namespace attribute, the metadata, both unused defs, the empty group, all three wrappers (their single paint attribute hoisted to one shared group), and both rect-paths merged into one. What stayed: the viewBox, the <title>, the three wheels, and the text element. Notably the width="512.000000pt" became width="682.667" — the default preset converts physical units to user units (512 pt × 96⁄72 = 682.667), which renders identically and drops the pt dependency. Same icon, Aggressive preset: 484 bytes and no width/height at all, sizing handed to the viewBox.
Frequently Asked Questions
How do I optimize an SVG file?
Run it through SVGO, the optimizer every modern build pipeline uses. It removes the invisible weight first — editor metadata, comments, empty groups, unused definitions, default attributes — then trims the visible weight, rounding path coordinates and merging shapes. On an editor-exported test icon (1,756 bytes of Inkscape-style cruft), the default preset outputs 552 bytes, a 68.6 percent reduction, with the image pixel-identical.
Why is my SVG file so big?
Usually because a design tool exported everything it knows, not just what the image needs: a %PDF-style XML header, generator comments, editor namespaces and metadata blocks, empty layer groups from the layers panel, unused gradients and clip paths left in defs, and path coordinates computed to six decimal places (40.123456) when displays render two or three at most. Design-tool exports commonly carry more metadata than drawing.
Does optimizing change how my SVG looks?
Not visibly, when you use the default preset. It removes only redundant data and truncates coordinates past three decimals — under a tenth of a pixel at icon sizes. The aggressive preset goes further (optional title/desc removal, dropping width/height attributes in favor of the viewBox) and is equally safe for inline use, but check the preview: any optimizer set to extreme precision (0 decimals) will visibly distort curves.
What is the difference between the presets?
Safe runs SVGO's default preset: metadata, comments, empty containers, and unused defs removed, groups collapsed, paths merged, precision to 3 decimals — 68.6 percent off the test icon. Aggressive adds title/desc removal and drops the width/height attributes (sizing then comes from the viewBox, the right choice for responsive inline SVG) — 72.4 percent off the same file. Pretty optimizes then reformats with 2-space indentation for human reading — 66.5 percent off.
Should I keep or remove the viewBox?
Keep it, always. The viewBox is what lets an SVG scale — remove it and the image collapses to a fixed size or refuses to scale in some contexts. SVGO's default keeps it for exactly this reason (the plugin that strips it, removeViewBox, is disabled out of the box). Width/height attributes are the removable ones once a viewBox is present, and only when you style the SVG's size yourself.
Does my SVG get uploaded anywhere?
No. The SVGO engine loads as a browser module from a CDN and runs entirely in the page. Your icons, logos, and illustrations never leave your machine, and the tool works offline once loaded.