Urban Software
Free Tool

Free SVG Optimizer, smaller vectors, identical on screen

Paste or drop an SVG and it is cleaned and shrunk instantly in your browser, with the original and the optimized version rendered side by side so you can confirm nothing visible changed before you download it. Strip editor metadata, comments and redundant precision, tune how aggressively it rounds, and copy or download the result. Nothing is uploaded, and both previews are sanitized so even a hostile file is safe to inspect.

An SVG exported from a design tool is almost never the SVG you should ship. Illustrator, Figma, Sketch and Inkscape all pad their exports with things a browser does not need: editor metadata, XML declarations, comments, private namespaces, invisible helper elements, and coordinates carried out to fourteen decimal places when two would look identical. The result is a file that is routinely two or three times larger than it needs to be. That waste matters more with SVG than with almost any other asset, because SVG is usually not a separate file the browser caches once. It gets inlined: pasted straight into your HTML, imported as a component in React or Vue, or bundled into a sprite. So every wasted byte ships inside your markup or your JavaScript, is parsed on every page load, and is often repeated once per instance of the icon. The usual fix has two problems. Most online optimizers upload your file to a server you know nothing about, which is a poor idea for anything you have not published. And none of them let you see whether the optimization actually held, so you either trust a percentage and hope, or paste the result back into your design tool to check. This optimizer does the work in your browser and puts the original and the optimized version next to each other, so you shrink the file and confirm it still looks right in the same glance.

01

What actually bloats an SVG

The weight in a typical exported SVG comes from three places, and none of them draw anything. The first is editor bookkeeping: a metadata block, an XML declaration, a DOCTYPE, private namespaces like sodipodi and inkscape, and attributes such as data-name that only the design tool cares about. The second is formatting: the comments, line breaks and indentation that make the file readable in a text editor and mean nothing to a browser. The third, and often the largest, is precision. A design tool will happily write a coordinate as 26.00000000 or 10.126984127, when for a shape a few dozen pixels across, two decimal places is visually indistinguishable and a fraction of the length. Rounding that precision, collapsing the whitespace and dropping the editor cruft is where the savings come from, and all three are safe because none of them change a single pixel of what the browser draws.

02

Why SVG weight is worse than it looks

With a raster image, the file is downloaded once and cached, so its weight is a one-time cost. SVG is different because of how it is used. The whole reason to choose SVG for an icon or a logo is that it is text, so it is usually inlined directly into the page rather than linked as a separate file: written into the HTML, imported as a component in a framework, or compiled into a sprite sheet. That changes the economics completely. An inlined SVG ships inside your document or your JavaScript bundle, it is parsed by the browser every time the page loads rather than served from cache, and a bloated icon used in twenty places can be carrying its waste twenty times over. Trimming a single icon from three kilobytes to one does not sound like much until it is one of forty icons, each used repeatedly, all sitting in the critical path. Optimized SVGs are one of the quieter but more reliable ways to take real weight out of a modern component-based front end.

03

Optimize, then verify it with your own eyes

The risk with any SVG optimizer is that a percentage is not a promise. Round the precision too hard and a smooth curve can develop a visible kink; strip the wrong element and part of the artwork disappears; drop width and height without a viewBox and the icon stops scaling. The only way to know an optimization was safe is to look at the result, which is why this tool renders the original and the optimized SVG side by side on the same checkerboard, at the same size, so any difference is immediately obvious. Move the precision slider down and you can watch the exact point where the shape starts to degrade, then stop just before it. There is a second, quieter piece of care here too: an SVG is code, and a malicious one can carry a script or an event handler that runs the moment it is rendered. Both previews are run through a sanitizer that strips scripts, event handlers and javascript URLs before anything is drawn, so it is safe to paste in a file you did not make.

