SVGO Config File Setup
An svgo.config.js file lets a project define reusable, version-controlled optimization rules applied consistently to every SVG.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Structuring an svgo.config.js File
An svgo.config.js file exports an object with a plugins array listing which optimization plugins to enable, disable, or configure with custom parameters, letting a team check the configuration into version control so every developer and CI run applies identical SVG optimization rules rather than relying on inconsistent default settings.
- The exported object's plugins array controls which optimizations run
- Version-controlling the config ensures identical rules across a team and CI
- Avoids inconsistent optimization results from relying on undocumented defaults
Common Config Adjustments Worth Making
Many teams disable the removeViewBox plugin since keeping viewBox is essential for responsive scaling, and adjust the cleanupIDs plugin carefully when SVGs contain IDs referenced by external CSS or JavaScript, since SVGO's default aggressive optimization can otherwise strip attributes a project actually depends on.
- Disabling removeViewBox preserves the viewBox needed for responsive scaling
- Adjusting cleanupIDs prevents breaking IDs referenced by external CSS or JS
- Default aggressive optimization can strip attributes a project actually depends on
Frequently Asked Questions
Where should svgo.config.js live in a project?
Typically at the project root alongside other tool configs like package.json, so both the SVGO CLI and any build tool integration pick it up automatically.
Why would I disable a plugin like removeViewBox?
Removing the viewBox breaks an SVG's ability to scale responsively via CSS width and height, so most projects explicitly keep this plugin disabled.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG