SVGO — Optimizing SVG’s

Recently I discovered the optimization of SVG files. An SVG is just a modified XML file for representing scalable vector graphics, we can optimize and minimize the markup inside the file, like a css or js files.

For accomplishing this purpose, we have a lot of tools, but I suggest you to use this 2:

• SVGO: a Node based tool for optimizing SVGs, from a single file to a folder, with a lot of options and configurations. For example, this is a simple folder optimization:

svgo -f /svg/dir

Simple as that. If you need more information, or you want to see the multiple options it offer, just check SVGO CLI docs.

• SVGO Online: is a web based tool who runs the above project. But it provides a simple interfice for simplifying this task. You just need to drop an SVG file and it generates a new one, with all the optimizations applied.

Automatization

This process can be included inside our CICD pipeline, and everytime we push some new code, executes and check if svg inside project is needed to be optimitzed. This is just an example of use, but it’s a good start point. Another one, could be when we run the build command, one of the step, is optimize all svg files.

This is just a recommendation that helps to minimize weight and impact of loading external resources, and make faster our web pages.