rankato

Tune SVGO plugin-by-plugin

For teams that need control over every optimization step. Toggle any of SVGO's 40+ plugins, tune parameters, save presets, and export to your build config.

Preset:Lossless — no visible change

The SVG Optimizer is the power-user companion to the SVG Compressor. Where the compressor gives you a safe/aggressive toggle, the optimizer surfaces every one of SVGO's 40+ plugins as an individual switch with tunable parameters. Round path precision to 1 decimal instead of 3? Toggle. Preserve viewBox but strip width/height so the SVG scales fluidly? Toggle. Convert stroke to fill? Merge paths only if they share stroke-linejoin? Every knob is here. Save your configuration as a JSON preset, share it with the team, or paste it into your build's svgo.config.js.

Plugin-by-plugin control

The plugin panel groups SVGO's 40+ plugins by intent: Cleanup (removeComments, removeDoctype, removeXMLProcInst, removeMetadata, removeEditorsNSData, cleanupIds), Rendering-safe transformations (mergePaths, convertShapeToPath, convertTransform, collapseGroups), Precision (cleanupNumericValues, convertPathData with a precision slider), and Structural (removeUselessDefs, removeHiddenElems, removeEmptyContainers). Hover any plugin for a doc tooltip; toggle for an instant re-run against your current file.

Preset library and sharing

The tool ships with four built-in presets: Default (SVGO's official defaults), Icon (aggressive precision, viewBox preservation, stripped stroke properties for currentColor icons), Illustration (preserves gradients, filters, and inline styles that icon presets strip), and Print (preserves full metadata, higher precision, no minification). Save your own with the Save as preset button — presets live in localStorage and can be exported/imported as JSON to share with your team.

Live diff and per-plugin size impact

Below the preview, the tool shows every plugin that made a change on your current file along with the exact byte count that plugin saved. Turn plugins on and off and the numbers update instantly — you'll quickly learn which plugins deliver on your particular exports and which ones do nothing. This is invaluable when you're building an svgo.config.js for a build pipeline and want to justify each choice with data.

Export to svgo.config.js

Once you like your setup, click Export config to get a ready-to-drop svgo.config.js file that mirrors your current toggles. Paste it into your build system and every subsequent SVG will get the exact same treatment. The exported config uses the newer functional form (SVGO 3+) and includes comments describing each plugin's effect for reviewability.

Batch mode with per-plugin overrides

In batch mode you can even set per-file plugin overrides — useful when your icon set contains both single-color glyphs (where you want removeAttrs: fill to enable currentColor theming) and multi-color illustrations (where you must preserve fill). Tag files with a folder-style prefix or use the file matcher to apply different presets per group.

Tool FAQs

Everything you need to know about using SVG Optimizer.

What's the difference between the SVG Compressor and the SVG Optimizer?+

The Compressor is a two-button experience: Safe vs. Aggressive. The Optimizer exposes every plugin individually. If you're a solo developer optimizing occasional icons, use the Compressor. If you're building a design system or configuring a build pipeline, use the Optimizer to hand-tune your preset.

Can I break my SVG by turning the wrong plugin on?+

Yes — some plugins are lossy by design (removeAttrs, removeElementsByAttr, removeStyleElement). The preview shows you the result immediately, so you'll spot the damage before downloading. Every SVGO-default plugin is safe; the risky ones are all opt-in.

Is there a plugin to make my SVG themeable with currentColor?+

Yes — enable removeAttrs with the attr regex fill|stroke to strip inline colors, then any color: red on the parent CSS will theme the icon. The Icon preset does this out of the box.

Does the optimizer work with SVG animations?+

Yes, with one caveat — turn off collapseGroups and convertShapeToPath if you animate specific elements by ID, because those plugins can rewrite the structure your animation depends on. The Illustration preset preserves animation-safe structure by default.

Can I run this in my CI?+

Not directly — this is a browser tool. But hit Export config to get a svgo.config.js that reproduces your setup, then run svgo in CI with that config. The results will be byte-identical to what you see here.