CodePen

HTML

            
              <svg width="143" height="27">
  <!--[if (lte IE 8)|(!IE)]>
  <style>.svg {display: none;}</style>
  <img src="http://s.cdpn.io/3/svg.png"  width="143" height="27" />
  <![endif]-->
  <image class="svg" xlink:href="http://s.cdpn.io/3/svg.svg"  width="143" height="27" />
</svg>


<h2>About</h2>
<ul>
  <li>Conditional comment prevents double downloads in IE9+, specifically, it doesn't download the .png.</li>
  <li>In IE8, a empty image icon shows up unless we set the image with the .svg src to display none.</li>
  <li>Need to test and see if old Android, 2.3 and lower still get .png</li>
</ul>
            
          
!
via HTML Inspector

CSS

            
              body {
  font-family: sans-serif;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................