SVG Optimizer – smaller SVG files you can trust
Design tools write SVG for themselves, not for the web. A two-shape icon exported from Inkscape, Illustrator, Sketch or Figma often carries more bookkeeping than drawing. This SVG optimizer runs SVGO 4.1, the standard SVG minifier, in your browser. It then checks the result instead of asking you to trust it: both files are rendered and compared pixel by pixel, a waterfall chart shows which optimization saved which bytes, and guards catch the ways an optimizer can quietly break links, accessibility or CSS hooks.
Why editor exports are bloated
Most of an exported file is not artwork. Common sources of SVG bloat are:
- Editor namespaces such as
inkscape:,sodipodi:and Illustrator'si:attributes, which store layers, zoom level and guides. They are often the largest single saving. - Metadata and comments: RDF licence blocks, "Created with" comments and XML declarations.
- Over-precise numbers like
32.0000001orstroke-width:1.00000000, where the trailing digits change nothing on screen. - Redundant structure: wrapper groups with no attributes, empty
<defs>, and styles repeated on every element.
How path data gets shorter
The d attribute of a <path> is usually the bulk of real artwork, and SVGO rewrites it in its shortest form. Absolute commands become relative ones when that saves characters, so L 52 22 after a point at 12,22 becomes h40. Repeated command letters are dropped (implicit repeats), separators disappear where a minus sign or decimal point already separates numbers, and curve runs that trace a circle can collapse into arcs. A rectangle written as <rect x="12" y="22" width="40" height="20"/> becomes <path d="M12 22h40v20H12z"/>.
Choosing precision for your viewBox
Precision is the one setting that trades quality for size. Rounding to p decimals moves a point by up to ±0.5 × 10^-p user units, and what that means on screen depends entirely on the viewBox. At precision 1, a 24-unit icon drawn 512 px wide can shift by about 1 px, while a 10,000-unit map would not move visibly even at precision 0. The hint under the slider does this conversion for your file, and Explore precision plots bytes against changed pixels so you can see where quality starts to drop.
| viewBox | Typical file | Starting precision |
|---|---|---|
0 0 24 24 | UI icon | 2–3 |
0 0 512 512 | Logo or illustration | 1–2 |
0 0 10000 6000 | Map or technical drawing | 0–1 |
0 0 1 1 | Normalised path data | 4–5 |
Presets: Safe, Balanced and Maximum
Balanced is exactly SVGO's preset-default, so results match the SVGO command line. Safe is for animated, scripted or CSS-styled SVGs and sprites: it keeps IDs, classes, groups and element types and only removes junk and compacts numbers. Maximum adds plugins that convert styles to attributes, remove width/height and reuse repeated paths, which can change how the SVG sizes itself, so check the preview.
Inline SVG, .svg file or data URI?
An inline SVG in HTML can be styled and scripted by the page, but it is not cached separately. A .svg file used in <img> or CSS is cached and isolated, which also means page CSS can't reach inside it. A data URI saves a request for small icons. The URL-encoded url("data:image/svg+xml,…") form is usually shorter than base64, which always adds about 33%. For encoding arbitrary files rather than optimized SVG, use the Data URI Generator.
Accessibility is kept by default
A meaningful SVG should have a <title>, role="img" and often aria-labelledby pointing at the title and description IDs. SVGO's defaults remove role and rename or drop those IDs, which leaves screen readers with nothing to announce. With Keep accessibility on, the tool keeps titles, meaningful descriptions, the role attribute and every ID that an ARIA attribute references.