htmlsvgvector-graphicsobject-tag

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 smaller 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?)


Solution

  • 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: Firebug showing requests for both tiger.svg and tiger.png Chrome's Developer Tools showing requests for both tiger.svg and tiger.png

    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.