SVG Optimizer

About this tool

SVG files exported from design tools such as Inkscape, Illustrator and Figma carry a lot of weight a browser never needs: editor settings, comments, empty groups, default values, unused definitions and numbers with a dozen decimals. This tool runs SVGO, the standard open-source SVG optimizer, in your browser and shows how much smaller the file gets, typically 30 to 60 percent for exported illustrations and less for hand-written icons. Several protections are built in. Script elements, event handlers such as onclick and javascript: links are removed, and the tool tells you when it did so. Other ways an SVG can do things, such as animated link targets or embedded HTML (foreignObject), are kept and flagged, so still treat an SVG from an unknown source with care before you open it directly in a browser. The viewBox, which lets the image scale, is always kept, and titles and descriptions, which screen readers use, are kept unless you choose to remove them. Short IDs are optional because shortening them can clash with other SVGs on the same page. After optimising, the tool draws the original and the result and compares them pixel by pixel, so you see at once whether the picture is unchanged. We checked the default settings against 50 real SVGs, including illustrations, icons, filters and gradients, with the same comparison. One known weakness of SVGO is avoided: its shortening of rotation matrices can move shapes that carry a tiny rotation by a large offset, so that step is switched off. The work runs in a separate thread with a 30 second limit, and files with more than 25,000 elements are refused rather than freezing your browser. Animated SVGs and embedded HTML (foreignObject) are kept, with a warning to check them. Nothing is uploaded; the file is processed in your browser.

How to use it

1. Drop an SVG file on the page, or paste its code into the box.
2. Adjust the options if you need to: precision is the number of decimals kept in coordinates.
3. Press Optimize and read the size saving and the comparison message.
4. Copy the result or download it as a file.

Common problems

The comparison says some pixels differ

Raise the precision to 4 or 5 and untick Several passes, then optimise again. Very small differences at the edges are normal anti-aliasing. If it still differs, keep the original or use the preview to decide.

My CSS or script cannot find an element by its ID any more

Leave Shorten and remove IDs unticked. When it is ticked, unused IDs are deleted and the others get short names.

The picture is stretched or has the wrong size

Untick Remove width and height if the page relied on them, or make sure the SVG has a viewBox, which lets it scale. Without a viewBox, removing the size can make it fill the whole container.

It says the SVG is too complex

Files with more than 25,000 elements take too long to process in a browser tab. Simplify the drawing, split it into parts, or run SVGO on the command line.