SVG Optimizer
Shrink an SVG by removing only what is safe to remove, like comments and metadata. Runs in your browser with no upload.
Loading the tool…
User reviews
No reviews yet. If you’ve used this tool, be the first to leave one.
SVG Optimizer: complete guide
Walk through the steps and examples, or jump straight to the topic you need.
At a glance
- What is removed
- Comments, titles, descriptions and metadata, and editor-only attributes and namespaces.
- Whitespace
- Whitespace between tags and indentation (optional).
- Numbers
- Choose decimal places from 0 to 6 (optional).
- What is kept
- ids, rules inside <style>, anything inside <script>, and text content.
- Self-check
- It compares and tells you whether the drawing elements and attributes are unchanged.
- Check by eye
- It draws the before and after side by side.
- Safe preview
- It is drawn only as a picture, so scripts inside the SVG do not run.
- Where it runs
- Your file is not sent to a server.
How to use SVG Optimizer
Add your SVG
Drag a file in or paste the content. If it does not start with <svg>, you are told.
Choose what to remove
You can turn comments, titles and metadata, editor information and whitespace on and off separately. You also set the decimal places.
Compare before and after
The two pictures appear side by side. Please check by eye that they are the same. The tool also checks that the drawing elements are unchanged and tells you.
Take it with you
Copy it or save it as .svg. It also tells you how much it shrank and how many of what it removed.
What it’s good for
It removes only what is safe to remove
SVGs exported from Illustrator or Inkscape come with attributes and namespaces used by the editor, titles and metadata, and indentation. None of this is used to draw the picture, so removing it gives the same visible result. On the other hand, ids, rules inside style, and scripts are left as they are, because there is no way to tell where they are referenced. Trimming a few more bytes and changing the picture is far worse.
It lets you check by eye that nothing changed
It draws the before and after side by side. The tool also compares by itself whether the drawing elements and attributes are unchanged and tells you, but the final judgment is surest by eye. The preview draws it only as a picture, so even if the SVG contains a script, it does not run.
Worked examples
An icon exported from Inkscape
An SVG with inkscape:version, sodipodi:namedview, <title> and indentationRemoves 2 editor-only attributes, 1 title and 1 comment, and the size shrinksReducing decimal places
cx="60.000000" cy="60.000000" r="50.0000"cx="60" cy="60" r="50"What is removed and what is kept
Swipe the table sideways to see the rest.
| Item | Handling | Reason |
|---|---|---|
| Comments, titles, metadata | Removed | They are not used to draw the picture. |
| Editor-only attributes | Removed | Information used only by Inkscape and similar editors. |
| id | Kept | CSS, use and gradients may reference it. |
| Rules inside <style> | Kept | Touching the names breaks the picture. |
When the result isn’t what you expected
The picture looks different
Try raising the decimal places. If it still differs, tell us about that SVG and we will fix it. Do not use the result; use the original.
It barely shrinks
The SVG may already be tidy. Most of a large SVG is path data, and this tool does not change the shape of the paths themselves.
It says it is not an SVG
Check that the content starts with <svg>. Image files (PNG, JPG) are not handled.
It says a script is included
There is a <script> inside the SVG. It can be risky when you put it on the web, so please check the content. This tool does not touch what is inside it.
Key terms
- Namespace
- The group that tags and attributes belong to, declared with xmlns. Some are editor-only.
- viewBox
- An attribute that sets the coordinate range the picture is drawn in.
- Path
- An element that draws a shape by writing coordinates one after another in the d attribute.
- Lossless
- Reduction that does not change the visible result.
SVG Optimizer FAQ
Why does it not reduce more?
There are ways to reduce more, but the risk of changing the picture grows with them, for example removing ids or merging style rules. This tool chose to remove only what is certain.
Does reducing decimal places change the picture?
It can change very slightly. For small pictures like icons, 2 decimal places are enough, but for large pictures or precise curves, try more places and compare in the preview.
Is my file uploaded to a server?
No. It is processed only inside this browser.
Does it shrink as much as SVGO?
It shrinks less than that, because it deliberately skips processing that carries risk. In return, you worry less about the picture changing.
Can I do several files at once?
For now it handles one at a time. Comparing before and after by eye is the point, so looking at one at a time is safer.
Does it work on SVGs with animation?
Yes. Elements such as animate and their attributes are left as they are. Please check in the preview that the motion is the same too.
