如何在HTML中使用SVG文件中的单个图标？

我有一个包含两个图标的SVG文件，代码如下：

<svg width="108" height="64" viewBox="0 0 108 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M41 32C41 27.0312 36.9688 23 32 23C27.0312 23 23 27.0312 23 32C23 36.9688 27.0312 41 32 41C36.9688 41 41 36.9688 41 32Z" stroke="black" stroke-width="1.5" stroke-miterlimit="10"/>
<path d="M32 28.25V35.75M35.75 32H28.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M76 22.25C70.6239 22.25 66.25 26.6239 66.25 32C66.25 37.3761 70.6239 41.75 76 41.75C81.3761 41.75 85.75 37.3761 85.75 32C85.75 26.6239 81.3761 22.25 76 22.25ZM79.75 32.75H76.75V35.75C76.75 35.9489 76.671 36.1397 76.5303 36.2803C76.3897 36.421 76.1989 36.5 76 36.5C75.8011 36.5 75.6103 36.421 75.4697 36.2803C75.329 36.1397 75.25 35.9489 75.25 35.75V32.75H72.25C72.0511 32.75 71.8603 32.671 71.7197 32.5303C71.579 32.3897 71.5 32.1989 71.5 32C71.5 31.8011 71.579 31.6103 71.7197 31.4697C71.8603 31.329 72.0511 31.25 72.25 31.25H75.25V28.25C75.25 28.0511 75.329 27.8603 75.4697 27.7197C75.6103 27.579 75.8011 27.5 76 27.5C76.1989 27.5 76.3897 27.579 76.5303 27.7197C76.671 27.8603 76.75 28.0511 76.75 28.25V31.25H79.75C79.9489 31.25 80.1397 31.329 80.2803 31.4697C80.421 31.6103 80.5 31.8011 80.5 32C80.5 32.1989 80.421 32.3897 80.2803 32.5303C80.1397 32.671 79.9489 32.75 79.75 32.75Z" fill="black"/>
<rect x="0.5" y="0.5" width="107" height="63" rx="4.5" stroke="#9747FF" stroke-dasharray="10 5"/>
</svg>

我尝试用<use>标签调用其中一个图标，但HTML里完全没显示：

<svg>
    <use href="icons/circle.svg"></use>
</svg>

用<img>标签能显示完整图像，请问能不能通过<svg>标签选择并显示特定图标？

可以实现，但得先修改你的原始SVG文件，给每个图标单独加上<symbol>标识，因为<use>标签是通过ID引用SVG内部的独立符号的。具体操作如下：

步骤1：修改原始SVG文件 #

把每个图标包裹在<symbol>标签里，给每个<symbol>设置唯一的id，同时添加viewBox属性（确保图标缩放正常）。另外可以去掉原SVG里的虚线边框，因为它是整个画布的装饰，不是图标本身。修改后的代码如下：

<svg width="0" height="0" viewBox="0 0 108 64" fill="none" xmlns="http://www.w3.org/2000/svg">
  <!-- 第一个图标：十字圆圈 -->
  <symbol id="cross-circle" viewBox="23 23 18 18">
    <path d="M41 32C41 27.0312 36.9688 23 32 23C27.0312 23 23 27.0312 23 32C23 36.9688 27.0312 41 32 41C36.9688 41 41 36.9688 41 32Z" stroke="black" stroke-width="1.5" stroke-miterlimit="10"/>
    <path d="M32 28.25V35.75M35.75 32H28.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  </symbol>

  <!-- 第二个图标：禁止符号 -->
  <symbol id="no-entry" viewBox="66.25 22.25 19.5 19.5">
    <path d="M76 22.25C70.6239 22.25 66.25 26.6239 66.25 32C66.25 37.3761 70.6239 41.75 76 41.75C81.3761 41.75 85.75 37.3761 85.75 32C85.75 26.6239 81.3761 22.25 76 22.25ZM79.75 32.75H76.75V35.75C76.75 35.9489 76.671 36.1397 76.5303 36.2803C76.3897 36.421 76.1989 36.5 76 36.5C75.8011 36.5 75.6103 36.421 75.4697 36.2803C75.329 36.1397 75.25 35.9489 75.25 35.75V32.75H72.25C72.0511 32.75 71.8603 32.671 71.7197 32.5303C71.579 32.3897 71.5 32.1989 71.5 32C71.5 31.8011 71.579 31.6103 71.7197 31.4697C71.8603 31.329 72.0511 31.25 72.25 31.25H75.25V28.25C75.25 28.0511 75.329 27.8603 75.4697 27.7197C75.6103 27.579 75.8011 27.5 76 27.5C76.1989 27.5 76.3897 27.579 76.5303 27.7197C76.671 27.8603 76.75 28.0511 76.75 28.25V31.25H79.75C79.9489 31.25 80.1397 31.329 80.2803 31.4697C80.421 31.6103 80.5 31.8011 80.5 32C80.5 32.1989 80.421 32.3897 80.2803 32.5303C80.1397 32.671 79.9489 32.75 79.75 32.75Z" fill="black"/>
  </symbol>
</svg>

注：把原SVG的宽高设为0 0是为了让它不在页面上显示，只作为图标仓库使用。

步骤2：在HTML中调用特定图标 #

现在可以用<svg>配合<use>标签，通过ID引用单独的图标了，记得给<svg>设置合适的宽高：

<!-- 调用十字圆圈图标 -->
<svg width="40" height="40">
  <use href="icons/circle.svg#cross-circle"></use>
</svg>

<!-- 调用禁止符号图标 -->
<svg width="40" height="40">
  <use href="icons/circle.svg#no-entry"></use>
</svg>

这样就能单独显示你需要的特定图标了。

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