Can an HTML img tag have multiple src attributes?

Much like how the video tag c开发者_Go百科an provide multiple source attributes so an mp4 video can fall back to an ogg video, I would like to get an svg image to fall back to an png image.

At the time of the question it wasn't possible. But now it is OK to do like this:

​<picture>
    <source srcset="mdn-logo.svg" type="image/svg+xml">
    <img src="mdn-logo.png" alt="MDN">
</picture>

See docs on MDN

No, it cannot.

However, you can fake it using CSS background images.

To avoid displaying the broken image glyph, you might want to not use an <img> tag at all and instead use two nested elements with different background images. (Note that that would hurt accessibility)

There's a post here that might help: Fallback image and timeout - External Content. Javascript

It offers a few javascript options.

Using a background image works well, but you will have to know what the dimensions of your images are. If you don't know then it may be tricky.

Though this is probably not what you wanted, it's worth mentioning that you can specify different resolutions for retina displays:

<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x,
                                 image-3x.png 3x, image-4x.png 4x">

Just include the svg as <object> and put <img> inside of it.

<object data='image.svg'>
    <img src='image.png'>
</object>

That should work. The png image will only be shown when it's impossible to display svg.

Simple answer... No.