SVG Optimizer
Strip massive paths and bloat from SVGs to dramatically reduce file sizes.
SVG Optimizer strips editor junk, metadata, and bloated path data from SVG markup so assets ship smaller. Paste into "Raw SVG Input" (placeholder: "Paste your bloated SVG code here...") or click "Upload SVG", and the optimized result appears beside it in "Optimized SVG Output" with Original Size, Optimized Size, and Savings ("{x}% Saved") plus side-by-side "Original Render Preview" and "Optimized Render Preview" panels.
Optimization runs with SVGO's browser build entirely on-device — no server, no upload. "Multipass Optimization" (on by default) re-runs the default plugin set for deeper cleanup. Inputs under 500,000 characters reoptimize live as you type or toggle multipass; anything larger waits for the manual "Optimize Now" button so the UI stays responsive.
How it works
The page calls optimize(input, { multipass, plugins: ["preset-default"] }) from svgo/browser. Auto-run is gated on input.length < 500000; crossing that threshold (or a malformed SVG) means you trigger work with "Optimize Now" and may see a red AlertCircle banner carrying the SVGO error message or "Failed to optimize SVG."
Sizes are measured with TextEncoder byte lengths, and the saved percentage is computed from those byte counts. The download button writes optimized.svg as image/svg+xml; the copy button puts the optimized markup on the clipboard (toast: "Copied to clipboard"). Render previews inject both variants with dangerouslySetInnerHTML on a checkerboard so you can eyeball fidelity.
How to use
- Paste SVG markup into "Raw SVG Input" or click "Upload SVG" to load a file.
- Leave "Multipass Optimization" checked for deeper cleanup (it defaults on).
- For inputs under 500k characters the result reoptimizes live; for larger SVGs click "Optimize Now".
- Compare the "Original Render Preview" and "Optimized Render Preview" panels on the checkerboard background.
- Read Original Size, Optimized Size, and Savings metrics above the output.
- Use the copy icon (title "Copy to clipboard") or the download icon (title "Download optimized SVG") to take the result.
- Toggle Multipass off and on to compare single-pass vs multi-pass results on the same input.
- Click "Clear" to reset input, output, and size metrics.
Tips
- Multipass can shrink already-minified SVGs further by re-running preset-default until savings stop.
- Staying under 500k characters keeps auto-optimization snappy — huge files are manual-only by design.
- The two render previews should look identical; a visual difference means the SVG relies on something preset-default removed.
- A red error banner means the markup is malformed — fix the input and re-run before downloading.
- Pair with an SVG-to-PNG tool after optimizing if you need raster versions of the cleaned asset.
SVG Optimizer FAQ
Is my SVG sent to a server?
No — SVGO runs entirely in the browser via the svgo/browser build.
What does Multipass Optimization do?
It runs SVGO's default plugin set multiple times, squeezing out extra bytes that a single pass leaves behind.
Why did auto-optimization stop?
Inputs of 500000 characters or more wait for the "Optimize Now" button to avoid UI lag.
Does optimization change how the SVG looks?
preset-default removes bloat (metadata, editor leftovers) while preserving rendering — compare the Original and Optimized render previews to confirm.
Can I download the result?
Yes — the download button saves optimized.svg (image/svg+xml) to your device.
Credits
- SVGO — Browser build of the SVG optimizer with multipass