SVG optimizer

How to optimise an SVG

1. Choose your SVG, drop it on the box, or paste SVG code.
2. Read the size before and after, and look at the two pictures. The line under them says whether they match pixel for pixel.
3. Change the decimal places, or untick a step, if you want to keep something.
4. Download the SVG, or copy the code.

What it takes out

• Comments, the <?xml?> line and the DOCTYPE. A DOCTYPE that declares entities, as old Illustrator files do, has them written out in full first.
• Editor data: <metadata>, and the elements and attributes that Inkscape, Illustrator, Sketch and other editors add in their own namespaces for their own use. No renderer reads them.
• Namespace declarations that nothing uses once the editor data has gone.
• Unused ids and definitions: ids that nothing in the file points to, and gradients, clip paths, masks, patterns, filters and markers that nothing uses.
• Groups that do nothing: empty ones, and ones with no attributes, whose contents are moved up a level.
• White space between elements and inside path data, style attributes and style sheets.
• Digits: numbers are cut to the decimal places you choose, 0.5 becomes .5 in path data, and a colour such as #ffcc00 becomes #fc0.

Decimal places

Editors write coordinates with far more digits than any screen or machine can show: 120.00000, 47.262188. Cutting them is where most of the saving comes from, and it is the only step that can move anything at all, so it is the one you control.

The number is in the units of the viewBox. The tool suggests enough places to keep everything within 1/20,000 of the drawing’s longer side: 3 places for a 24 unit icon, 2 for a drawing 1,000 units wide. Shapes inside a group that is scaled up keep more places to match, and coordinates inside gradients, patterns, masks, clip paths and filters keep three more. In a path made of relative steps, each step is measured from where the rounded path has reached, so the error never adds up along the line.

What it leaves alone

• Everything inside <text>. Spaces there can be part of the wording, so they are never touched.
• <title> and <desc>, which screen readers use, and anything inside a <foreignObject>.
• <symbol> elements and their ids. A file that draws nothing itself is treated as a sprite sheet that other files point into, and keeps every id and definition.
• Ids and elements in a file with a script, and elements in a file whose style sheet picks by position (:first-child, +, ~). Removing them could change what the script or the selector finds. The tool tells you when this happens.
• The shapes themselves. It does not merge paths, turn shapes into paths or rewrite path commands. Tools that do can save a little more, and now and then change the picture.

How much smaller

It depends on where the file came from. The sample on this page is a star in a ring, saved the way a vector editor saves it: 2,589 bytes. Optimised at the suggested 2 decimal places it is 764 bytes, 70% smaller, and the two pictures are identical. A file exported with a “minify” option, or one already optimised, has little left to remove.

Web servers usually send SVG compressed with gzip or Brotli, which already squeezes repeated white space well. Expect the saving over the wire to be smaller than the saving on disk, though still real: fewer digits and fewer elements compress to less.

Questions

Related

• Change an SVG’s colours
• SVG viewer, to look inside a file
• SVG to data URI, to inline it in CSS
• What is an SVG file?
• All tools