高频复用SVG图标（单页150+次）的最优HTML/CSS实践

针对你在无限滚动页面中复用SVG点赞/点踩图标的需求，以下是具体的方案对比和结论：

一、最优引入方式：优先选<img>+CSS翻转或<symbol>+<use> #

1. <img>引用单个SVG文件+CSS翻转 #

这种方式适合不需要修改SVG内部样式（比如固定颜色）的场景，优势非常明显：

• 缓存复用：浏览器只会请求一次SVG文件，后续所有引用都会直接用缓存，完全避免重复请求，尤其无限滚动到上千次时，带宽和加载速度优势极大。
• 实现简单：点踩图标仅需一行CSS transform: scaleX(-1) 完成翻转，无需额外维护第二个SVG文件。
• DOM轻量化：每个图标就是一个简洁的<img>标签，不会让HTML体积随图标数量线性膨胀，解析和渲染成本更低。

示例代码：

<img src="like.svg" alt="点赞" class="icon like">
<img src="like.svg" alt="点踩" class="icon dislike">

<style>
.dislike {
  transform: scaleX(-1);
}
</style>

2. <symbol>+<use>（需动态修改SVG样式时） #

如果需要动态修改图标颜色、添加动画（比如点赞后变色），推荐用这种方式：

• 仅在页面顶部定义一次SVG模板，后续通过<use>标签复用，避免重复代码。
• 支持通过CSS修改SVG内部元素样式（比如fill属性），比<img>更灵活。
• 同样不会产生重复HTTP请求，页面体积可控。

示例代码：

<!-- 页面顶部隐藏定义SVG模板 -->
<svg style="display: none;">
  <defs>
    <symbol id="like-icon" viewBox="0 0 24 24">
      <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
    </symbol>
  </defs>
</svg>

<!-- 复用点赞图标 -->
<svg class="icon like" aria-label="点赞">
  <use href="#like-icon"/>
</svg>

<!-- 点踩图标通过CSS翻转 -->
<svg class="icon dislike" aria-label="点踩">
  <use href="#like-icon"/>
</svg>

<style>
.dislike {
  transform: scaleX(-1);
}
.like.active {
  fill: #ff4444; /* 点赞后变红 */
}
</style>

二、关于你的其他疑问 #

• HTML会自动优化重复的SVG代码吗？
  不会。浏览器不会自动合并或优化重复嵌入的内联SVG代码，每一次嵌入都是独立的DOM节点和代码块，只会让页面体积越来越大，严重影响加载和渲染性能。

• 嵌入SVG代码比<img>更优吗？
  绝对不是，尤其是高复用场景下。重复嵌入SVG会导致HTML体积暴增，没有任何复用机制；而<img>或<symbol>+<use>都能实现代码/资源的复用，性能优势明显。只有当SVG需要高度定制化且无法通过上述两种方式实现时，才考虑单独嵌入（但这种场景极少）。

内容的提问来源于stack exchange，提问作者Eli O.