SVGO Presets Explained: Optimize SVG Without Breaking the Render
Safe, default or aggressive? Pick the right SVGO preset, optimize SVG for production and avoid visual regressions in the browser.
Why SVGO presets matter
A Figma or Illustrator export is often verbose: editor metadata, excessive decimal precision, redundant IDs. The online SVG minifier strips whitespace and comments, which suits a quick cleanup. The SVG optimizer (SVGO) goes further with three presets, safe, default and aggressive, that enable or disable SVGO plugins based on visual risk. Everything runs in the browser on the online SVG tools hub. For the big picture, see the complete SVG optimization guide.
Real-world size impact
On a 24×24 icon with metadata and over-precise paths, the three presets produce different gains. Exact numbers vary by file, and the tool shows before/after bytes and percent saved. The figures below are illustrative.
Before optimization
- File size
- ~4.2 KB
After optimization
- File size
- safe ~3.4 KB · default ~2.1 KB · aggressive ~1.6 KB
An SVG already minified by hand or run through SVGO several times may converge: safe ≈ default ≈ aggressive. In that case whitespace minify is enough, so there is no need to rerun aggressive.
Best practices and pitfalls
The default and aggressive presets can break downstream workflows because cleanupIds may remove or shorten IDs: CSS or JS selectors, sprite references such as `sprite.svg#icon`, SMIL animations keyed on IDs. Aggressive also merges paths and rounds coordinates harder, which can affect complex shapes and filters. In those cases stay on safe or optimize manually.
In production, lock the preset in your pipeline (svgo npm, Vite/Webpack plugin) and align it with what you validate in the browser. See also the minification in CI/CD article for broader automation.
Preset comparison table
The right preset depends on the asset type and your tolerance for visual risk, not on the percentage alone.
Preset
When to use it
Ramp up pressure gradually rather than starting aggressive.
When the browser tool is enough
No need to install SVGO to compare three presets on a file received by email.
Limits of the SVGO CLI and CI
The online tool is ideal to explore and validate a preset. Batch processing of hundreds of SVGs, pre-commit integration, and custom plugin config remain the domain of SVGO npm or bundler plugins.
Once you pick a preset in the tool, reproduce the same logic (safe/default/aggressive) in your `svgo.config.js` to avoid drift between preview and build.
SVGO CLI and ecosystem
FastMinify exposes three opinionated presets. Upstream SVGO offers plugin-level granularity, which is useful when you have very specific team rules.
svgo (npm CLI)
The reference SVGO command line, using the same engine as the FastMinify browser optimizer.
Pros:
Cons:
vite-plugin-svgo / bundler plugins
Optimize on import, handy for React/Vue components.
Pros:
Cons:
FastMinify minify-svg
Fast whitespace cleanup without deep SVGO restructuring.
Pros:
Cons:
Minify SVG vs SVGO optimize
Quick minify targets syntactic noise (whitespace, comments, obvious redundant attributes). SVGO optimization restructures markup: path simplification, shape merging, ID cleanup, with possible visual impact if you push too far.
The safe preset runs SVGO in a single pass (multipass: false) and disables structural transforms: no path merging, no shape→path conversion, no ID cleanup, no hidden element removal. A good fit for client logos, layered illustrations or animated SVG.
The default preset enables multipass: true and lets SVGO apply preset-default with viewBox/title/desc guardrails. This is the daily driver for UI icons, pictograms, and marketing assets after a visual check.
The aggressive preset adds floatPrecision: 1, forces mergePaths, and strengthens convertPathData. Size often drops further, but fine details (curves, corners) may shift slightly. Reserve it for simple icons, sprites, or SVG without animation or CSS/JS ID dependencies.
Using the FastMinify SVGO optimizer
Paste your SVG, pick the preset in the options panel, press Optimize, then compare output and stats. The online optimize SVG tool runs entirely in the browser, and nothing is sent to a server.
For whitespace-only cleanup without touching paths, the SVG minifier is faster. Chain minify then optimize default if you want both passes.
Informative icons should keep title and desc, and FastMinify preserves them on all three presets. To validate the accessibility structure, use validate SVG online before delivery.
Conclusion
SVGO presets encode a size vs visual risk tradeoff. Start with safe on sensitive assets, adopt default for daily flow, and reserve aggressive for simple icons where every byte counts. FastMinify lets you compare all three modes locally before locking config in CI.
Optimize your SVG now
Related Articles
HTTP/2 and HTTP/3 change how files travel, not how big they are. Measured sizes, compile times and bundling tests show what minification still saves.
Convert a Unix epoch to a readable date and back, tell seconds from milliseconds, and avoid time zone, JWT and clock change traps, all in your browser.
Read a cron expression field by field, check its next runs in UTC or local time and avoid traps with steps, time zones and dialects, all in your browser.