咨询：SVG Sprite在img标签中无法显示，use标签可正常使用

img标签无法通过#锚点引用SVG Sprite里的<symbol>元素，核心原因有两点：

• <symbol>是用于复用的容器元素，默认不会被浏览器直接渲染，只有通过<use>标签引用时才会生成可显示的实例。
• img标签加载SVG文件时，会将整个文件作为独立资源解析，锚点（#）无法触发对内部<symbol>的渲染逻辑；再加上你的主SVG设置了width="0"、height="0"和visibility:hidden，就算能识别锚点，整个SVG也会被隐藏。

方案1：继续使用

这是SVG Sprite的标准用法，兼容性最稳定：

<svg width="50" height="50">
  <use xlink:href="flags.svg#netherlands"></use>
</svg>

现代浏览器（支持SVG 2标准）可省略xlink:前缀：

<svg width="50" height="50">
  <use href="flags.svg#netherlands"></use>
</svg>

方案2：修改SVG文件结构，适配img标签引用 #

将原有的<symbol>替换为独立的<svg>元素，同时移除主SVG的隐藏样式，给每个图标保留唯一id：

<svg xmlns="http://www.w3.org/2000/svg">
  <svg id="netherlands" viewBox="0 0 512 512" width="512" height="512">
    <path style="fill:#FF4B55;" d="M473.655,88.276H38.345C17.167,88.276,0,105.443,0,126.621v73.471h512v-73.471  C512,105.443,494.833,88.276,473.655,88.276z"/>
    <path style="fill:#41479B;" d="M0,385.379c0,21.177,17.167,38.345,38.345,38.345h435.31c21.177,0,38.345-17.167,38.345-38.345  v-73.471H0V385.379z"/>
    <rect y="200.09" style="fill:#F5F5F5;" width="512" height="111.81"/>
  </svg>
  <svg id="russia" viewBox="0 0 512 512" width="512" height="512">
    <path style="fill:#F5F5F5;" d="M473.655,88.276H38.345C17.167,88.276,0,105.443,0,126.621v73.471h512v-73.471  C512,105.443,494.833,88.276,473.655,88.276z"/>
    <path style="fill:#FF4B55;" d="M0,385.379c0,21.177,17.167,38.345,38.345,38.345h435.31c21.177,0,38.345-17.167,38.345-38.345  v-73.471H0V385.379z"/>
    <rect y="200.09" style="fill:#41479B;" width="512" height="111.81"/>
  </svg>
</svg>

修改后即可用img标签正常引用：

<img width="50" height="50" src="flags.svg#netherlands">

方案3：使用CSS背景图实现 #

将SVG Sprite作为背景图，通过锚点指定目标图标：

.flag-netherlands {
  width: 50px;
  height: 50px;
  background: url(flags.svg#netherlands) no-repeat center/contain;
}

在HTML中使用容器元素承载：

<div class="flag-netherlands"></div>

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