SVG vs. Icon Fonts: FIGHT!

Using SVG’s in web design and development has taken off in the last year or so. For those who don’t know, SVG, or Scalable Vector Graphics, is an image format for vector graphics, much like an Illustrator or EPS file that can be scaled to any size without losing any clarity (as opposed to bitmap pixel based image formats like JPG, GIF, or PNG, which lose their clarity when scaled). They’ve grown in popularity as retina capable devices have become more prevalent, and as web designers have been deluged with more and more devices to design for. They also allow for some advanced visuals, such as animation and multiple colors for just one SVG image. One of the bigger drawbacks at this point is browser support, especially since Internet Explorer 8 is still used.

Icon fonts, on the other hand, have been the go-to resource for web designers for some time now. They are similar to SVG files in that they are also vector based. They do have some drawbacks in that they aren’t as powerful as using an SVG image – namely the ability to easily create complex animations and using multiple colors and gradients.

Here’s a good overview of the advantages and disadvantages of each technique:

Advantages of SVG:

  • Lightweight code, small file sizes that compress well
  • Scalable, and looks great on retina displays
  • Animation
  • Multiple colors are easily achieved
  • Great cross-browser rendering
  • Versatility – Can be file based or placed directly via code

Disadvantages of SVG:

  • Browser support – IE8 doesn’t support SVG, although you can provide a fallback image
  • Displaying SVG images at the smallest of sizes can lose their clarity

Advantages of Icon Fonts:

  • Bundling of icons into a single file for less HTTP requests
  • Scalable, and looks great on retina displays
  • Great browser support (IE8 and above, Chrome, Firefox, Safari, Opera, iOS, Android)
  • Flexibility in color variations by setting solid colors and hover colors in CSS
  • Quick to use for rapid prototyping

Disadvantages of Icon Fonts:

  • Icon fonts can sometimes display slightly differently across browsers (i.e. Firefox may render icons fonts as slightly thicker than other browsers)
  • Font files can grow to be large, adding to page weight, especially if not all fonts are used
  • Opera Mini browser is not currently supported

So where does this leave us? Well, right now, SVG files are especially good for single images, such as logos. We can render a company logo on website using an SVG and provide an image fallback for older browsers that don’t understand SVG (like IE8). (That being said, SVG files can also be combined into a set of font icons or an image sprite fairly easily, too). We’ve even started using SVG on our own site (check out our logo!).

If you need to use a large number of vector images on your site, icon fonts are still a great way to go. For those cases where you want to create animations, you can still use SVG images in conjunction with icon fonts to do what you want.

With Windows XP (which normally runs IE8) becoming unsupported later in 2014, we’ll see more people moving to newer Windows operating systems that support more recent versions of Internet Explorer. With this, worldwide support for SVG images will also increase. By the end of 2014, using SVG images may overtake popularity of using of icon fonts and web designers should have one less browser compatibility to worry about.

Resources for using SVG:

http://css-tricks.com/using-svg/

http://caniuse.com/#search=SVG%20in%20css

http://tympanus.net/codrops/2013/11/27/svg-icons-ftw/

http://design.tutsplus.com/tutorials/svg-files-from-illustrator-to-the-web–vector-20899

Resources for animating SVG:

http://www.pencilscoop.com/2013/11/animate-svg-icons-with-css3-jquery/

http://snapsvg.io/

Want brilliance sent straight to your inbox?