Regular readers of this blog know that I have some kind of non-sexual fetish for image size optimization. So this morning I stumbled over a recent Mastodon post by Daniel Stenberg:
The SVG logo on the curl.se front page shrunk from 8658 to 2787 bytes with @vsz's magic, with no visual difference!
Cool. SVG optimization! But even cooler: Another person got it down to 898 bytes (883 bytes after removing line breaks) and later to 858 bytes, with only minor visual differences. And that was before using an optimization tool like svgo.
I looked at it, and it lookd pretty good. But I still noticed some possible room for improvement: In my experience, <style> elements and style attributes in SVGs can often be replaced by shorter SVG attributes. I had to fiddle around with SVG groups a bit, but in the end I got it down to 805 bytes:
<svg viewBox="0 0 343 103" xmlns="http://www.w3.org/2000/svg">
<g fill="none" stroke="#093754" stroke-width="11.5" stroke-linejoin="round">
<path stroke-linecap="round" d="m51,44c0,0-18,0-20,0-2,0-7-0-10,2-3,2-8,6-10,8C9,56 6,59 6,64 6,68 6,74 6,77c0,4 1,6 4,9 5,4 7,6 10,8 3,2 5,3 11,3 6,0 20,0 20,0
M68,44c0,0 0,41 2,46 2,5 4,6 9,7 3,1 6,1 11,0 8-4 15-10 23-14V97 44
m18,0v53l0-34c0,0 12-11 19-16 2-2 5-3 8-3 3,0 5-0 8,0 4,0 6,1 8,4 2,2 2,6 2,10
m4-38h17v77h-17 34"/>
<path d="M251,89 295,14"/>
<g stroke-width="4">
<circle cx="229" cy="34" r="7"/>
<circle cx="229" cy="66" r="7"/>
<circle cx="247" cy="94" r="7"/>
<circle cx="297" cy="9" r="7"/>
<g stroke="#0f564d">
<circle cx="284" cy="94" r="7"/><circle cx="334" cy="9" r="7"/>
</g>
</g>
<path style="stroke:#0f564d" d="M287,89 331,14"/>
</g>
</svg>
Optimized with svgo, that goes down to 715 bytes:
<svg viewBox="0 0 343 103" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="#093754" stroke-width="11.5" stroke-linejoin="round"><path stroke-linecap="round" d="M51 44H31c-2 0-7 0-10 2s-8 6-10 8-5 5-5 10v13c0 4 1 6 4 9 5 4 7 6 10 8s5 3 11 3h20m17-53s0 41 2 46 4 6 9 7c3 1 6 1 11 0 8-4 15-10 23-14v14-53m18 0v53-34s12-11 19-16c2-2 5-3 8-3h8c4 0 6 1 8 4 2 2 2 6 2 10m4-38h17v77h-17 34"/><path d="M251 89l44-75"/><g stroke-width="4"><circle cx="229" cy="34" r="7"/><circle cx="229" cy="66" r="7"/><circle cx="247" cy="94" r="7"/><circle cx="297" cy="9" r="7"/><g stroke="#0f564d"><circle cx="284" cy="94" r="7"/><circle cx="334" cy="9" r="7"/></g></g><path style="stroke:#0f564d" d="M287 89l44-75"/></g></svg>
Nice. But on Mastodon, the discussion continued and switched to compression. So I compressed the file, one time with Zopfli and one time with Brotli. The results: 378 bytes with zopfli, 354 bytes with brotli. This is the result, which looks identical to the 858 byte version:
