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:

<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 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:

<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.

The banner image is originally a photo by Florian Olivo on Unsplash