Icon fonts vs svgs part 2

In our previous post 'svgs are cool, but icon fonts are just 10% of their file size', we concluded that svgs offer unparalleled functionality, but for theming websites with simple icons, icon fonts are probably a more efficient way to go.

Some readers questioned if the same was true post compression, as significant file size reductions can be achieved via gzipping, and most modern servers are capable of doing this on the fly.

Consequently, we decided to write this followup comparing gzipped ttfs with gzipped svgs.

The compression did close the gap somewhat - gzipping reduced our svg file size by about 43% on average, and our ttf file size by about 38% on average.

Its also worth noting that our comparison is based on multiple svg files - a further reduction on svg file size could be obtained by aggregating svgs into a single file, saving metadata overhead and http requests. We included svgz font files in the results to give an idea of how much can be saved using this technique .

Results

In the end, gzipped ttfs produce an average saving of around 79% over using individual svg files - less than the 90% reported for uncompressed files, but still a pretty decent saving. The svgz font performed much better, saving a whopping 40% on individual svgs, and reducing the gap between compressed svg and ttf to a 66% saving on average.

On the subject of aggregating svgs into a single file, a mention goes out to a cool technique credited to @erikdahlstrom and described by @simurai in a post called svg-stacking, which enables you to do just that! Our results show that this is well worth doing.

Conclusion

That about wraps it up. Obviously like any technical decision, which format you choose should be determined by how well each one matches up with your requirements. Here at pictonic.co we’ll be providing you with both. Keep us posted and let us know which one you go with!

About Pictonic

Generate icon fonts from probably the largest premium vector icon set on the web, with over 2000 beautiful vector icons and over 130 free icons. Try now at https://pictonic.co!

Recent comments

blog comments powered by Disqus