Optimize SVGs with Sketch and SVGO

192x192 circle drawn in Sketch app.

Today we’ll design a simple circle in Sketch, and export it as an SVG. We’ll then use svgo to optimize the graphic for web use.

Draw Vector Asset in Sketch

Starting out with a 600x600 artboard we’ll draw a 192x192 circle in the center of our artboard. Lets use a red(#FF3824) fill and a 10px black(#050608) border.

Export Asset as SVG

Sketch provides a wide array of image file formats for exporting. Let’s choose SVG and then the ‘Export Oval’ button.

Use your mouse to first select the graphic you want to export. Then look for the export options in the bottom right corner.

Check File size and Code

Let’s take a chance to observe the filesize and the raw SVG/XML code that Sketch exports. Our circle icon is taking up 825 bytes of space and the code is 17 lines long. Let’s see how much disk space we can save by simply using svgo.

In the bottom right corner of the text editor you’ll see the size of the image file in bytes.

Install SVGO

Installing svgo is easy if you are already using npm.

$ npm install -g svgo

The previous command will install the svgo command line utility globally across your operating system, and now we can use it anytime we want to optimize an SVG file.

Use SVGO CLI

Using the svgo CLI tool is a very simple process as well:

$ svgo circle-icon.svg circle-icon--min.svg

The previous CLI command will make a copy of circle-icon.svg apply the standard svgo optimations and rename the copied file as circle-icon--min.svg. That’s it. That is all you have to do optimize your SVGs. Be sure to checkout the svgo repository on github to learn about the different flags you can use to best suit your optimization needs.

Compare and Contrast

By simply running your SVGs through svgo you can reduce the size of your SVGs generated by either Sketch or Illustrator by over 50%. There is also no reduction in image quality as svgo is only concerned with removing most of the meta imformation, optimising id’s, and simplyfing floating point decimals.

Optimized image file on the left. Original Sketch image on the right.

Conclusion

Whether you’re using Sketch or Illustrator to export your SVG image files, you should always try to find a post production process that will take you SVG art and cut the file size in half. There are other options for optimizing SVGs other than svgo CLI. Grunt, Webpack, and there are a ton of build tools have plugins for optimizing SVGs that you can easily insert into you workflow.