SVG minifier and cleaner

Why SVG files carry extra weight

Design programs write SVG for themselves first. A logo exported from Illustrator or Inkscape usually carries editor data, comments, empty groups, hidden layers, long IDs and coordinates written to six or eight decimal places, none of which changes how it looks. Minifying rewrites the file with only what the browser needs to draw it.

What we measured

We ran five SVG files through the minifier with its default settings:

Web servers compress SVG on the fly, since it is text, so visitors download less than the file size. Minifying still helps after that compression: the seal went from 72.3 KB to 61.7 KB compressed, and the map from 387.8 KB to 341.6 KB.

The settings

• Number precision sets how many decimals coordinates keep. 3, the default, is invisible on almost everything; 2 suits icons; go higher only for very large drawings where small shapes sit far from the origin.
• Remove metadata and comments drops editor data, title and description. Keep the title if the SVG is shown on its own and needs an accessible name.
• Keep viewBox should stay on: the viewBox is what lets an SVG scale. Remove width and height then lets CSS decide the size.
• Remove style elements strips <style> blocks. Leave it off unless the colours come from your own CSS.
• Multiple passes repeats the optimisation until nothing more can be removed. Pretty print indents the result for reading, at the cost of size.

Sanitising untrusted SVG

An SVG can contain scripts, just like a web page. If you put an SVG from someone else on your site, a script inside it could run in your visitors' browsers. Sanitize, on by default, removes scripts, event handlers such as onclick, embedded HTML (foreignObject) and references to outside files. Drawings keep working; only active content is removed, and the result lists what was taken out.

Checking the result

The minified SVG is drawn next to the code, and the size before and after is shown. Compare it with the original before replacing anything, especially after lowering the precision. If an SVG must be a picture rather than code, for email or a document, use SVG to PNG.

If something goes wrong

• Small shapes moved or curves look wobbly. The precision is too low for this drawing. Raise it to 4 or 5.
• Colours or fonts changed. A style block or class was removed that the drawing relied on. Switch off Remove style elements.
• An animation or interaction stopped working. It was a script, which Sanitize removes. Switch Sanitize off only for files you trust.
• It says the markup is not valid SVG. A tag is not closed or the root element is missing. Check that it was copied whole, from <svg to </svg>.

How we tested. Five SVG files: the Lucide camera icon, a simple logo and three public domain files from Wikimedia Commons. Minified with this tool's default settings in Chrome; compressed sizes measured with gzip.