23

Much like how the video tag can 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.

Jason Christa
  • 12,150
  • 14
  • 58
  • 85

7 Answers7

20

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

Konstantin Smolyanin
  • 17,579
  • 12
  • 56
  • 56
6

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)

SLaks
  • 868,454
  • 176
  • 1,908
  • 1,964
  • 1
    This would also mean foregoing transparency, as the svg and png wouldn't be pixel perfect matches, especially if the page was zoomed in. – Jason Christa Apr 12 '10 at 15:48
5

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.

Community
  • 1
  • 1
Armstrongest
  • 15,181
  • 13
  • 67
  • 106
4

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">
Nacho Coloma
  • 7,070
  • 2
  • 40
  • 43
2

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.

Spadar Shut
  • 15,111
  • 5
  • 47
  • 54
  • Unfortunately object and img don't behave the same way. img picks up sizing from the svg better than object and also behaves better when zoomed. Object can execute scripts and img can't. Also img is semantically what I mean and object feels like a hack. – Jason Christa Apr 18 '10 at 18:06
-2

Img tag has error event

Error event fires when the image is not found!

  <img
    src="imgSrc || '/assets/images/placeholder.webp'"
    (error)="imgSrc=''"
  />

Show placeholder image if image not found.

Ahmet Emrebas
  • 566
  • 6
  • 10
-6

Simple answer... No.

Taylor Satula
  • 520
  • 1
  • 5
  • 20