How to optimize your SVGs with SVGOMG

Just like any image on the web, we need to compress and optimize our SVGs to deliver as few bytes as possible to our users. Let's see here how to optimize them with SVGOMG.

2 min read
How to optimize your SVGs with SVGOMG
Photo by Amar Preciado on Pexels.

Are you able to determine the difference between the two images below? Is it the same picture?

You probably guessed it, but it's not the same picture! The image on the right is actually an optimized version of the original image on the left.

This improvement was made manually using a tool I discovered this year in on of the latest Frontend Focus newsletter: SVGOMG.

SVGOMG is the Missing Graphical user interface of a Node.js tool specialized in optimizing SVG files, named SVGO.

SVGOMG's interface is straightforward to use and can be summarized in three steps:

  • Upload your SVG image
  • Play with the different controls offered to have an almost identical image, but with a lower weight than the original image
  • Download the resulting SVG image
Screenshot from SVGOMG, dated March 23, 2022.

One of the advantages of using a GUI and going about it with a manual process is that we can more easily ensure the quality of the resulting image.

My favicon's image size went from 73,728 bytes to 20,480 bytes! This represents a saving of approximately 72% of the original image! Impressive, right?😮

💡
Although the interface shows different sizes in the lower right corner, this is due to the fact that I left the "Compare gzipped " option activated.

Indeed, it compares the size of files compressed with gzip! 😉

You will now have one more tool in your toolbox! 😋