Article summary
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:
Original (2.51KB)
After SVGO Optimization (1.99KB)In the above example, SVGO reduce our logo filesize by 20.7% with no loss in visual quality.
Example 2:
Original (10.49KB)
After 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.