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:
<svg xmlns="http://www.w3.org/2000/svg"> <symbol id="aliwright-icon" viewBox="0 0 387 333"> <path fill="#FFFFFF" d="M191.823,90l50.911,50.912l50.911,50.912l-50.911,50.912l-50.911-50.912l-50.912,50.912L90,191.823 l50.911-50.912L191.823,90 M191.824,5.147l-42.427,42.426L98.485,98.485l-50.912,50.912L5.147,191.823l42.426,42.426l50.912,50.912 l42.426,42.428l42.427-42.428l8.485-8.484l8.484,8.484l42.427,42.428l42.427-42.428l50.911-50.912l42.426-42.426l-42.426-42.426 l-50.911-50.912L234.25,47.574L191.824,5.147L191.824,5.147z"></path> </symbol> </svg>
For your information, CSS master Chris Coyier’s article 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:
<div class="site-logo"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"> <svg class="aliwright-icon" title="Ali Wright's logo" role="img"> <use xlink:href="<?php bloginfo('template_directory'); ?>/images/aliwright-logo.svg#aliwright-icon"></use> </svg> </a> </div>
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:
<svg class="aliwright-icon" title="Ali Wright's logo" role="img" viewBox="0 0 53 45"> <use xlink:href="<?php bloginfo('template_directory'); ?>/images/aliwright-logo.svg#aliwright-icon"></use> </svg>
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.Share my post!