Like soil is to a gardener and nails are to a builder, graphic formats are to a web designer. Each format has its own ideal use. These are determined by the limitations of both the file type and the web browser on which it is loading.
When industry experts talk about “best practices,” they are referencing how, where, when and why to use different tools and protocols. As advancements are made, current best practices are challenged, changed and redefined.
Currently, one of the hot button debates is the use of Scalable Vector Graphics (SVGs) verses icon fonts.
What is an SVG?
SVGs are two-dimensional images broken down into mathematical equations which can be scaled to any resolution. That’s a lot of industry speak for, SVGs are images which look good pretty much everywhere you put them. Ideally, they’re used for logos and icon images.
What is an icon font?
An icon font is a collection of images formatted into a font. You’re most likely familiar with Wingdings, a font which offers you symbols and images instead of the ABCs. These symbols or images are stored as characters in the font just like the letters in this sentence. They are displayed on your computer in the same way text is and can be scaled and adjusted just like type.
What is so cool about icon fonts is you can make your own. Have several symbols you’re going to use again and again? Transform them into a font and they’ll be scaled in the same way your alphabet would be.
What’s all the huffing and puffing about?
Icon fonts are interesting, in that you can use them pretty much anywhere. As your website loads it gives your visitors’ browsers the commands to display your font.
On the other hand, SVGs require more specific browser support and a PNG (Portable Networks Graphic) fallback. Until recently, the browser support for these files was really inconsistent. As a web designer, if your potential visitors were using a variety of browsers such as Firefox, Explorer, Chrome and Safari, you couldn’t be sure how the SVG would display.
Doesn’t it seem icon fonts are the clear winner? You would think so. However, there’s more to it. A single SVG is a much smaller file size than a single icon font made up of a single symbol. Compare them side-by-side and the SVG takes less time to load. The winner isn’t so clear, now is it?
Which one is best, really?
It depends. This is where the huffing and puffing comes into play. Now that nearly every web browser supports SVGs, it really depends on how many images your website is going to need. Do you only need a handful? Then SVGs with PNG fallbacks are probably the ideal solution.
Do you need more? Then an icon font is most likely the better bet. It’s easier to maintain an icon font than a large batch of SVGs. But, when you create you icon font, keep it to only the icons you really need. More often than not, you’ll only need 40 icons instead of the original font’s default 250.
In the end, the deciding factor should always be user experience. Whether your website uses SVGs, icon fonts or a combination of both should be decided by what will be best for your visitors, based on website load times and branding consistency.
Need a little help getting web ready images? Grunticon.com is a great, free service which process your SVG files and gives you a PNG fallback. Having a PNG is important as it supports lossless data so you won’t lose any of the original information.
icomoon.io and fontastic are great services to custom build you own icon font.
Have additional questions about SVGs, icon fonts or huffing and puffing? Give us a shout out. We’d love to talk about them.
