Design and Development

What is so amazing about Icon Fonts and SVG’s?

By

Filed under: Responsive Design, Web Development.

The year is 2010, the web world is peacefully floating along…  suddenly everything is shattered as Apple announces the world’s first high-resolution Retina screen.

Designers everywhere are reeling with this news trying to figure out a solution to this problem. Suddenly one designer has an idea – we can create two sizes of all our images and serve them up based on your screen resolution!

The only problem is that not only is maintaining two versions of every image a hassle, but it hasn’t really solved the problem.

The problem is not Retina screens, the real problem is static non-scalable images. It is only a matter of time until Apple or Samsung releases a 4x retina display that will force designers to begin creating 4 versions of every image asset.

Icon Fonts vs SVG’s

What we need are truly scalable vector graphics – enter Icon Fonts and SVG’s. Both of these formats give us a huge step in the right direction of completely resolution independent graphics.

No more creating multiple sizes of your jpg/png images, and serving them up with media queries and javascript – hooray!

Icon Fonts

First off, let’s talk about Icon Fonts.

An Icon Font is pretty self-explanatory: A font file that is filled with icons and glyphs instead of letters and numbers.

To use an icon font, all you need to do is embed the icon webfont, lookup whatever icon you want to use on the character-map, and then type that letter or number.

For the popular Pictos font, the letter m is a Music Symbol (or 2 barred eighth notes to be exact).

You can then style this icon with CSS properties just like you would any normal alphabetical letter. You can change colors, font-weights, add a drop-shadow, and even rotate the icon.

This gives you a huge amount of freedom and flexibility in using these icons throughout your design.

Here are some of the main benefits of icon fonts.

Icon Font Benefits:

  • Icon fonts have relatively small file-sizes, especially the more icons you use
  • Browser support for IE7 & IE8 – yippee… ahem, who still uses these anyway???
  • Full CSS styling capabilities
  • One single http request

Okay, great so I should just use icon fonts everywhere instead of all my images? Well not exactly. There are a few key things you need to remember when using Icon Fonts.

  1.    Icon Fonts do not work for complex images. Remember, these are icons, not complex photos. As long as your icons are fairly basic, you should be able to make it work.
  2.    Icon Fonts are monochrome based, so you can only have one color per icon. Think of your icon as an actual letter, and you will get the right idea of what is possible.
  3.    You have to create/find an Icon Font. Photoshop does not allow you to export all your icons directly into a font file. However, this is not too much of a hassle as there are many great icon font generators.

Here is a list of some of the most popular Icon Font generators:

Once you have generated your font, just run it through Font Squirrel’s webfont generator and link to it in your HTML.

Here are a few links to some helpful resources for Icon Fonts:

SVG’s

SVG stands for Scalable Vector Graphics. But if you are like me, you may be thinking – I thought PNG’s were scalable? Well you are right, and not so right.

PNG’s can be scaled indefinitely in an image editor like Photoshop or Illustrator, but once you use them on the web, they are completely non-scalable.

This is why SVG’s were invented, to bring truly scalable vector graphics to the web. You can create one image and scale it to a plethora of different sizes for retina devices, 2x retina devices, or even small screens like older Blackberry’s.

One thing to remember is that SVG is a vector format – so you cannot use it for photos. You will have to use some other techniques for all your beautiful full-screen photos.

Here are a few of the major benefits of SVG’s:

  1. SVG images are actually written in xml. This means you can manipulate images directly in your code editor (that is, if you take the time to learn the language). This gives you a ton of power to do complex manipulations and animations that are not possible with standard raster-based images.
  2. SVG images are accessible with client-side scripts. This means you can manipulate certain parts of the image with Javascript.
  3. SVG’s are Polychromatic, so you can have multiple colors in your design. This is where SVG’s really shine over icon fonts.

Question: if SVG’s are completely scalable, why don’t more designers use them?

Let’s take a minute to look at a few of the downsides to using SVG graphics.

Disadvantages of SVG’s

  1.  An SVG file can be larger than a traditional jpg or png. This is especially true in cases where you are working with smaller images.
  2.  Browser support is not very good for more complex images. The worst part about current SVG support is that there is very poor support when used as a background image! Inline SVG images have much better support, but who wants to embed huge sections of inline xml code?
  3.  You cannot manipulate SVG with CSS text properties. So unlike Icon Fonts, this is an area where SVG’s are not as flexible. Because an SVG file is an image, not a font, you have a lot less options available for styling.

Another big hurdle for many designers is that you cannot create SVG’s in Photoshop. So you are going to have to use another design tool like Sketch, Illustrator or Inkscape.

Use Cases

By now you are beginning to get a better idea of when you should be using an Icon Font, and when you should switch to an SVG.

Here is a list of things that should help you remember which solution to use in different situations.

Use an Icon Font if:

  • Your graphic is very simple
  • You only need one color
  • You need to modify some of the attributes via CSS

Use an SVG image if:

  • You need full color capabilities
  • You don’t need IE8 support (there are some workarounds to this)
  • Your image is fairly simple – especially if you are setting it as the background image

Use a jpeg if:

  • You are working with photos
  • Your graphics files are smaller as a jpg than a png

All other situations: use a png.

Conclusion

With today’s high-resolution screens like the iPhone 5, HTC One, iPad Retina, Chromebook Pixel, and the Macbook Pro Retina you simply cannot only design for standard resolution screens.

You need to use a combination of Icon Fonts, SVG’s, and JPEG’s (and let’s not forgot CSS3) in order to create a truly scalable design of beauty and usability.

Action item for this week

Download Sketch or Inkscape and create a few logos in SVG. It may take you a little while to get the hang of these tools, but the benefits are well worth it.  You could also try combining all the icons on your site into a nice Icon Font instead of your current png sprites.

The main goal is to move your site toward a truly high-resolution, completely scalable design.

If you have worked with SVG’s or Icon Fonts and have any thoughts or questions, I want to hear from you. Join the discussion below!

Join the discussion below, we'd love to hear from you!

  1. Rutvik

    Very nice and clear explanation about icon fonts and svg as well as advantages and disadvantages of each of them.
    Thanks !!!

    Reply
  2. Rachel

    This article is pretty old but still relevant today so I just wanted to say thanks for such a concise explanation.

    I have been working with SVGs recently after being exasperated with fuzzy images on retina and wanted to just update a couple of your points, perhaps they have changed since the time of writing:

    Pros of SVG:
    -Including the SVG as inline XML means there are less requests to the server for images so its quicker to render your page
    -Including the SVG as inline XML also allows you to manipulate your image with CSS and javascript, you can also apply really cool filter effects like blurring the image
    -So easy to get the XML for the inline SVG, you just ‘save as’ in illustrator, choose SVG, and click ‘SVG code’, and voila there it is!

    Negatives of icon fonts:
    -Not accessible. If someone was to use a screen-reader on your site they would find that the icon links were read out as the single letters you used to identify the icon.

    Reply

Leave a comment

  • (will not be published)