在 SVG 中使用 WebP 作为背景图像答案

【问题标题】：Using WebP as a background image in SVG在 SVG 中使用 WebP 作为背景图像
【发布时间】：2017-01-10 12:52:41
【问题描述】：

所以我想做与我在 HTML 中所做的相同或相似的事情：

   <picture>
      <source type="image/webp" srcset="my-image.webp">
      <img src="my-image.jpg">
   </picture>

但是，显然这是行不通的：

   <svg>
      <picture>
         <source type="image/webp" srcset="my-image.webp">
         <img src="my-image.jpg">
      </picture>
   </svg>

我可以使用 .htaccess 方法，但由于 302 HTTP 重定向，我不希望这样做。

该解决方案还需要在没有任何 JavaScript 技巧的情况下工作...

【问题讨论】：

贴在foreignObject标签中
@RobertLongson 听起来很简单，但您能否提供一个示例或至少提供更多线索？我只希望浏览器下载其中一个文件，而不是两者。
添加一个foreignObject标签作为svg标签的子标签，赋予它宽度和高度属性，然后添加图片元素作为foreignObject标签的子标签。 IE。只需将 foreignObject 标记插入现有的层次结构。
那不显示任何东西。在 HTML 文件中工作。我会看看我是否可以创建一个示例。

标签： html svg jpeg webp

【解决方案1】：

<svg>
  <image
    href="hello-world.jpg"
    x="20" y="20"
    height="160" width="160"
  />
</svg>

mozilla 文档：https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image

与Does SVG support embedding of bitmap images?重复

【讨论】：

【解决方案2】：

这就是我最终所做的，这要感谢 Robert Longson 的意见：

    <foreignObject x="0" y="0" width="100%" height="100%">
      <picture>
        <source
          width="1180"
          height="500"
          type="image/webp"
          class="lazyload"
          data-srcset="http://satyr.io/1180x500?2&type=webp&text=webp@1x&texture=graphpaper&delay=2g 1x,
             http://satyr.io/2360x1000?type=webp&text=webp@2x&texture=graphpaper&delay=2g 2x" />
        <source
          width="1180"
          height="500"
          type="image/jpeg"
          class="lazyload"
          data-srcset="http://satyr.io/1180x500?2&type=jpg&text=jpg@1x&texture=graphpaper&delay=2g 1x,
             http://satyr.io/2360x1000?type=jpeg&text=jpeg@2x&texture=graphpaper&delay=3g 2x" />
        <img
          width="1180"
          height="500"
          class="lazyload"
          data-src="http://satyr.io/1180x500?2&type=jpeg&text=jpeg@1x&texture=graphpaper&delay=3g"
          alt=""
      /></picture>
    </foreignObject>

【讨论】：