How to compress an SVG file
Paste SVG code into the left box or drop .svg files onto it. The optimized version appears on the right right away, with a preview of each so you can see they match. Adjust the options and the output updates as you go. When you're happy, copy the code, copy it as a data URI for CSS, or download the file.
Drop several files at once to optimize a whole icon set. Each file gets the same settings, and Download all saves them as a ZIP with their original names.
What gets removed
Design tools pack SVGs with things browsers never use. The optimizer strips them out:
- Editor data from Illustrator, Inkscape, Sketch and Figma, including
sodipodiandinkscapeattributes - Comments, XML declarations, doctype and
<metadata>blocks - Hidden or empty elements, and groups that don't do anything
- Default attribute values, unused definitions and redundant whitespace
- Extra decimal places, and path data rewritten in its shortest form
Choosing the options
Decimal places has the biggest effect on size. Three is safe for almost everything. Icons drawn on a small grid usually look identical at one or two. If the visual check reports changes, go back up a step.
Keep viewBox should stay on. Without a viewBox, an SVG can't scale with CSS. Remove width and height goes a step further and lets the SVG fill whatever container you put it in, which is handy for responsive layouts.
Keep IDs matters if your CSS or JavaScript targets elements inside the SVG, or if it's an icon sprite using <symbol> and <use>. Otherwise the optimizer shortens or removes IDs to save space.
Keep title and desc preserves the text screen readers announce. Leave it on for meaningful images like logos and charts, and off for decorative icons.
The visual check
After every change, the tool draws the original and optimized SVGs and compares them pixel by pixel. If they match, you can ship the smaller file with confidence. If rounding has shifted something, it tells you how much of the image changed so you can raise the decimal places before you download.
Frequently asked questions
Is SVG compression lossless?
Mostly. Removing comments, metadata and editor data changes nothing you can see. Rounding numbers is technically lossy, but at three decimal places the difference is far smaller than a pixel. The visual check confirms it for each file.
How much smaller will my SVG get?
Files exported from Illustrator or Inkscape often shrink by 40 to 80 percent. SVGs that were already optimized may only drop a few percent.
Should I also gzip my SVG files?
Yes, if your server doesn't already. SVG is text, so gzip or Brotli compression shrinks it much further when it's sent to browsers. Optimizing first and compressing second gives the smallest transfer.
Why did my SVG break after optimizing?
Usually it's IDs or the viewBox. Turn on Keep IDs if styles or scripts reference elements by ID, and make sure Keep viewBox is on. If shapes look slightly off, raise the decimal places.
Are my files uploaded?
No. The optimizer runs in your browser. Your SVGs are never sent to a server.