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