SVG Optimizer
Minify and clean SVG files with SVGO, in batches. Runs in your browser.
About this svg optimizer
This SVG optimizer shrinks SVG files without changing how they look. It's for web developers and designers who export icons and illustrations and want them smaller before they ship.
Paste code or drop in as many .svg files as you like. The tool strips editor leftovers, rounds long numbers and rewrites path data in a shorter form. You see the new size, the saving and a before and after preview right away. The built-in sample, a badge saved from a vector editor, drops by 72%.
Under the hood it's SVGO 4, the open-source optimizer most build tools use, running in your browser. Nothing is uploaded. Previews are drawn as images, so a script hidden in someone else's SVG never runs on the page.
Features
SVGO 4 with every plugin exposed
All 34 default optimizations plus 13 optional ones, each with a plain-English label, sorted into six groups. Reset all puts the defaults back.
Precision from 0 to 8 decimals
Pick how many decimal places coordinates keep. Multipass repeats the run, up to 10 times, until the file stops getting smaller.
Side-by-side preview
Original and optimized graphics sit next to each other on a checkerboard, so a shifted curve or a lost gradient is easy to spot.
Raw and gzipped sizes
You get the byte count, the percentage saved and the gzipped size of both versions. Gzip is roughly what your server actually sends.
Batch files to a ZIP
Add a whole icon folder. Every file uses the same settings, shows its own saving and can be previewed. Download all saves one ZIP.
Warnings before things break
If a file has scripts, animation, embedded HTML or a style block whose IDs might be used elsewhere, the tool says so and tells you which switch to check.
How to use the svg optimizer
- 1Paste SVG code or drop one or more .svg files.
- 2Adjust precision and the optimizations, and compare the before and after previews.
- 3Copy the optimized code, download the .svg, or download all files as a ZIP.
When to use it
Icons for a website
Drop in 40 exported icons, download the ZIP and commit leaner files in one go.
Inline SVG in HTML or React
Turn on Remove xmlns and paste compact markup straight into a component. Then minify the CSS and JavaScript around it too.
SVG in CSS backgrounds
Optimize a small icon first, then encode it as a data URI for a background-image rule.
Cleaning editor exports
Strip the metadata, comments and namespaces that vector editors add to every file they save.
What does an SVG optimizer remove?
Vector editors save plenty that a browser never needs: editor namespaces, document metadata, comments, empty groups, hidden shapes and coordinates like 120.0000000. The default switches remove or shorten all of it.
Then the markup that's left is rewritten. #FFFFFF becomes #fff. Transforms get merged. IDs shrink to single letters. Path data switches to relative commands and drops every character it can. A path such as "M 24.000000,168.000000 L 84.000000,92.000000" ends up as "m24 168 60-76".
- Kept by default: the viewBox, the title and any real description, so the graphic still scales and screen readers can still name it.
- Off by default: removing the title or viewBox, deleting scripts or raster images, and turning style rules into attributes.
What precision should I use for SVG numbers?
Precision is how many decimal places each number keeps. Icons drawn on a 24 × 24 grid nearly always look identical at 1 or 2. Detailed illustrations, or graphics with a tiny viewBox like 0 0 1 1, may need 4 or more.
The default is 3. It's safe for almost everything. If a curve looks off in the optimized preview, raise the precision one step at a time until it matches.
Can optimizing break an SVG?
Rarely, and almost always because something outside the file depends on its exact markup. Here's what to watch for:
- CSS or JavaScript that targets IDs or classes inside the SVG: turn off Shorten IDs and Inline styles.
- Animation: check the preview, and turn off Collapse useless groups if a group is animated.
- Responsive sizing: keep the viewBox. Remove width and height instead if you want CSS to set the size.
- Old tools that only understand SVG 1.1: leave Replace xlink:href with href off, because the plain href attribute is an SVG 2 feature.
Why use Mavros
| Mavros | Typical upload sites | |
|---|---|---|
| Files at once | Many files, downloaded as a ZIP | One file at a time |
| Control | 47 labelled switches, precision and multipass | A few fixed options |
| Input | Paste code or drop files | Upload only |
| Size report | Raw and gzipped sizes | Raw size only |
| Preview safety | Drawn as an image, scripts never run | Markup injected into the page |
| Privacy | Optimized on your device | Files sent to a server |
Tips
- Leave pretty print off for production. It adds line breaks and indentation, so the file grows.
- Keep your originals. Optimized files are harder to edit in a vector editor.
- If something looks different, switch off one group at a time to find the plugin responsible.
- Need a PNG for an email or a document? Convert the SVG to PNG after optimizing.
Questions
How do I reduce the size of an SVG file?
Paste the code or drop the file in and the defaults do the rest. They remove editor data and metadata, round numbers to 3 decimals and shorten paths. Then copy the result or download it.
How much smaller will my SVG get?
Files straight from a vector editor often shrink by 40 to 80 percent. Hand-written or already optimized files may only lose a few percent, because there's little left to remove.
Will optimizing change how my SVG looks?
Normally no. Very low precision can distort curves, so compare the two previews and raise the precision if anything moves.
Should I remove the viewBox?
Usually not. Without a viewBox the graphic can't scale to fit its container. If you want CSS to control the size, remove width and height instead and keep the viewBox.
Why did my CSS or JavaScript stop working after optimizing?
The optimizer probably shortened IDs or moved styles your code depends on. Turn off Shorten IDs and Inline styles from <style>, then run it again.
Is this the same as SVGO?
Yes, it runs SVGO 4 with the same default preset. Each switch maps to an SVGO plugin, so the same settings give the same output as the command line.
Can I optimize many SVG files at once?
Yes. Choose or drop several files and they all use the same settings. Each row shows its saving, and Download all (ZIP) saves them together with -min added to each name.
Is it safe to open SVG files from other people?
Yes, for viewing here. Previews are shown as images, and browsers never run scripts inside an image. To strip scripts from the file itself, turn on Remove scripts and event handlers.
Can I open SVGZ files?
No. SVGZ is a gzip-compressed SVG. Unzip it to a plain .svg file first, then optimize that.
Are my SVG files uploaded?
No. The optimizer runs in your browser, and your files never leave your device.