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