Smarter ideas worth writing about.

SVG vs Icon Fonts: Which Should You Use?

When Microsoft rolled out IE9 in 2011, developers rejoiced at the fact that, among other features, the browser included native support for scalable vector graphics (SVG). At that point, with most competing products already offering support for SVG, the only roadblock to developers applying the technology uniformly across browsers was time. The adoption rate for IE9 needed to grow sufficiently enough to become a serious contender to alternatives such as raster images and icon fonts. 

Today, with all major browsers except IE 8 and lower and Android 2 and lower offering native support for SVG, we can safely deploy these assets with little concern regarding the browser’s ability to render SVG. Unsupportive browsers may easily be served a PNG file as a fallback.

SVG Demystified

SVG is simply an XML-based vector image format ideal for simple flat art such as icons, shapes and logos. They can include multiple colors, gradients and complex filters.

Unlike raster images (think JPG, GIF and PNG), SVG uses XML code to create graphics. The following code, for example, produces a blue circle with a radius of 50px and a black 3px stroke around it, centered on a 110 x 110 pixel canvas:

<svg width="110" height="110" xmlns="http://www.w3.org/2000/svg" style="border:1px solid red;"> <ellipse stroke="#000000" ry="50" rx="50" id="svg_1" cy="55" cx="55" stroke-width="3" fill="#0000ff"/>
</svg>

We can manipulate the shape and color of the object on the fly, simply by changing the values in the code. Moreover, SVG gives us the ability to scale the circle as large or small as we want without affecting the resolution or file size. It doesn’t matter if the circle is 32 x 32 pixels or 320 x 320 pixels, it will still appear clear and crisp.

Of course, the circle above can also be created using plain ol’ CSS, but this was just a rudimentary demonstration to show how SVG works. Depending on complexity, you probably wouldn’t recreate an icon or your company’s logo in CSS, for example, but icons and logos are definitely prime candidates for SVG.

Also note that in our example circle, we’re putting the code inline to generate our image (No extra HTTP request for that). We can, however, just as easily reference a SVG file in an image tag, such as <img src=”circle.svg”>. This will, however, result in a call to the server to retrieve the file.

The screenshot of the Cardinal Solutions logo below reveals what happens when two similar logos, one a PNG and the other a SVG, are scaled up 135% from their native sizes. Can you tell which image is the SVG?

Resolution-independent scaling makes SVG a strong option for responsive design in particular, as it gives us unlimited versions of a graphic through a single HTTP request (or no HTTP requests if coded inline, as demonstrated with the blue circle). If the circle was a JPG, GIF or PNG and we were supporting Retina displays, the user would download two different versions of this graphic (first the non-Retina version, followed by the replacement Retina version). One SVG will cover all Retina scenarios, as well as scale gracefully to accommodate desktop, tablet and phone views.

And if you couldn’t tell, the first of the two Cardinal logos above is the SVG.

Icon Fonts at a Glance

Like SVG, icon fonts boast resolution-independent scaling and on-the-fly coloring. But where SVG can handle unlimited colors and gradients within the same glyph, icon fonts are generally monochromatic. I say “generally” because it is possible to overlap several icons of differing hues to create multi-colored graphics, but it does require a bit of work. Parker Bennett covers the technique over at CSS-Tricks.

One of the nicer things about icon fonts is that that we can embed multiple icons into a single web font, thereby decreasing an HTTP request for each individual icon to that of a single file. Until recently, this hasn’t been easy to accomplish with SVG, but IcoMoon now includes the ability to export SVG sprites.

In terms of performance, icon fonts are encoded in binary form, which gives them a distinct advantage over their SVG counterparts. Because SVG graphics are text-based (XML), the aggregate size of SVG graphics, as compared to those same graphics embedded in a web font, often yields larger file sizes. Using our Cardinal logo as an example, the file size of the image in different file formats are:

TrueType Icon Font 6KB
SVG Icon Font 18KB
SVG Graphic 14KB
PNG Graphic 12KB

In terms of file size, the TrueType version of the logo is the clear winner here. 

As far as browser support is concerned, icon fonts are appropriately rendered in IE as far back as version 8. However, the @font-face rule, used to load icon fonts, is not supported in Opera Mini, the Nokia XPress Browser, Blackberry 4-5, Android 2.1, and Windows Phone 7-7.8.

When @font-face isn’t supported, or the icon font fails to load for some other reason, you are likely to see results similar to what is depicted below:

Icon font properly rendered.

 

When an icon font fails to load, things get ugly. Without the accompanying “Home” text, the link back to the home page becomes inscrutable.

Other disadvantages to using icon fonts:

  • Browsers interpret them as fonts and will anti-alias them accordingly. This can result in a render that may be less than crisp.
  • Screen readers may read aloud the icon as an alphabetical letter.
  • Pixel-perfect positioning can be difficult because line-height, kerning and other font-specific factors come into play.
  • No good fallback options if the font fails to load.

Something else to consider when using icon fonts is file size. Do you really need to install a full library of icons, such as the 479 included with Font Awesome, if you’re only going to include a half dozen or so in your web project? The full collection of Font Awesome icons in ttf is 112KB, and the supporting, minified stylesheet is 22KB. A good alternative would be to cherry-pick and custom roll only the icons you need from resources such as IcoMoon or Fontello.

Conclusion

As of this writing, 91.25% of globally active browsers support or partially support SVG. With the rate of supporting browsers only increasing and fallbacks available for legacy clients, SVG is worthy of consideration for your next project. The advantages SVG offer over icon fonts typically outweigh the potential performance hit associated with a larger file size. Besides, using fonts to serve up images seems kind of hacky, doesn’t it? In any event, whether you use SVG or icon fonts, either one of these options is better than using raster images for simple iconography and logos.

 

Share:

About The Author

Front End Developer

Micah is a front end developer in Cardinal's Cincinnati office who is passionate about technology, usability, and heavy metal.