When you optimize SVG online with this tool, you get two jobs in one: a smaller file and a cleaner one. Paste SVG code or choose a file, and the tool removes what design apps leave behind, rounds long numbers, and strips anything that could run code. You can turn a one-colour icon into currentColor, drop the fixed size, compare both versions side by side, and copy the result as SVG, a CSS data URI or Base64.
Why SVG files get big
SVG is text: a list of shapes and paths written as XML. Design apps write a lot more than the shapes:
- Editor data: Inkscape, Illustrator, Sketch and Figma add their own attributes and namespaces so they can reopen the file later.
- Metadata and comments: author names, licence blocks, "Generated by" lines.
- Long numbers: coordinates like 12.123456789 where 12.12 draws exactly the same on screen.
- Empty groups left over from layers you deleted.
An icon exported straight from a design app is often two or three times larger than it needs to be. For one logo that hardly matters. For fifty icons in a page, it adds up.
Why SVG files need cleaning for safety
SVG can do more than draw. It can contain script elements, attributes such as onload that run code when the file is shown, links that start with javascript:, and embedded HTML inside a foreignObject element. When an SVG is opened directly as a page, or pasted inline into your HTML, that code can run with your site's permissions.
That makes SVG uploads a known risk on sites that accept files from visitors. An SVG shown through an <img> tag does not run scripts, which is why the previews in this tool are images. But inline SVG, or a file someone opens in a new tab, can.
The safety option removes script elements, foreignObject and other embedded content, every attribute that starts with "on", links that start with javascript:, and <use> elements that point to files on other sites. Use it on every SVG you did not make yourself.
How to optimize SVG online with this tool
- Paste the code or choose an .svg file. The result updates at once.
- Choose the options. The first three are on by default: remove editor data, make it safe, round numbers to 2 decimals.
- Read the list of changes and the size line, for example "4.2 KB → 1.6 KB (62% smaller)".
- Compare the previews. If the cleaned version looks different, round to 3 decimals instead of 1 or 2.
- Copy or save. Choose SVG code for inline use or a file, a data URI for CSS backgrounds, or Base64.
Everything runs in your browser. Your files are not uploaded anywhere.
The extra options
| Option | Use it when |
|---|---|
| currentColor | A one-colour icon should follow the text colour, for example in buttons and dark mode |
| Remove width and height | You want CSS to size the icon; the viewBox keeps the shape |
| Remove title and desc | The icon is decoration next to a text label; keep them for icons that carry meaning on their own |
| Round to 1 decimal | Small icons, 24 pixels or less |
| Round to 3 decimals | Detailed logos and illustrations |
The currentColor option only works when the icon uses one colour. If it finds more, it leaves the colours alone and tells you why.
Inline SVG, img or CSS?
- Inline SVG in the HTML: can be styled with CSS and follows currentColor. Best for a few icons. Every copy adds to the page's size and element count.
- <img src="icon.svg">: cached by the browser, never runs scripts, cannot be recoloured with CSS. Best for logos and larger graphics.
- CSS data URI: no extra request, good for one or two small background icons. Avoid it for many icons, because the CSS file grows.
- SVG sprite: one file with many icons, each used with
<use>. Best when the same icons repeat across a site.
The data URI output is encoded for CSS rather than Base64, because plain text with a few characters escaped is smaller than Base64 for SVG.
What the tool does not do
It does not merge or simplify paths, and it does not convert shapes to paths. Those steps save more bytes but can change how the drawing looks, and they are better done in a dedicated tool such as SVGO with a preview. This tool sticks to changes that are safe to make without checking every curve.
It is also not a replacement for server-side checks. If your site accepts SVG uploads from visitors, clean them on the server too, or accept only PNG, JPEG and WebP. Use this tool to optimize SVG online for your own icons and for files you download, and keep the cleaned copy.
Frequently asked questions
Is it safe to use SVG files from icon websites?
Files from large, well-known icon sets are usually clean. Files from unknown sources can contain scripts. Run them through the safety option before you paste them inline or put them on your server.
Why does my SVG look different after optimizing?
Usually because rounding was too strong for a detailed drawing. Round to 3 decimals instead. If the size changed, you removed width and height without a viewBox: turn that option off.
Does SVG size affect page speed much?
One icon rarely matters. Many inline icons, or one large illustration exported from a design app, can add tens of kilobytes to every page, which slows the first load on phones.
