title: SVG for images in browsers with PNG fallback
body: <p>I'm looking to use SVG versions of a company logo on a website. At present, all current versions of major browsers (IE, Safari, Chrome, Firefox, Opera) support SVG, so this doesn't seem crazy. However, old browsers are still out there, so I need to fall back to PNG support.</p>
  
  <p>The obvious solution is to put the SVG content in an <code>object</code> tag like so (forgive the inline styles...):</p>
  
  <pre><code>&lt;object data='logo.svg' style='height:3em' &gt;
      &lt;img src='logo.png' style='height:3em' /&gt;
  &lt;/object&gt;
  </code></pre>
  
  <p>Which in theory should render the <code>object</code> if possible, or else render the <code>img</code>. However, Chrome doesn't like this and applies the <code>height</code> style to the object itself but not the SVG, so I end up with a little iframe-like box with scrollbars, showing a huge logo.</p>
  
  <p>Another solution would be to use the PNG as the <code>img</code> source, and then swap it out at render time with the SVG source with javascript, if I think I'm running on a SVG-capable browser. This is not ideal because the PNG will still get downloaded, and I'm not confidant I can properly detect SVG support. Unfortunately, jQuery doesn't seem to have a SVG-detect feature.</p>
  
  <p>Finally, since my website is deployed with ASP.NET, I could inspect the user agent string before serving the page, and specify the <code>img</code> source depending on whether I think it will support SVG. But this also has the potential problem that I am not confidant I can make the right call.</p>
  
  <p>What is the preferred way of doing SVG for images?</p>