Optimize SVGs for Better Performance using svgo
Just like a bitmap image, you can compress an SVG by removing various pieces of code that aren’t necessary to it rendering properly. This reduces file size & download time, ultimately leading to a faster page load speed. You’ll learn how to automate the process of compressing your SVGs using svgo in the command line.
For a full list of options and plugins available to use with svgo, check out their documentation.
Note: This lesson assumes you have npm installed.
[00:06] Let's install SVGO by typing npm install -g SVGO. This just installs it globally so we can use it anywhere. With install, let's use it by typing SVGO and the path of the filename that you want to compress. In this case, I want to compress icons plug.
[00:19] By default, SVGO overwrites input files. I want to send it to a different file to output. I'll type -o for output, and I'll type icons plug .min.svg.
[00:33] Run that command. Once it's finished, SVGO responds with the original file size, the percentage reduced, and the resulting optimized file size.
[00:41] Let's take a look at optimizing a folder of SVGs. Again, let's start by writing SVGO. I'll pass the F flag which stands for folder. I'll pass it the icons folder. Then, I'll pass it the O flag for output. I'll pass it icons/out. Now, when I run this command, SVGO displays the results of compressing each icon.
[01:06] SVGO does a good job of compressing SVGs out of the box, but we can customize it by setting a few options and enabling plug-ins. Let's run the same folder optimization again. This time, I'll add the -P flag which stands for precision, provide it a value of one. This just sets the number of digits to use after a decimal point in the SVG paths.
[01:28] Next, I'll add the multi-pass flag which tells SVG to keep trying to compress the files until it can't any longer. Finally, I'll add the enable flag, set it equals and some quotes. Inside the quotes, I'm going to add a few plug-ins to help further reduce the icon size.
[01:52] These are not all of the plug-ins that you can use. This is just a small sampling. Once this completes, SVGO now displays the results from each SVG it found...