为什么h1标题中插入的SVG图标无法正常显示？

排查及解决方法 #

• 检查SVG引用ID是否匹配
  确认你的icons.svg文件内部是否存在id="shopping-cart"的可复用元素（一般是<symbol>标签），ID区分大小写，拼写必须完全一致，存在拼写错误、大小写偏差都会导致引用失效。
• 检查SVG元素的宽高配置
  你当前的<svg>标签仅设置了类名，未指定宽高属性，也没有对应CSS类设置宽高的话，浏览器会采用默认值，可能宽高为0导致图标不可见。可以先直接给svg标签添加测试属性<svg width="18" height="18" class="my-svg-inline--fa my-fa-w-18">验证是否是该问题。
• 检查服务器SVG资源配置
  1. 直接访问icons.svg的完整地址，确认资源可以正常加载，没有404、403等报错
  2. 检查服务器返回的SVG资源响应头Content-Type是否为image/svg+xml，如果返回其他类型（比如text/plain）浏览器无法正常解析SVG
  3. 确认站点没有配置内容安全策略（CSP）限制内联SVG或者SVG雪碧图的加载
• 检查SVG雪碧图结构是否规范
  确认icons.svg是标准的雪碧图结构：所有图标都用<symbol>标签包裹，每个<symbol>都设置了独立ID，且没有嵌套层级问题。如果图标是用普通<g>标签包裹未封装为<symbol>，<use>标签无法正常引用。
• 清理站点缓存
  如果之前修改过雪碧图文件，可能存在CDN缓存、浏览器缓存的旧版本文件，清空缓存后重新测试即可。

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