svgs are cool, but icon fonts are just 10% of their file size

In a recent post, we attributed the high performance of icon fonts over images to their support for vector expressions. Yet fonts aren’t the only vector savvy players in town, and a few folks were left wondering, what about svgs?

In light of our recent announcement that pictonic’s icon font packs now include svg files too, we thought we’d do a quick write up to highlight the main pros and cons of each.


FEATURE BREAKDOWN

image

SVGS

Since svgs are written in xml, they’re pretty easy to understand, and since they’re pretty easy to understand, they’re pretty easy to manipulate.

image

The implications of this are nothing short of revolutionary as far as web media goes… you can literally read write, generate and manipulate svg source code, on the client, in real time! Seriously, its a lot of fun, check it out and have a play!


Or for something more basic, go to the following code pen, and change this:

image

to this:

image

cool eh?

SVGs also don’t have to be monochrome, so you can create pretty complex pictograms with svgs, and like our font counterparts, they are easily styleable with css.

These things combined really make svgs an important part of the internet’s evolution. So why then have svgs not taken the web by storm? Probably due to concerns about browser compatibility, and its not hard to see why. IE only began supporting svgs in version 9. But even the most standards compliant and forward looking browsers still don’t meet the full w3 svg specification:


SVG Test Suite Results

image

taken from http://databathing.com/SVG/

Don’t be put off by this. The w3 standard for svgs goes way beyond basic svg functionality and those tests include advanced features like effects and filters. The bottom line is that every browser now has basic support for svg:


Browser support for basic svg functionality

image

taken from http://caniuse.com/#feat=svg


ICON FONTS

Fonts are monochrome, so they’re not an appropriate medium for complex imagery. However, for simple shapes like user interface icons or logos they’re ideal. Such icons prove to be very versatile, recognisable at really small scales, and as our designer says, naturally bring out one of the most powerful design forms - negative space (see our previous post on designing icons for use in icon fonts). This is why they’re used a great deal in user interfaces, and why logos like the apple logo or the nike swish work almost anywhere.

However, where icon fonts really shine over svgs is in providing an unbelievably lightweight and efficient way to theme websites. You can cram hundreds of icons into a tiny font file. This makes it really convenient for serving up rich user interfaces with very little overhead. Binary formats are quite a bit more efficient than text formats, so the actual file size of a ttf font will often be many times smaller than the aggregate file size of equivalent icon svgs, or even an svg font. Also, browser support for icon fonts is pretty good, with native support going back till ie7, and simple workarounds to get it working in ie7 and under.


PERFORMANCE

So for those of you who prefer to see some hard data, I whipped up some numbers to give some idea on how each format might impact your page load speed.

First of all, both formats are scale independent, so whether you want your icons at 16x16px or 512x512px, the file size will be the same. However, as you can see below, for a typical icon pack downloaded from pictonic.co (around 25 icons), the file size of a ttf is about 20% of its svg equivalent.


Filesize as scale increases

image

Furthermore, this gap widens considerably as the number of icons increases. At 50 icons, the ttf is roughly just 10% of the total file size of the svgs.


Filesize as number of icons increases

image

To see how that might be impacting your website speed, consider the following. The average size of a webpage is 320kb, and according to research published by google analytics, the average page load is about 7 seconds. This means that on average, clients load pages at roughly 45kb per second. Therefore, assuming you’re using a typical number of icons like 25, using an icon font instead of svgs could speed up your page load speed by about 8.5%.


CONCLUSION

For the specific use case of theming websites and user interfaces with icons, its pretty hard to beat icon fonts, both in terms of ease of integration and performance. This goes a large way towards explaining their unprecedented rise in popularity in recent months.

However, SVGs are literally amazing. With them, you’re pretty much limited by your imagination and that’s about it. Here at creative sloth, we’re looking forward to seeing how their use in the web develops over time, and believe them to be an important part of its evolution. Thats why we’ve decided to include svgs with every icon font pack downloaded from pictonic.co.

That concludes our comparison, but we very much look forward to hearing your thoughts and opinions on both!


Update

All well and good, but what about compression? This followup post compares svgs and icon fonts when gzipped.

http://blog.pictonic.co/post/33163844823/icon-fonts-vs-svgs-part-2


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