How to optimize SVG

Editors like Illustrator can save out some really dumb SVG code sometimes. Properly optimized SVG files can be as much as 80% smaller. Bunches of empty groups, pointless attributes and many other inefficiencies decrease readability and reliability.

Every SVG file should be manually optimized in 3 passes using:

  1. Your vector graphic editor.
  2. The SVGO command-line optimization tool.
  3. Your text editor.

1. Use your vector graphic editor

Open the vector file in Illustrator or Sketch and open the layers inspector to take a look. Every Node.js in the panel relates to a separate chunk of code in you SVG. The more you can combine and simplify the better.

  1. Delete invisible layers.
  2. Carefully consider converting all text to paths.
  3. Combine paths. If you are using a combination of shapes, paths and strokes for a symbol, convert them all to paths and combine them.
  4. Don't mask; crop by reshaping you paths and actually deleting hidden content. Masked detail is saved in the code even if you can't see it. This includes elements that overflow the canvas (or in SVG terms, the viewbox).
  5. Simplify groups. In fact, try to avoid using them at all.
  6. Scan for non-SVG friendly elements such as embedded raster images.
  7. Lastly, trim your canvas. Do this last since the earlier steps often create more whitespace. In Illustrator, select Object, Artboards, Fit to Artwork Bounds.

Once you have saved your SVG file, quickly open it in a text editor and check that the viewBox attribute begins with 0 0. If it does not the x and y coordinates originate from a position other than the most efficient x = 0, y = 0. Illustrator tends to do this from time to time, I find the easiest solution is to select everything, copy it, create a new document, paste the content into the center and trim the canvas.

2. Use SVGO

SVGO is a Node.js based open-source project hosted on Github. Stick to the command line tool even thought there is a less up-to-date GUI available.

It works amazingly, slicing through filthy code like a lightsaber through butter. This is what will get you the big file-size savings. A lot of the earlier optimizations made in the editor are simply to give this tool the best shot at success.

Installation

Make sure you have Node.js and npm installed on you system, then run:

npm install -g svgo

Usage

Have a read of the official SVGO instructions. Remember to back up your SVG files before you optimize them, just in case things go wrong.

Optimize a file:

svgo test.svg

Optimize all SVG files in a folder:

svgo -f ../path/to/folder/with/svg/files

Always open the optimized images in a web browser to check they still look correct before moving on.

3. Use your text editor

Open up the optimized image in you text editor to check for any remaining fluff that could be removed.

Sometimes (particularly when working with icons destined for an icon font) a color that was intended to be black made it all the way thought the process as a slightly gray hexadecimal. You can delete these sightly off path fill attributes since black is the SVG default.

Another common one is unnecessary path fill-rule attributes. Cautiously remove it and preview the change before ditching it.

You may be able to make further common-sense tweaks to the simplified code at this point. Create groups and apply common path attributes where there will be a net code reduction.

In conclusion

Don't be slack! The file-size savings are dramatic. My SVGs tend to have global uses, for example, as the main logo or compiling to characters in the icon font. Reducing the file size of global assets improves the initial page load time for every single visitor to your site.

If your SVG assets get reused in later projects like a lot of mine do, saving out the files optimally from the start will make an ongoing difference.

The more intimate you are with the code quality of the SVG files being produced the better. With a finger on the pulse you will be able to identify and address any recurring inefficiencies.