Background

I was planning to write today about looking at SVG code within some facial expressions I drew up in Inkscape, but that will have to wait. Upon trying the SVG optimization tool known as SVG OMG, I realized I had to write about this first!

Vector graphics applications like Inkscape and Illustrator are terrific for creating SVG images, but the resulting code can be bloated with a lot of unnecessary code (I’m looking at you, metadata.) Optimizing your SVG can make it a million times more readable and reduce its overall size tremendously, but getting your optimization settings just right can be tricky.

Fortunately, the free online tool SVG OMG has you covered if your export settings aren’t doing the whole job. (And even if they are, this is worth checking out.) In this post, we’ll look at SVG OMG and compare the memory size of the “before” image with that of the “after” image.

What is SVG OMG?

SVG OMG is an application maintained by Jake Archibald that is a GUI (Graphic User Interface) version of svgo, an SVG optimization tool. In addition to the online version I used, there is an offline version with additional features. It is a node.js tool, so it can be installed with the node package manager (npm).

Diving in

The Image

While the face in my circle to face tutorial was drawn completely with code, I’ve drawn the faces below using the open source vector art application known as Inkscape.

We’ll look at the SVG code of this image in an upcoming tutorial.

Now what I have above is the optimized image. The off-the-shelf unoptimized image below that is directly generated by Inkscape has minimal to no discernable difference from its optimized counterpart above.

First Impressions of the Initial File in a Text Editor

But while the difference is at least mostly invisible to the human eye, the differences between the two show up in stark relief when both these images are opened in a text editor. Indeed I found that in the original image, the Inkscape-generated code had loads of unfamiliar, Inkscape-specific syntax, with many more lines of code that were hard to parse out, even by SVG standards. To be fair, some of this is due to the modern conveniences that Inkscape offers (ex. layers) but as with the layers and other niceties in a Photoshop file, I didn’t want all that in my final image. And most importantly for upcoming posts, I wanted the SVG code to be limited to only the essential syntax.

I wanted to optimize the file, and I remembered the SVG OMG tool from syntax.fm episode with amazing SVG Expert and web developer extraordinaire Sarah Soueidan. (Thank you, Wes Bos and Scott Tolinski, for the terrific episode.)

File Size Comparison

So I uploaded my file to SVG OMG. While keeping the default settings, the application told me that SVG OMG reduced the file size from 20.14k to 4.22k — 20.93% of its original size. While the file sizes came out as larger after I downloaded them, the reduction was even more significant: 13KB compared with the original 99KB, or 13% of its original size.

Optimizing SVG's can remove Inkscape layers. Makes perfect sense but I didn't automatically think of it. In my case I didn't mind, but this may cause issues if you want to go back and edit your image. So hold on to those original files in case you want to go back to your layers.

Text Editor Comparison

Upon opening the file in Sublime Text and comparing it with the original file, I found that the extra unnecessary data was gone. The only code there was the code meant to render the image, so it was compact and more readable.

Here is the original file and the optimized file in case you want to have a closer look. Predictably, similar elements across the twelve faces are grouped together, so I will be separating these faces into different SVG objects once we start taking a closer look at the code under the hood.

Overall Impression

After this experience, I will definitely be using SVG OMG as my go-to for SVG image optimization, and might even check out its older command-line cousin, SVGO.

Takeaways and Additional Notes

  • SVG OMG is a terrific tool for optimizing images created with a graphics editor.
  • In addition to the online version I used, there is an offline version with additional features.
  • There are tons of settings that I recommend experimenting with.
  • For those of you interested in a CLI tool, try SVGO.