时间戳

首页 > 解决方案 > 相当于从 webp 回退到 jepg

html - 相当于从 webp 回退到 jepg

问题描述

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

非常感谢！

标签： htmlsvgjpegwebpfallback

解决方案

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

推荐阅读