为SVG元素中的WebP图片实现无额外请求的降级兼容方案

这个场景我太熟悉了——既要给不支持WebP的浏览器（比如老版本Firefox）提供PNG fallback，又不想让支持WebP的浏览器加载两张图浪费资源。核心解法是利用SVG原生的<switch>元素结合特性检测，让浏览器只加载符合自身支持能力的那张图，完全避免双请求。

具体实现方案 #

直接上可运行的SVG代码示例：

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <switch>
    <!-- 仅支持WebP的浏览器会加载这张图 -->
    <image 
      href="your-image.webp" 
      width="100%" 
      height="100%" 
      requiredFeatures="http://www.w3.org/TR/SVG11/feature#ImageFormatWebP" 
    />
    <!-- 不支持WebP的浏览器会跳过上面的元素，加载这张PNG -->
    <image 
      href="your-image.png" 
      width="100%" 
      height="100%" 
    />
  </switch>
</svg>

原理说明 #

• <switch>是SVG的原生条件渲染元素：它会从上到下检查子元素的条件，只渲染第一个符合条件的子元素，其余元素会被浏览器完全忽略（不会发起资源请求）。
• requiredFeatures="http://www.w3.org/TR/SVG11/feature#ImageFormatWebP"是SVG标准定义的特性检测标识，支持WebP图片格式的浏览器（比如Chrome、Opera）会识别这个特性，因此会加载第一个<image>；不支持WebP的浏览器（比如老Firefox）会跳过这个元素，直接加载后面的PNG fallback。

验证效果 #

你可以在Chrome开发者工具的Network面板里查看，只会看到WebP的请求；切换到不支持WebP的Firefox里，只会看到PNG的请求，完美解决双请求问题。

内容的提问来源于stack exchange，提问作者JAT86