equivalent for fallback from webp to jepg

Question

I have the following classic SVG code:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
  <image 
    xlink:href="foo.webp"
    height="100"
    width="100"
    x="0"
    y="0"
    image-rendering="optimizeQuality"
  />
</svg>

However, on some browsers, webp is not yet supported (iOS and macOS I am looking at you: https://caniuse.com/?search=webp) ...

So, is there a way similar to the <picture> element to do something like this (syntax obviously wrong, but I hope it does convey the idea):

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
  <image 
    xlink:href="foo.webp"
    height="100"
    width="100"
    x="0"
    y="0"
    image-rendering="optimizeQuality"
  />
  <fallback_to>
  <image 
    xlink:href="foo.jpg"
    height="100"
    width="100"
    x="0"
    y="0"
    image-rendering="optimizeQuality"
  />
</svg>

... without of course getting the double-http-hit problem. And without using client-side Javascript (modernizr or other).

Many thanks!

chrwahl · Accepted Answer · 2021-09-15T11:28:38.290

0

Maybe you could use <foreignObject>. Inside the element you can specify the HTML that you need, like the <picture> element.

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" width="400">
  <foreignObject x="0" y="0" width="300" height="200">
    <picture xmlns="http://www.w3.org/1999/xhtml">
      <source srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Johnrogershousemay2020.webp/200px-Johnrogershousemay2020.webp" type="image/webp">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Johnrogershousemay2020.webp/200px-Johnrogershousemay2020.webp.png" alt="logo">
    </picture>
  </foreignObject>
</svg>

edited Sep 15 '21 at 11:28

answered Sep 15 '21 at 11:22

chrwahl

8,675
2
20
30

will try and you guys know, thanks :) – Hal Sep 16 '21 at 12:29
this seems like it is working - very natural and no client-side or server-side detection, 100% native, so is the chosen answer, thanks! – Hal Sep 20 '21 at 09:34

score 0 · Answer 2 · answered Sep 15 '21 at 11:39

0

You could detect WebP support and hide the relevant <image> element based on the results.

answered Sep 15 '21 at 11:39

Paul LeBeau

97,474
9
154
181

yup... but id prefer to do it server-side. python. – Hal Sep 16 '21 at 12:28
You detect WebP in the browser, and send support details in the request. Eg. as a request header or a cookie. – Paul LeBeau Sep 17 '21 at 10:17
mmm that is a nice idea, which I will try :) – Hal Sep 20 '21 at 07:28

equivalent for fallback from webp to jepg

2 Answers2