SVGO Presets Explained: Optimize SVG Without Breaking the Render
Safe, default or aggressive? Pick the right SVGO preset and optimize SVG for production.
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 in one click — great for 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 — the tool shows before/after bytes and percent saved.
Before optimization
After optimization
An SVG already minified manually or run through SVGO several times may converge: safe ≈ default ≈ aggressive. In that case whitespace minify is enough — no need to rerun aggressive.
Best practices and pitfalls
SVGO aggressive can break downstream workflows: SMIL/CSS animations keyed on IDs, embedded scripts, complex filters, or `<use href="#id">`. 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 asset type and your tolerance for visual risk — not 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: SVGO CLI and CI
The online tool is ideal to explore and validate a preset. Batch on hundreds of SVG, 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 — useful when you have very specific team rules.
svgo (npm CLI)
Reference SVGO command line — 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 <strong>safe</strong> preset runs SVGO in a single pass (<code>multipass: false</code>) and disables structural transforms: no path merging, no shape→path conversion, no ID cleanup, no hidden element removal. Best for client logos, layered illustrations, or animated SVG.
The <strong>default</strong> preset enables <code>multipass: true</code> 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 <strong>aggressive</strong> preset adds <code>floatPrecision: 1</code>, forces <code>mergePaths</code>, and strengthens <code>convertPathData</code>. 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, then compare output and stats. The online optimize SVG tool runs entirely in the browser — 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 — FastMinify preserves them on all three presets. To validate a11y 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.
Related Articles
Check `compose.yml` and `.env` structure before `docker compose up` — no local tooling required.
Catch Docker anti-patterns and format Dockerfiles before CI with browser-based lint and format tools.
Format and validate HCL/Terraform before `terraform plan`. Browser-based tools, IaC best practices and common pitfalls.