Do SVG-enabled browsers ignore alternative images (when included in object tags)?

An illustration that I want to include in a site is 28.1 times s开发者_如何转开发maller in SVG format than the same illustration saved as a PNG.

Unfortunately, I have to cater for browsers that aren't SVG-enabled. So I'm still including the PNG as an alternative, like so:

<object type="image/svg+xml" data="illustration.svg">
  <img src="illustration.png" alt="alternate description">
</object>

Will SVG enabled browsers ignore the PNG in this case or will it still get loaded in the background somehow? (i.e. am I saving on overall load time?)

Both Firefox v4 and Chrome v10 download the alternate image. You will not be saving any bandwidth or load time by using an SVG image with PNG fallback.

Tested by loading this page and looking at the Net panel in Firebug and Chrome's Developer Tools:

Note that this does not mean that using the SVG is not a good idea. You should still use the SVG, as it will print and scale better than the corresponding PNG.

I used something like that:

<object type="image/svg+xml" data="...">
   <!--[if lt IE 9]>
   <img src="img/circle.png" alt="" />
   <![endif]-->
</object>

Internet Explorer < 9 can't display SVG, so it gets the PNG. Almost all other browers can handle the SVG and don't need the fallback.

With Jquery SVG plugin:

$(selector).svg({ 
loadURL: '', // External document to load 
onLoad: null, // Callback once loaded 
settings: {}}) // Additional settings for SVG element

try and catch it, and onFail load the image. :)