Chrome浏览器中<use>引用SVG Sprite失效问题排查与解决

问题概况 #

• 2024年6月20日起，两个网站的SVG Sprite在Chrome桌面端失效，该实现方案已稳定运行4年，近期无网站代码更新
• Firefox、Opera及移动端Chrome均能正常显示SVG Sprite
• 页面使用的代码示例：

  <svg><use xlink:href="/img/public/icons.svg#fb"></use></svg>
  

• 目标SVG文件icons.svg包含symbol元素定义及内联样式

排查尝试 #

• 将已废弃的xlink:href属性替换为标准href，问题未解决
• 测试Chrome正式版126.0.6478.115及Beta版127.0.6533.17，故障复现
• 对应Chromium相关Bug已修复，但修复内容尚未推送到当前Beta版本

临时修复方案 #

移除icons.svg文件中的内联样式后，SVG Sprite可在Chrome桌面端正常显示

额外发现的Chrome缓存问题 #

更新SVG文件后，执行页面刷新、手动清除浏览器缓存操作均无法加载最新内容，仅在无痕窗口中能看到更新后的SVG Sprite

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