How to use it

  1. 1

    Add your SVG

    Paste the SVG markup straight into the source box, drop a .svg file onto the tool, or load the sample to see how it works. Everything is read and optimized in your browser, so the file is never uploaded and even an unreleased asset stays on your machine.

  2. 2

    Choose what to strip

    Toggle off editor metadata, comments, scripts and whitespace, and set the precision slider for how far to round coordinates. Two decimals is a safe default for almost every icon. Title and desc, and the width and height attributes, are left in place unless you opt to remove them, because each can matter.

  3. 3

    Compare before and after

    Look at the two renders side by side and confirm the optimized version is identical to the original. If you pushed the precision too far and a curve looks wrong, nudge the slider back up until it matches, then stop there.

  4. 4

    Copy or download

    Copy the optimized markup straight into your code, or download it as a .min.svg file. Exporting asks you to sign in with a free account, which is the only thing an account is needed for; optimizing and comparing are always free and never require one.

Common mistakes

Rounding the precision too aggressively

Coordinate precision is the biggest saving, but round it too hard and smooth curves develop visible kinks, especially on large or detailed artwork. Use the side-by-side preview to find the lowest precision that still looks identical to the original, and stop one step before the shape starts to break.

Stripping title and desc from meaningful graphics

The title and desc elements are how a screen reader describes an SVG, so removing them from an icon that conveys meaning hurts accessibility for a handful of bytes. Keep them on standalone, meaningful graphics; it is only safe to drop them from purely decorative icons that are already labelled another way.

Removing width and height without a viewBox

The width and height give an SVG a default size, but the viewBox is what lets it scale. Strip the dimensions from an SVG that has no viewBox and it can collapse or render at the wrong size. This tool only removes width and height when a viewBox is present to preserve the scaling, but it is worth understanding why.

Trusting the output without looking at it

A smaller file is only a win if it still draws the same picture. Optimizers that just hand you a percentage give you no way to know. Always compare the rendered before and after, which is exactly what the two panes in this tool are for, before you ship the optimized file.

Questions

Is this SVG optimizer free, and is my file private?
Yes, it is completely free with no limits. It also runs entirely in your browser: your SVG is read and optimized on your own machine and is never uploaded to a server. Signing in is only required to copy or download your results, so your work can follow you across our other tools. Because nothing is uploaded, it is safe to use on confidential or unreleased artwork.
Will optimizing change how my SVG looks?
The default settings are chosen to be visually lossless: removing editor metadata, comments and whitespace, and rounding coordinates to two decimal places, none of which change what the browser draws at normal sizes. The one setting that can affect appearance is the precision slider if you push it very low, which is exactly why the tool renders the original and the optimized version side by side, so you can confirm they match before you download.
What does the tool actually remove?
By default it strips the XML declaration, DOCTYPE, comments, the metadata element, private editor namespaces such as sodipodi and inkscape, editor-only attributes, and any scripts or event handlers. It collapses the whitespace between tags and rounds coordinate precision. It deliberately leaves ids, text content, title and desc, and width and height in place unless you choose otherwise, because those can carry meaning it cannot safely guess about.
Why is my SVG so much smaller after optimizing?
Most of the weight in an exported SVG is not the artwork. It is editor metadata, formatting whitespace and coordinates carried out to many more decimal places than the eye can resolve. Removing the first two and rounding the third routinely cuts an exported icon by a third to a half or more, with no visible change, because none of what was removed was ever being drawn.
Is it safe to paste an SVG I did not create?
Yes. An SVG is code and can in principle carry a script or an event handler that runs when it is rendered, so before this tool draws either preview it runs the markup through a sanitizer that strips scripts, event handlers, foreignObject elements and javascript URLs. That means pasting in a file from an unknown source cannot execute anything in the page, and if you keep the Scripts option on, the downloaded file is cleaned of them too.
Should I use SVG or a compressed raster image?
Use SVG for anything that is drawn from shapes: icons, logos, simple illustrations and diagrams. It stays sharp at any size and, once optimized, is usually smaller than a raster equivalent, which is why it is the right choice for interface graphics. Use a compressed raster format like WebP for photographs and richly detailed images, where SVG has no advantage. For those, our image compressor and resizer are the tools to reach for.

Need this done properly, at scale?

The tool handles the one-off. When it's a system you're building, that's the paid version of the job, and we do that too.

Custom Website Development