SVG Optimizer

About the SVG Optimizer

An SVG that comes out of a design tool is mostly not drawing. It carries the editor's own namespaces and layer names, a metadata block, coordinates at six decimal places, groups that wrap a single shape, and attributes set to the values they already had. None of it reaches the screen, and all of it is downloaded by every visitor. Stripping it typically takes a third to four-fifths of the file, and the picture does not change at all.

This tool does that work in your browser. Drop in an SVG and you get the optimized file next to the original, the size before and after in both plain and gzipped bytes, and a list of steps where each one reports what it removed and what that saved. Nothing is uploaded: the file never leaves your device, which also means the tool keeps working when you are offline.

What it does not do is ask you to take its word for it. Every online compressor shows you a preview of the result; this one draws both files at three sizes, compares them pixel by pixel, and tells you plainly whether anything moved.

How it works

1. Click Open SVG Optimizer and drop in a file, pick one, or paste the markup straight from your editor.
2. Read the verdict. Pixel-identical means exactly that. Edges moved slightly means rounding shifted an outline by a fraction of a pixel. Anything stronger is flagged, and the difference view shows you where.
3. Adjust if you want to. Precision decides how many decimals coordinates keep; every step can be switched off; and if you have a file size to meet, set it as a target and let the tool find the setting that gets there.
4. Take it away as an SVG file, a CSS background, an HTML snippet or a React component - copied to the clipboard or downloaded.

What actually makes an SVG file big

It is worth knowing what you are paying for, because the answer decides whether optimizing will help at all.

• Editor bookkeeping. Inkscape, Illustrator, Sketch and Figma each write their own namespaces, layer labels and document settings into the file. On a small icon this can be more than half of it.
• Decimals nobody can see. A coordinate written as 12.336718750000001 in a graphic 24 units wide is describing a position far finer than any screen can show. Rounding is usually the single biggest saving in the path data.
• Path data written the long way. The same outline can be written with absolute coordinates and a command letter before every segment, or with relative ones and the letters left out where they repeat. Both draw the same shape; one is considerably shorter.
• Real geometry. Thousands of points from an auto-traced photo or a detailed map are not clutter, they are the drawing. No optimizer can remove them without removing detail, which is why a file can be perfectly clean and still large.

Proving the drawing survived

The reason people leave optimizers half-used is not that the savings are small. It is that they cannot tell whether the file still works, so they stop at the settings they already trust.

So this tool renders the original and the result at three sizes and compares every pixel. If they match, it says so. If they differ, it says how many pixels, by how much, and at which size - and the difference view paints the changed pixels red so you can see whether it is an outline that moved or a shape that vanished. There is also a wipe slider for looking at both files in the same frame. The three views are a switch in the top corner of the picture, next to the zoom in the corner below it.

A verdict about individual pixels is not much use in a thumbnail, so the preview zooms up to 32 times, and both files zoom and pan together - two pictures at different magnifications would not be a comparison at all. Scroll to zoom towards the pointer, drag to move around, or use the buttons on the work surface and the +, - and 0 keys. In the wipe view a drag moves the divider instead, since that is what you are there to do; the zoom and the position are shared across all three views, so line up the corner you care about in one of the others and switch back. Magnified, the difference mask keeps its pixels square rather than smoothing them, so a single changed pixel is still a single changed pixel.

Be clear about the limits, because a check that overstated itself would be worse than none. An SVG drawn into an image runs without scripts and without loading anything external, so animation, interactivity, linked images and web fonts are outside what the comparison can see. The tool detects each of those in your file and says which ones apply, rather than implying a clean bill of health it cannot give.

The steps that break SVGs, and why they are off

Four common optimizations are responsible for most of the horror stories, and they ship switched off here, each with its reason written next to it.

• Removing the viewBox takes away the file's ability to scale. It will still look right at its original size and go wrong everywhere else.
• Shortening ids saves real bytes and breaks every reference from outside the file: CSS that styles a part of the graphic, JavaScript that animates one, a sprite sheet that points at a symbol.
• Removing hidden elements sounds free. It is the one that has removed artwork people wanted - a shape at zero opacity waiting to be animated, a layer toggled by script.
• Removing width and height is right for the web, where the graphic then fills its container, and wrong for anything that needs an intrinsic size.

Turn any of them on when you know your file does not depend on it. The verification pass will tell you immediately if you were wrong about the first and the last; for ids and hidden elements, only you know what points at what from outside.

Meeting a file size limit

Sometimes the requirement is not "smaller" but a number: an upload cap, a platform limit, a performance budget. Set that number as the target and the tool lowers precision step by step until the file fits, then reports what it took - or tells you plainly that rounding alone cannot get there and that what is left is geometry rather than formatting.

It will not switch on the risky steps to hit your number. Trading away your viewBox to save a few hundred bytes is a decision that belongs to you, not to a progress bar.

Where the optimized file can go

Four outputs, because a smaller file is rarely the end of the job. The same graphic, dressed for wherever it is going:

Tools that make SVGs

Making the SVG rather than shrinking one? Blob Maker, Wave Maker and Pattern Maker all export SVG, and the CSS Shape Generator writes shapes as clip-path rules with an SVG export alongside. If you are looking for a background that needs no file at all, CSS Pattern Backgrounds builds them out of gradients.

Frequently asked questions