Optimize SVGs for Better Performance using svgo

Include an SVG with an Image Tag

Add an SVG as a Background Image

Add an SVG as an Embedded Background Image

Combine Multiple SVGs into an SVG Sprite

Add an SVG Sprite as a Background Image

Automate SVG Sprite Background Image Variations with a SCSS Mixin

Embed SVG Directly In Markup with the “Use” Tag

Load an External SVG Inside a “Use” Tag

Style an SVG Icon with CSS

 Build an SVG icon component in React

Create an SVG Icon System

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](https://github.com/svg/svgo).

Note: This lesson assumes you have `npm` installed.

https://app.egghead.io/api/v1/lessons/tools-optimize-svgs-for-better-performance-using-svgo/subtitles

[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...

Optimize SVGs for Better Performance using svgo

Share this video with your friends

Course

Create an SVG Icon System