<pictures> 相当于 webp 到 jpg 的回退答案

【问题标题】：<picture> equivalent for fallback from webp to jepg<pictures> 相当于 webp 到 jpg 的回退
【发布时间】：2021-11-09 21:30:54
【问题描述】：

我有以下经典的 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 或其他）。

非常感谢！

【问题讨论】：

标签： html svg jpeg webp fallback

【解决方案1】：

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

【讨论】：

是的......但我更喜欢在服务器端进行。蟒蛇。
您在浏览器中检测到 WebP，并在请求中发送支持详细信息。例如。作为请求标头或 cookie。
嗯，这是个好主意，我会试试的:)

【解决方案2】：

也许你可以使用<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>

【讨论】：

会尝试，你们知道，谢谢:)
这似乎正在工作 - 非常自然，没有客户端或服务器端检测，100% 原生，所以选择的答案也是如此，谢谢！