What is SVGO?

Learn how to optimize and minify SVGs using SVGO to save bandwidth and improve site speed

Mohamed Bilal ⏳ 3 min read
What is SVGO?

Introduction

SVG Optimizer (SVGO) is a tool used to optimize and minify SVG files. SVGO is available as a Node.js library and a CLI tool.

How does it optimize?

SVGO optimizes your SVGs by removing redundant information, such as comments, metadata, and suboptimal or repetitive values. Many vector tools and editors output SVGs with a lot of this extra data. SVGO finds and removes this information safely without impacting the final rendered image.

Installation

Prerequisite

Please ensure Node.js is installed on your machine. I use macOS. Here is the command to confirm that Node is installed and to check its corresponding version:

node --version
v26.4.0

Install SVGO

npm install -g svgo

Confirm Installation

svgo --version
4.0.1

Converting the Coderevere PNG Logo to SVG Using Adobe’s Free Online Editor

Adobe-Express

Now that this is done, let us check the file size of the output (in bytes):

stat -f%z cr-adobe-output.svg 
31923

SVGO: Optimization

Let us run this file through SVGO to see how much space we can save.

svgo cr-adobe-output.svg -o cr-svgo-output.svg

cr-adobe-output.svg:
Done in 15 ms!
31.175 KiB - 70.2% = 9.297 KiB

Savings: We saved an incredible 70% on this file, which is a great result! When you have several such files on your site, these savings will quickly add up. This also leads to massive bandwidth savings when these files are downloaded hundreds or thousands of times.

Is it worth my time if I am already using Brotli compression?

This is an age-old debate: minification vs. compression. A combination of both minification and compression is always better, as it brings substantial value. While SVGO removes redundancies to make the file smaller, Brotli can then build upon this already minified output by using encoding algorithms to reduce the file size even further.

While Brotli does a great job when provided with a very large, unoptimized file, this means it is forced to compress a lot of raw, unnecessary data.

Hence, it is best to minify first and give Brotli only the necessary data to compress further. This truly maximizes performance gains. Let us demonstrate this in action.

Sample Test:

Let us run both files (the original output from Adobe and the optimized output from SVGO) through Brotli compression at its highest level (11) and compare the results.

brotli -q 11 cr-adobe-output.svg

stat -f%z cr-adobe-output.svg.br              
6894

brotli -q 11 cr-svgo-output.svg

stat -f%z cr-svgo-output.svg.br
4146

The total percentage of savings appears smaller because Brotli already reduces the file size significantly. However, this does not take away from the fact that combining minification with compression provides an additional ~40% in savings to the final file size.