svg必须带viewbox、禁用内联爆炸、优先复用；否则首屏卡顿、内存飙升、高dpr模糊三者必中其一。
SVG 在 index.html 中不是“能用就行”，而是必须带 viewBox、禁用内联爆炸、复用优先——否则首屏卡顿、内存飙升、高 DPR 屏幕模糊，三者必中其一。
为什么直接内联 <svg></svg> 会拖慢 index.html
每个内联 <svg></svg> 都是独立 DOM 子树，浏览器要为它单独计算样式、布局、绘制。10 个重复图标写 10 次 <svg><path d="..."></path></svg>，就触发 10 次重排 + 10 次光栅化准备。
- 移动端 WebKit 解析长
d字符串极慢，尤其含贝塞尔曲线时 - 没
viewBox的 SVG 被当位图处理，缩放全靠 CPU 插值，失真且掉帧 - 服务端未配
Content-Type: image/svg+xml时，<img src="icon.svg">可能被当成文本下载，体积翻倍
<symbol> + <use></use></symbol> 是最稳的复用方案
把所有图标抽成一个隐藏 <svg></svg> 块，用 <symbol id="icon-home"></symbol> 定义，再用 <use href="#icon-home"></use> 实例化——DOM 节点只存一份，样式和路径共享。
- 必须写
viewBox="0 0 w h"，且宽高比与内部图形严格一致，否则拉伸变形 -
<use></use>不支持 CSS 伪类（如:hover path），需改用<g class="icon"></g>包裹后控制 fill/stroke - 动态插入时，先检查
document.getElementById("icon-home")是否已存在，避免重复定义
CSS 缩放比 HTML width/height 更安全
用 style="width: 24px; height: 24px;" 粗暴缩放 SVG，会丢弃矢量优势；而 transform: scale(1.5) 或 font-size: 1.5rem + width: 1em，由 GPU 直接处理，保持锐利。
- 高 DPR 屏幕（如 iPhone）下，加
shape-rendering="crispEdges"抑制抗锯齿虚化 - 避免在
<svg></svg>上设filter或mask，它们强制创建离屏缓冲区，3 个模糊叠加可能吃掉 200MB 内存 - 动画只作用于外层
<g></g>或容器，别给每个<path></path>单独加@keyframes
移动端 H5 必须避开的三个渲染陷阱
iOS Safari 和 Android WebView 对 SVG 的实现差异大，同一段代码在 Chrome DevTools 里丝滑，真机上可能白屏或卡死。
- 禁用 SMIL 动画（
<animate></animate>），UC/QQ 浏览器不兼容且 CPU 占用高 - 不可见 SVG（如 tab 切换后隐藏的图表）必须调用
svgElement.remove()，不能只靠display: none - 大量图标用
loading="lazy"配合<img src="icon.svg">，比 JS 动态拼接字符串更可控
真正决定 SVG 是否“高性能”的，从来不是它画得多精细，而是你有没有关掉那几个默认开启的渲染开关：viewBox 缺失、滤镜滥用、DOM 无节制膨胀——这些细节不处理，再小的图标也能拖垮首屏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
