SVG Optimizer
Clean, minify, and optimize SVG files by removing unnecessary metadata, comments, and whitespace. Runs entirely in your browser.
SVG Input
Optimized SVG
How to optimize an SVG
Paste or upload an SVG, strip the clutter, and copy or download the cleaner version.
- 01
Paste the SVG code or upload the file
Either works. The original size in kilobytes and characters appears straight away.
- 02
Optimize and compare
You'll see the old size, the new size and the percentage saved. The result replaces nothing until you copy or download it.
- 03
Check it still looks right
Open the downloaded file in a browser, or paste the code into your page, before replacing the original. Keep the original as your editable source.
What the optimizer removes, and what it leaves
The optimizer is a set of safe clean-up rules that run in your browser. It strips things a browser never needs to draw the image and leaves the drawing itself alone.
| Part of the file | What happens | Notes |
|---|---|---|
| <?xml …?> declaration | Removed | Browsers don't need it for inline or <img> SVGs |
| Comments | Removed | Includes "Generator: Adobe Illustrator" lines |
| <title> and <desc> | Removed | These help screen readers; add a title back if the image needs a text alternative |
| <metadata> blocks | Removed | Licence and editor data embedded by Inkscape and others |
| inkscape: and sodipodi: attributes | Removed | Editor-only settings |
| Unused editor namespaces | Removed | xmlns:xlink is kept while xlink:href is still used |
| data-* attributes | Removed | Check first if a script on your page relies on them |
| Auto ids like path123 | Removed if unused | Kept when something refers to them with #id |
| Whitespace between tags | Collapsed | |
| Path data, colours, transforms | Unchanged | Usually most of the file |
How much smaller to expect
It depends on how much clutter the file carries. We ran five SVGs from Apple's iWork apps, already-clean exports between 20 and 281 KB, and they shrank by only 0.2% to 2.8%. Nearly all of their size is path data, which this tool doesn't rewrite. A file saved straight from Inkscape with its metadata, editor attributes and comments can shrink much more, because those parts are removed whole.
For a bigger cut on a path-heavy file, you need a tool that rewrites the drawing itself: rounding coordinates to fewer decimals, merging paths and shortening path commands. SVGO, the Node.js optimizer, and its web front end SVGOMG do that. Rounding coordinates is a trade-off, though: too few decimals and curves visibly shift.
Inline, <img> or CSS: how you'll use the SVG
How you put the SVG on the page decides what you can keep and remove. Use this to decide before optimizing:
| How it's used | Can you style it with CSS? | What to keep |
|---|---|---|
| Inline <svg> in HTML or JSX | Yes, colours and hover effects | Ids and classes your CSS or scripts use |
| <img src="logo.svg"> | No, it's treated like an image | Nothing editor-related; add alt text on the <img> tag |
| CSS background-image | No | Nothing; consider a data URI for tiny icons |
| Icon sprite with <use href="#id"> | Partly, through currentColor | Every symbol id the sprite exposes |
For an <img> or a CSS background, removing <title> costs nothing, because the alt text on the <img> tag does that job. For an inline SVG that carries meaning, such as a chart, put a title back or add role="img" and aria-label.
When an SVG clean-up helps
Cleaning icons before inlining them
SVGs pasted into HTML or a React component are easier to read without comments, metadata and editor attributes.
Removing editor details from shared files
Inkscape and Illustrator can embed file paths, layer names and software versions you may not want to publish.
A quick tidy-up of a logo
Get a compact, single-line version of a logo for an email signature or a CSS background data URI.
Limits worth knowing
- Path data isn't simplified, so big illustrations stay big.
- Embedded raster images in base64 aren't recompressed.
- <title> is removed. If the SVG is meaningful content, add a title or an aria-label back for accessibility.
- Removing data-* attributes can break animations or scripts that use them. Skip the tool for SVGs that carry their own interactivity.