Minify Your SVGs

How I optimize SVGs for my blog and why you probably should, too.

This post is best read in its original form at https://victorzhou.com.

I use a lot of SVGs in my blog posts. They’re great for simple diagrams or illustrations, like this one:

From my Neural Networks From Scratch Series.

I use Inkscape, a free and open-source vector graphics editor, to make my SVGs. In the beginning, I just saved my SVGs using the default Inkscape format, something called Inkscape SVG. That turned out to be not ideal…

Let’s use this SVG of a circle as an example:

Here’s the Inkscape SVG markup for that laughably-simple icon:

Wow. That’s 2 KB of markup for basically nothing.

Eventually (read: after an embarrassingly long time 🤷), I figured out that Inkscape had an Optimized SVG output format. This was much more reasonable — using Inkscape’s default settings, the Optimized SVG markup for our circle is: