<picture> 相当于从 webp 回退到 jpg

Question

我有以下经典SVG代码：

<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>

但是，在某些浏览器上，webp 尚不支持（iOS 和 macOS 我在看你：https://caniuse.com/?search=webp）...

所以，有没有类似于<picture>元素的方法来做这样的事情（语法明显错误，但我希望它能传达这个想法）：

<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>

...当然没有遇到双重http-hit问题。并且不使用客户端 Javascript（modernizr 或其他）。

非常感谢！

Answer 1

也许你可以使用 <foreignObject>。在元素内部，您可以指定所需的 HTML，例如 <picture> 元素。

<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>

Answer 2

您可以 detect WebP support 并根据结果隐藏相关的 <image> 元素。

<picture> 相当于从 webp 回退到 jpg

<picture> equivalent for fallback from webp to jepg

html

fallback

svg

jpeg

webp