SVGO – A Handy Command-Line Tool for Compressing SVG Images

I recently wrote a series of posts about image optimization and the importance of reducing image file sizes on websites (Part 1, Part 2).

When it comes to optimizing images, there are many techniques and tools available. One of my favorites is a tool called SVGO, short for SVG Optimizer. As you might guess, SVGO is a tool for optimizing Scalable Vector Graphics (SVG) images.

SVGO is a quick and efficient command-line tool that enables you to compress your SVGs with just a single command. It performs a number of optimizations out of the box, namely stripping unnecessary metadata such as comments, layer information, and XML namespaces from the file. This information isn’t needed for the browser to render the image, so it can safely be removed to reduce file size.

Installing SVGO

SVGO is an open-source project freely hosted on GitHub. It can be easily installed via npm:

npm install -g svgo

Using SVGO

At its most basic, SVGO can be run via the following command:

svgo path/to/test.svg –o path/to/test.min.svg

This command will use the default SVGO settings to compress ‘test.svg’ and create a new file called ‘test.min.svg’. SVGO works well out-of-the-box, performing a number of optimizations that can often dramatically reduce file sizes.

In addition to the default settings, it offers dozens of plugins that allow for more specific optimizations, such as merging paths and combining shapes. Plugins can be used with the following syntax:

svgo path/to/test.svg path/to/test.min.svg --enable=nameOfPlugin

SVGO in Use

Let’s check out a couple examples to see what kind of reductions in filesize SVGO can achieve.

Example 1:

Atomic Object LogoOriginal (2.51KB)
Optimized Atomic Object LogoAfter SVGO Optimization (1.99KB)

In the above example, SVGO reduce our logo filesize by 20.7% with no loss in visual quality.

Example 2:

Atomic Object WordmarkOriginal (10.49KB)
Optimized Atomic Object WordmarkAfter SVGO Optimization (5.22KB)

In this second example, SVGO reduce our logo filesize by 50.3% with no loss in visual quality.

As you can see from the examples, SVGO can yield significant size reductions. As a designer who often works on web projects, I’ve found SVGO to be an easy addition to my standard workflow and an invaluable tool for building out web pages.