为 svg 元素中的 webp 图像提供后备，无需额外请求

Question

我有一个在元素中<svg>使用图像的元素。它适用于 Chrome 和 Opera，但在 Firefox 中，没有显示任何内容，因此我尝试添加另一个包含 png 的元素。现在它可以在 Firefox 中运行，但在 Chrome DevTools 中检查后，两个图像都已加载，如请求数量所示。.webp<image><image>

如何仅强制 1 个请求（加载 1 个图像），同时为当前不支持 webp 的浏览器在 svg 元素内提供 webp 图像的后备？代码是：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500">
  <image xlink:href="image.webp" width="500" height="500"/>
  <image xlink:href="image.png" width="500" height="500"/>
</svg>