Auto Trader and the switch to an SVG Icon Solution

October 22, 2014 at 19:06

Over the last two months I have been working to come up with an efficient method of implementing SVG Icons into the Auto Trader website. Across the site there are numerous different methods of icon implementation. The oldest (and now redundant) method of implementation is via a .png sprite which, with the help from Sass and Compass can be created very easily. Unfortunately, .png's generally have quite large file sizes, delaying page-load times. Another negative aspect of the .png implementation, is it's inability to scale to different viewport sizes and different screen resolution.

More recently, we have trialled a web-font icon implementation that has proved very successful. Web-font icons are light-weight and scalable, they work by replacing the letters in a font with simple icons. Using this method, there is no need for any images to be downloaded, which cuts down on HTTP requests and download times. When implementing web-fonts it is simply a case of calling the font glyph that the icon is assigned to. The browser will then draw the icon and style it according to it's CSS. With regards to styling, web-font icons have all of the same freedoms and restrictions that regular web-fonts have.

As brilliant as they are, web-fonts also have some fairly major drawbacks. The first of which is anti-aliasing, as the browser draws the icons, it will add artefacts to the shape to give it an appearance of being smooth. For more information on how web browsers use anti-aliasing, there is a brilliant HTML5 Rocks article. Although anti-aliasing is a useful tool, it can sometimes distort icons, especially when they appear at sizes below 12px. The second issue with web-fonts is web-font support. Web-fonts are widely supported across most browsers, however, they can be unreliable. In some cases, the fonts just will not load and will cause icons to be missing, and in some cases the icons will be replaced by emoji characters as seen in the screenshot below.

In the above image, you can see that the browser has fallen back to emoji characters instead of the Auto Trader icons. This is an issue common with iOS devices, the issue occurs when the web-font cannot be loaded for whatever reason, and the Unicode characters they are mapped to are displayed instead. The final issue with web-fonts became apparent when testing the site across browsers. Whilst developing the new Search page, the icons had been placed onto pseudo-elements to tie them into their respective labels or divs. It was later found that IE8 does not support the use of web-fonts on pseudo-elements. Useless....

As a result, I began working on a .png fallback solution for all of these icons. It was at this juncture that I began my research into .svg icon solutions. SVGs are simply XML files that, like web-fonts, are drawn directly by the browser and don't require any image files to be downloaded. There are a great many positives that both SVGs and web-fonts share, they are both lightweight, scalable and will adapt to any viewport size or resolution a user may have. However, I believe SVGs have a couple more positives over web-fonts... The first of which is animation! SVGs can be animated and controlled with a few simple lines of JavaScript, giving a whole new dimension of creativity to the site's icons. Using SVG icons in combination with CSS gives much greater control than can be found using web-fonts and CSS.

SVGs can be implemented in a wide variety of different ways, they can be inserted as inline HTML, which has accessibility benefits as they allow you to set a <title> on the icon which will be read by some screen-readers, this can sometimes be an issue with web-fonts as some screen-readers will pick up on the Unicode character of the icon and read out gibberish. Now, for the negatives. The biggest negative of an SVG icon solution is that they are not supported by IE8. Unfortunately, Auto Trader must still support those users who linger on older browsers. As a result, A .png fallback solution must be devised. Thankfully, for every method of implementing an SVG there is a very simple method of providing a fallback to accompany it.

You might be asking "What is the point of providing all of these new flashy icons if there still needs to be an old method supporting them?" I have asked myself the same question many times. Thankfully, Microsoft themselves recently announces that they will stop supporting their own outdated browsers, which will hopefully mean a surge of users migrating from older to newer browsers. And that will mean that all fallbacks can be removed from the code, and there will be nothing but nice, scalable and lightweight SVGs left. That is why I decided to switch from web-font icons to SVG icons, I will write a follow-up post detailing my chosen methods of implementation.

Thoughts, Development