SVG files are perfect for logos, icons and simple illustrations because they stay sharp at any size. But SVGs exported from design tools are often much bigger than they need to be. They carry editor data, comments, hidden metadata and numbers with six decimal places. The SVG Optimizer above removes this extra weight, shows you the new size, and lets you compare the result before you download it. It runs in your browser, so your files are never uploaded.
Table of Contents
Why Optimize SVG Files?
An SVG is a text file written in XML. Design tools such as Inkscape, Illustrator and Sketch often add extra information that browsers do not need: editor settings, layer names, comments, unused definitions and very precise numbers. Removing it makes the file smaller, and a smaller file downloads faster, especially on mobile connections.
Because SVG is text, it also compresses well. Most web servers can compress text files before sending them, so the tool shows both the plain size and the gzip size when your browser supports it.
SVG or WebP: Which Should You Use?
| Image type | Best format |
|---|---|
| Logos, icons, simple illustrations, diagrams | SVG, optimized |
| Photos and detailed images | WebP or JPG |
| Screenshots | PNG or WebP |
For raster images, read our guides on WebP vs PNG and the Complete Guide to Image Optimization.
How to Use the SVG Optimizer
- Add your SVG. Drop one or more
.svgfiles into the upload box, or paste SVG code into the text box. Click Try Sample to see how it works. - Choose your settings. The defaults are a safe starting point for most files.
- Compare the previews. Each result shows the original and the optimized image side by side, plus the old and new size.
- Check the code (optional). Click Show Code to read the optimized SVG.
- Copy or download. Click Copy to paste the code into your page, or Download to save the file.
Settings Explained
| Setting | What it does | Risk |
|---|---|---|
| Remove comments | Deletes comments, including generator notes and license text. | Keep them if a license requires attribution. |
| Remove metadata and editor data | Removes <metadata> and data from tools like Inkscape and Sketch, plus unused namespace declarations. |
Low. The image does not change. |
| Remove empty groups and definitions | Deletes empty <g>, <defs> and <style> elements. |
Low. |
| Optimize path data and numbers | Rounds numbers, removes extra spaces and leading zeros, and shortens path commands. | Low at 3 decimals. Lower precision can change shapes. |
| Remove unused IDs | Deletes id attributes that nothing in the file refers to. |
Turn it off if your page CSS or JavaScript targets those IDs. |
| Remove title and desc | Deletes the text descriptions inside the SVG. | Hurts accessibility. Leave it off for meaningful images. |
| Remove scripts and event handlers | Deletes <script> elements, on... attributes and javascript: links. |
Breaks interactive SVGs. Use it for files you did not write. |
| Remove width and height | Removes fixed size so the SVG scales with its container, using the viewBox. |
Changes the default display size. Set the size with CSS. |
Number precision controls how many decimals are kept. Three decimals is a good default. For small icons with fine details, use 3 or 4. For large illustrations, 2 can be enough. Always check the preview after you lower it.
Choosing Safe Settings
- SVG used as an image. If you use
<img src="logo.svg">or a CSS background, the defaults are safe. Nothing outside the file can reach its IDs. - SVG pasted inline in your HTML. Your page CSS or JavaScript may use its IDs and classes. Turn off Remove unused IDs if you do.
- SVG from someone else. SVG can contain scripts. Turn on Remove scripts and event handlers, and avoid pasting untrusted SVG inline. The tool warns you when it finds scripts.
- Meaningful images. Keep
<title>and<desc>, and add alt text where you use the image.
Limitations to Know
- It is not a full SVGO replacement. The tool makes safe, conservative changes. It does not merge paths, convert shapes or rewrite path commands, so very optimized results may need a tool like SVGO.
- Embedded images are not recompressed. If an SVG contains a base64 photo, the photo stays as it is.
- Some files may not open. Files with unusual XML features, such as custom entities, can fail to parse. The tool then skips the file with a message.
- Already-optimized files stay unchanged. If the new version would not be smaller, the tool keeps your original and tells you.
- Gzip sizes are shown only in supported browsers. They are an estimate of what a server may send.
Frequently Asked Questions
Is the SVG Optimizer free, and are my files uploaded?
It is free and needs no signup. Your SVG files are optimized in your browser and are not uploaded to a server.
Will optimizing change how my SVG looks?
It should not at the default settings. Rounding numbers very low can slightly change shapes, so compare the original and optimized previews before you use the file.
Why did my SVG become only a little smaller?
Files that were already exported cleanly have little to remove. Large embedded images or very complex paths also limit the savings. Lower the number precision, if the preview still looks right.
Why does my optimized SVG look broken on my page?
If you use the SVG inline, your CSS or JavaScript may depend on an ID that was removed. Turn off Remove unused IDs and optimize again. Also check whether you removed the width and height without setting a size in CSS.
Should I remove the title and desc elements?
Usually not. They can give meaningful images an accessible description. Remove them only for purely decorative graphics.
Can I optimize many SVG files at once?
Yes. You can add up to 30 files at a time. Each file shows its own result, and the tool shows the total savings.
Final Thoughts
A few seconds of optimization can cut a large share of an SVG's size without changing how it looks. Start with the default settings, compare the previews, and adjust only if you need to. Then keep your original file safe and use the optimized copy on your site.