内联SVG性能最优，因无HTTP请求、DOM可操作、CSS可控；但需删内联样式、配viewBox与宽高、用currentColor、动态算路径长度。
内联 SVG 是唯一能兼顾性能、交互与响应式缩放的嵌入方式，但直接粘贴设计稿导出的 SVG 很可能触发重排、阻塞渲染或丢失交互能力。
为什么内联 SVG 比 <img> 或 <object> 更适合高性能渲染
浏览器对内联 SVG 的解析和绘制与 HTML 同步，不发起额外 HTTP 请求，避免了资源加载延迟；更重要的是，<svg> 内部元素（如 <path>、<circle>）是真实 DOM 节点，可被 CSS 选中、JS 直接操作，无需跨上下文通信。而 <img src="icon.svg"> 是封闭图像资源，<object> 需等待 load 事件并调用 contentDocument，且受 CSP 和跨域限制，实际项目中几乎无法稳定用于高频交互场景。
必须删掉所有子元素的 fill、stroke 等内联样式
设计工具（Figma/Sketch）导出的 SVG 常带 fill="#222" 这类硬编码属性，会锁死 CSS 层级，导致 .icon path { fill: currentColor } 完全无效。这不是“优先级不够”，而是内联样式在 CSS cascade 中天然高于外部规则。
- 手动删掉所有
<path>、<rect>等子元素上的fill、stroke、stroke-width属性 - 保留
<svg>标签自身的viewBox、width、height（或仅用 CSS 控制） - 统一用
currentColor或显式 class 控制颜色：.icon { color: #007bff; } .icon path { fill: currentColor; }
viewBox 不配 width/height 就等于没写
viewBox 定义的是逻辑坐标系，不是尺寸。只写 viewBox="0 0 24 24" 而不设 width 和 height，浏览器可能按默认 300×150 渲染，或在某些 Safari 版本中坍缩为 0×0；反之，只设 width="48" height="48" 却漏掉 viewBox，图形会被拉伸、裁剪或模糊。
立即学习“前端免费学习笔记（深入）”；
- 固定图标推荐写法：
<svg width="24" height="24" viewBox="0 0 24 24"> - 响应式场景下，可只写
viewBox+ CSS：svg { width: 100%; height: auto; }，让比例自适应容器 - 避免用
px固定宽高再配合媒体查询做多套尺寸——SVG 天然适配 DPR，一套viewBox足够
动画和交互前先确认路径长度是否动态计算
用 stroke-dasharray + stroke-dashoffset 做路径绘制动画时，若直接写死 dasharray="200"，SVG 缩放后路径实际长度已变，动画会错位或提前结束。
- 必须用 JS 动态获取：
const len = pathEl.getTotalLength(); - 把长度存为 CSS 自定义属性：
pathEl.style.setProperty('--path-len', len); - CSS 中引用：
stroke-dasharray: var(--path-len); stroke-dashoffset: var(--path-len); - 响应式页面需监听
resize并重新计算，否则窗口缩放后动画失准
真正容易被忽略的不是语法细节，而是：内联 SVG 的性能优势完全依赖于它被当作 DOM 对待——一旦你忘了删内联样式、漏了 viewBox、或用 getBBox() 代替 getTotalLength()，就等于把矢量图当成了位图在用。
