Use SVG for a Logo with Solid Fallbacks

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

A logo is typically made up of type and other vector shapes, and is therefore well-suited to SVG — 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. This pattern supports those (and other non-SVG) browsers without more JavaScript or HTTP requests than necessary.

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

The way we’ve used conditional comments here1 means that IE8 and below will get the PNG fallback without any JavaScript or extra HTTP 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 handler2.

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

  2. If you’re looking at the markup thinking “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.