Use SVG for your logo and still support old IE and Android

Posted on

With responsive design and retina displays becoming the norm, bitmap images are becoming a sticking point; they simply don’t fit in with our flexible and resolution-independent web. So, it makes sense to use vector images instead wherever it’s appropriate, and one great place to do this is the logo.

A logo is typically made up of type and other shapes, and is therefore well-suited to a vector format, so serving it as an SVG makes sense — it may save some file size and will scale up elegantly when the user zooms in or on retina displays. The “Can I use SVG?” support chart looks great…with the exception of IE<9 and Android 2.x. Here’s a nice way of dealing with that, minimising JavaScript and double requests:

<a class="site-logo" href="/">
    <!--[if gte IE 9]><!--><img alt="Acme Supplies" src="logo.svg" onerror="this.src=logo.png;this.onerror=null;" /><!--<![endif]-->
    <!--[if lt IE 9]><img alt="Acme Supplies" src="logo.png" /><![endif]-->
</a>

The way we’ve used conditional comments here means that IE 8 and below will get the PNG fallback without any JavaScript or double requests, whilst other non-SVG-supporting browsers such as Android 2.x will try to use the SVG version, fail, and then use the fallback PNG instead thanks to the inline onerror handler.

(Incidentally, you could save a few characters by using [if IE 9] for the first conditional comment, as IE10 and up will no longer use conditional comments, but for the person (possibly you) who looks at your markup in 6 months’ time and wonders what’s going on, the longer statement makes a bit more sense.)

Also, if you looked at the markup above and thought “but I use a background image to display my logo”, then you should read this post by Harry Roberts about why you should use an <img> tag instead.

Optimisation

If your SVG file was generated by a vector image tool such as Illustrator or Inkscape, you might want to try running it through Peter Collingridge’s SVG Optimiser, which could take a big percentage off the file size without affecting the image. It’s like Smush.it but for SVG.

Also, remember that because SVG is text-based it can be gzipped; be sure to configure this on your server if it’s not already.

Update 21st August 2013: Updated with focus on both old IE and Android 2.x, rather than mostly the former. Thanks to Scott Jehl and Mat Marquis for the neat inline onerror handler.

Comments off