GO SVG!
SAVE SPACE AND ENERGY!
What Is An Svg?
SVG (Scalable Vector Graphics) is a resolution-independent graphics format. The big advantage is that SVGs look awesome on retina devices and work on the responsive web.
Why Use An SVG?
As mentioned, SVGs are resolution-independent graphics when most common images are pixel-based. This means that we don't have to use Photoshop-based apps to change resolution and export over again. It doesn't matter if you draw your own SVGs or grab them from the web, in most cases such artworks are not produced with the web in mind. This means that you might find out that they’re filled with over-complicated paths. Also, since SVGs are XML-based, looking into the source code often shows a lot of unnecessary markup. The complexity of the markup code increases file sizes and impacts negatively performance of the website.
Let's Go!!
For this example I will use my Illustration:
I exported this artboard as 900x600px PNG. The weight of this file is 66.5KB and we can only scale it down to preserve quality when an SVG file can be scaled how ever you want!
SVG version of this Image:
The weight of this SVG is 44KB.
So if we saved our artboard as an SVG, we already save 20KB of space for one image and quality increases immeasurably! Awesome! Right?
Here's an example how Adobe Illustrator generates code for your SVG file:
It is almost 500 lines for my illustration! This is a lot.
And now comes the question: "Can we optimise it even more? And do we need all those lines of code?"
This is the part where SVGO comes to help!
What Is SVGO?
SVG Optimizer is a Nodejs-based tool for optimizing SVG vector graphics files.
SVGO runs on Node.js, an asynchronous, event-driven runtime to build scalable network applications. You don’t need to know how to build applications with Node.js to work with SVGO. Because you will only need your terminal to operate it!
How To Install?
First of all, you just have to install Node.js by downloading the latest stable version for your operating system and follow the instructions in the installer.
Next, you install SVGO by using Node’s package manager. By typing this in your terminal:
npm install -g svgo
Now, you have installed SVGO globally in your computer so you can use it anywhere at any time.
How To Use It?
For most of us - basic developers, using default settings, it is enough.
Here's an exmaple how to do it with only one command:
svgo filename.svg
Using this command will optimise your SVG automatically. However, it will replace your original file with optimised one.
I wouldn't recommend using this way because if you want to make any changes to it, your editor like Adobe Illustrator might not recognize the file anymore.
To prevent that I recommend defining an output with a following command:
svgo filename.svg -o filename.min.svg
Now, you have two SVG files: filename.svg, which is the original file, and a new one optimised file: filename.min.svg!
Let's try this on my example:
If you open filename.min.svg in a text-based editor, you will see one long line of code, which means a much smaller file size. In my condition it saved me 24.3% of file size. But this is percentage from my original SVG. So if we look back at my PNG file, we can see that I have already saved around 50% from original 66.5KB!
Here is how filename.min.svg (my case - rx7.min.svg) looks like after clean up!
Looks completely the same, but weighs much less! And this is what we needed in the first place!
What Can We Do More?
To customize the output of SVGO generated files,we can enable or disable plugins. Full list of plugins can be found at GitHub. However, for a basic user default options are the most optimal solution.
Let's try some out a disabled by default plugin. I will use reusePaths, which has to be insdide --enable=''. Here is how the whole command looks like:
svgo filename.svg -o filename.custom.min.svg --enable='reusePaths'
Here's a snippet of my case:
We saved a little bit more space, but take A look what happened to my example SVG:
We lost couple paths which destroys the illustration. And this is exactly what we want to avoid if using these complex svg files.
Conclusion
If you like to have your code optimised and a short page load time, it is a must to use SVGs as much as possible. For even more Optimisation SVGO is an awesome free tool that can be used by everyone to reeduce size of SVGs by editing the SVG code.