Exploring SVG icons
Estimated reading time: 3 minutes
I've been meaning to explore the use of SVG images as icons on the web for a while now.
I came across Github's interesting article on why they updated all their icons to SVGs when I was having issues with a client's view of the custom dashboard I had created. I built it using a combination of jQuery , Underscore , Gridster & Bootstrap . They were having an issue seeing any of the icon fonts I was using. I was using a combination of Bootstrap's Glyphicon set and FontAwesome (they're both fantastic icon sets, but neither offered me all the icons I needed on their own). It turned out to be an unrelated issue, but this led me into a whole investigation of icon fonts vs static images, and therefore to the Github article.
Initially the logo for my site was a simple PNG, but after reading about the benefits of SVG it reminded me I needed to explore this as an option. There are a lot of excellent tutorials and resources on the subject, but the main one I found most helpful was Sara Soueidan's An Overview of SVG Sprite Creation Techniques . She offered various interesting solutions. I settled on one particular technique 'Referencing an external SVG sprite in HTML'. I didn't need to go down the route of using Grunt , seeing as I've only the one icon so far (it's certainly a technique I will store for later though). I use Grunt quite a bit on other projects, particularly for SASS/Compass compiling & minifying of CSS/JS.
Thankfully I had created my logo in Adobe Illustrator, so it was already a vector file which I could easily export to SVG. After tidying it up in my editor of choice (Sublime Text 2), it looked like this:
For your information, CSS master Chris Coyier's article on SVG sprites highlights that, in testing, Jonathan Neal discovered you need to have the xmlns attribute on the
<svg> for it to work.
In addition I used Jonathan Neal's plugin svg4everybody so it also displays the logo correctly in older versions of IE (by replacing with a PNG version).
After adding the appropriate resources to my header (and tweak my original CSS), all I had to do was update the logo HTML like so:
The difference is now quite incredible, particularly when you view comparisons on a Retina display:
It still wasn't quite right however. When I tested in the browsers on my Samsung S4 mini, the default Android browser was ok, but strangely both Firefox & Chrome displayed the logo incorrectly:
I discovered I needed to add the viewBox attribute with the correct dimensions to the svg tag:
I'm hoping that's all the quirks ironed out. It's been a useful exercise, one I've been meaning to do for a while. I'll definitely look at the Grunt options if I come to using a greater number of icons.design