What does the SVG Optimizer do?
The SVG Optimizer makes an SVG file smaller without changing how it looks. You drop in a file or paste the code. It strips out everything the picture never needed and hands back the same image in fewer bytes. You get a before-and-after preview side by side, a line that tells you exactly how much you saved, and a Download or Copy button. That's the whole tool.
Here's a real case. A 24-pixel home icon exported from a vector editor weighs 333 bytes. It carries an XML prolog, a generator comment, version="1.1", an id="Layer_1" nobody uses, a wrapper group, and a color written as #FF0000. Run it through and the page reads 333 B → 161 B · 52% smaller. The output is one line:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>Home icon</title><path fill="red" d="m12 2 10 10h-3v10H5V12H2Z"/></svg>
Same house. Same red. Half the file. The optimizing happens inside your browser, in a background thread, so the file never leaves your device. There's no account and no upload queue, and it costs nothing.
Whether you searched for how to compress SVG files, minify SVG code or reduce SVG file size, it's the same job underneath, and this page does all three at once.
When you'll want to compress an SVG
Most people land here mid-task, holding one file that's heavier than it should be. The common situations:
- Shipping icons in a web app. A developer gets an icon set from a designer and needs it clean before it goes into the repo. Every icon that renders inline gets sent with every page view, so 170 wasted bytes times 40 icons adds up.
- Inlining an SVG in CSS or HTML. A background pattern or a logo written straight into a stylesheet is text you ship on every request. Smaller text, faster first paint.
- Diagrams in docs and READMEs. Architecture diagrams and charts exported as SVG are often the heaviest files in a docs folder. Trimming them keeps the repo lean and the page quick.
- Cleaning up before code review. Nobody wants to review a diff full of editor metadata. An optimized SVG reads like the drawing it is: a few shapes and their coordinates.
- Checking a file before you publish it. The before-and-after preview is a quick way to confirm an export looks right, and the tool tells you if the file contains scripts.
It works the same for a freelancer polishing their own portfolio, a student building a first website, and a front-end engineer at a big company trimming a design system. One file, one job, done in seconds.
How SVG optimization works
An SVG is a text file. It describes shapes with XML: a path here, a circle there, a fill color. Design apps write that text for their own convenience, not yours. They leave notes to themselves, spell out defaults, and wrap shapes in groups that do nothing.
This SVG optimizer runs SVGO, the open-source engine behind most serious ones, with its standard preset and multiple passes. It keeps making passes until the file stops shrinking. Here's what it did to the icon above:
| In the exported file | In the optimized file | Why it's safe |
|---|---|---|
| XML prolog and generator comment | Gone | Browsers don't read either one |
version="1.1", id="Layer_1" | Gone | Browsers ignore the version; nothing referenced the ID |
width="24px" | width="24" | Pixels are already the default unit |
<g id="Group_1"> around one path | Gone | A group with one child and no styling changes nothing |
fill="#FF0000" | fill="red" | Same color, 4 fewer characters |
M12,2 L22,12 L19,12 … | m12 2 10 10h-3v10… | Relative and horizontal/vertical commands draw the same lines in fewer characters |
| Indentation and line breaks | Gone | Whitespace between tags isn't part of the picture |
Some things are deliberately not removed. The viewBox stays, because without it an SVG can't scale to fit its container. The <title> stays, because screen readers announce it. And if the optimized version isn't smaller than your original, you get your original back, byte for byte, with the message "Already as small as it gets." This tool never hands you a bigger file to make a point.
There's one exception, and it's on purpose. If your file is missing the xmlns attribute, the output gains it even though it costs bytes. A 57-byte file without it comes back at 87 bytes, and the page tells you why. Without xmlns, the SVG won't display when opened on its own or used in an <img> tag.
Precision and Keep IDs, with real numbers
There are two controls. Most optimizers like this greet you with a wall of 40 toggles, each named after an internal plugin, and leave you to guess which ones break your file. This one gives you the two that matter and sets them so the default is safe.
Precision: how many decimals to keep
Coordinates from design apps often run to six decimal places, far finer than any screen can show. Precision rounds them. Here's one curve from a 164-byte file at each setting:
| Precision | Path data | File size | Headline |
|---|---|---|---|
| Original | M10.123456 20.654321 C 30.987654 40.123456, … | 164 B | — |
| 5 | M10.12346 20.65432c20.8642 19.46914 … | 150 B | 9% smaller |
| 3 (default) | M10.123 20.654c20.865 19.47 … | 133 B | 19% smaller |
| 1 | M10.1 20.7C31 40 60.6 80.4 90.8 10.3 | 116 B | 29% smaller |
At 3, a point moves by a fraction of a thousandth of a unit. At 1, it can move by up to a twentieth, which is invisible on a 24-pixel icon but can show on a detailed map or a tiny shape inside a big drawing. That's why the SVG Optimizer defaults to 3. Drag the slider and watch the two previews. If they match, take the smaller file.
Keep IDs: for SVGs that other code talks to
By default, IDs get shortened or deleted. Take a logo with a gradient called brandGradient and a rectangle called logo-mark. With Keep IDs off, the gradient becomes a, the fill becomes url(#a), and logo-mark disappears because nothing inside the file uses it. The output is 230 bytes. With Keep IDs on, both names survive and the output is 269 bytes.
Those 39 bytes are worth paying if your stylesheet says #logo-mark { fill: … } or your JavaScript looks the element up by ID. Otherwise, leave the box unchecked.
When an optimized SVG looks wrong, and what to try first
If something broke after you tried to optimize SVG files here, don't worry. It's almost always one of these, and each one takes seconds to fix.
- Your CSS or JavaScript stopped styling the icon. This is almost always IDs. Turn on Keep IDs and download again.
- A small detail shifted or a curve looks lumpy. Precision is too low for that drawing. Move it back up to 3, or to 4 for fine illustrations.
- The page says "That's not an SVG." The file is either a renamed PNG or JPG, or the markup starts with something other than an
<svg>element. Re-export it as SVG from your design app. - The page names a syntax error on a line. The XML itself is broken, usually an unclosed tag or a missing quote. Open the file in a text editor, fix that line, and drop it back in.
- It says "Still working." One enormous traced path, the kind you get from auto-converting a photo, can take a minute or two to process. The page stays usable while it works.
Keep your source file. Treat the optimized SVG like a compiled build, not the original. Layer names, editor settings and groups are gone, so if you need to edit the drawing later, open the file you exported from your design app, change it there, and optimize again.
Files that contain <script> tags or onclick handlers are optimized with those left in place, and the page says so. Removing them would change what the file does, and that's a different job. The previews are drawn as images, which browsers never run scripts in, so nothing inside your file runs on this page.
Related image tools
An SVG optimizer only helps vector files. If you're working with photos or screenshots, the image compressor shrinks JPG, PNG and WebP files. The WebP and AVIF image compressor re-encodes a photo into a newer format, which usually gets it smaller still. Animated files have their own GIF compressor.
If you're inlining a small icon into CSS, optimize it here first, then run the result through image to Base64 to get a data URI. Exported a PNG copy for a place that doesn't accept SVG? The image resizer sets it to exact pixel dimensions.
Every tool on Microapp works like this one: open it, do the job, leave. 10% of every dollar Microapp earns goes to charity, off the top, audited quarterly.
Frequently asked questions
Is it worth optimizing an SVG if my server already gzips it?
Yes. Gzip and optimization stack. The home icon above is 258 bytes gzipped before optimizing and 152 bytes gzipped after. Gzip squeezes repeated text, but it can't delete a comment or round a coordinate. It just compresses them.
Will the optimized SVG still open in my design app?
It will open, because it's a valid SVG. But it won't open the way you left it. Layer names, editor-only settings and empty groups are gone, and paths may be merged. Edit the original export and optimize again whenever the drawing changes.
Can I optimize a whole folder of SVGs at once?
Not today. The tool handles one file at a time, which covers the common case of fixing the icon in front of you. There's no daily file limit, though, so you can run as many files through it as you like, one after another.
Why is the optimized SVG all on one line?
Line breaks and indentation are bytes, and the picture doesn't need them. If you want to read or hand-edit the output, paste it into your code editor and run its format command. The file stays valid either way.
Can it turn a PNG or JPG into an SVG?
No. Converting a pixel image into vector shapes is called tracing, and it's a different job. If you drop in a raster image here, the page tells you it isn't an SVG. To make a photo smaller, use the image compressor instead.
How do I use the optimized SVG as a CSS background?
Click Copy to grab the optimized markup, or Download to save the file. For a background-image, you can reference the file by URL or embed it as a data URI. Optimizing first matters more for data URIs, because every byte of the SVG ends up in your stylesheet.