能否仅引用一次SVG文件并实现多次复用？

当然可以！你想要的这种「一次引用、多次复用」的效果，正是SVG Sprite的核心优势之一。下面给你两种最常用的实现方案，完全符合你的需求：

方案1：内联SVG Sprite（无额外HTTP请求） #

把所有图标打包到一个隐藏的<svg>标签里，直接嵌入HTML页面中，之后就能通过ID直接引用任意图标了。

步骤： #

1. 在HTML的<body>开头（或者其他不影响布局的位置）插入这个包含所有图标的SVG块：

<svg style="display: none;">
  <!-- 用<symbol>包裹每个图标，它自带viewBox属性，能保证图标缩放正确 -->
  <symbol id="icon-user" viewBox="0 0 24 24">
    <!-- 这里替换成你icon-user的实际路径代码 -->
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/>
  </symbol>
  <symbol id="icon-user2" viewBox="0 0 24 24">
    <!-- 这里替换成你icon-user2的实际路径代码 -->
    <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
  </symbol>
</svg>

2. 之后在页面任何地方，就能像你期望的那样简化引用：

<svg class="icon-user">
  <use href="#icon-user"></use>
</svg>
<svg class="icon-user2">
  <use href="#icon-user2"></use>
</svg>

这种方案的好处是没有额外的HTTP请求，所有图标直接随HTML加载，适合图标数量不多的场景。

方案2：外部SVG Sprite（适合多页面复用） #

如果你的图标需要在多个页面复用，或者图标数量较多，更适合把它们打包成单独的SVG文件，只需要预加载一次，就能在全页面复用。

步骤： #

1. 先创建一个外部SVG文件（比如icons-sprite.svg），结构如下：

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="icon-user" viewBox="0 0 24 24">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/>
  </symbol>
  <symbol id="icon-user2" viewBox="0 0 24 24">
    <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
  </symbol>
</svg>

2. 在HTML的<head>或者<body>开头，添加一个隐藏的<object>标签来预加载这个外部SVG文件：

<object data="icons-sprite.svg" style="display: none;"></object>

3. 接下来就可以在页面任意位置简化引用图标了，和方案1的用法完全一致：

<svg class="icon-user">
  <use href="#icon-user"></use>
</svg>
<svg class="icon-user2">
  <use href="#icon-user2"></use>
</svg>

这种方案的好处是图标代码和HTML分离，可以在多个页面复用同一个SVG文件，浏览器会缓存它，提升后续页面的加载速度。

小提示： #

• 推荐用<symbol>包裹图标，它比<g>更适合做Sprite，因为自带的viewBox能确保图标在不同尺寸下都能正确缩放。
• 如果需要兼容非常老旧的浏览器（比如IE11），可以给<use>标签同时加上xlink:href属性：<use href="#icon-user" xlink:href="#icon-user"></use>，不过现在主流浏览器已经不需要了。

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