内联SVG是可控性最强、性能最可预期的嵌入方式，适用于需CSS控制样式、JS动态修改属性或可访问性语义的场景；但会增大HTML体积、阻塞首屏渲染，且存在旧版Safari等兼容性陷阱。
直接把 svg 标签写进 HTML 里，是目前最推荐的嵌入方式——但只在满足特定条件时成立。它不是“永远好”，而是“可控性最强、性能最可预期”的选择。
什么时候必须用内联 SVG
需要 CSS 控制样式（比如 hover 变色、主题切换）、JavaScript 动态修改图形属性（如 cx/cy、fill）、或依赖可访问性语义（如 <title>、aria-label）时，内联是唯一可靠路径。
-
<img src="icon.svg">无法被 CSS 选中内部元素，也无法用 JS 查询<circle> -
<object>和<iframe>会创建独立 DOM 上下文，跨域或同源都需额外处理通信 - 内联 SVG 的
<use>引用、CSS 变量绑定、@keyframes动画均原生支持，无需 polyfill
内联 SVG 的真实性能代价
体积膨胀和首次渲染阻塞是唯二不可回避的问题。SVG 代码不是“轻量级占位符”，一段含 20 个路径的图标可能超过 1KB；若页面有 15 个内联 SVG，光是 HTML 字节数就多出 15–30KB，且全部解析完成前，浏览器不会触发 DOMContentLoaded。
- 避免在首屏关键 HTML 中塞入复杂 SVG（比如地图、图表），改用
<img>或懒加载内联片段 - 用构建工具自动压缩：
svgo能安全移除id、冗余空格、注释，平均压缩率 40%–60% - 不要手动 minify —— 容易误删
viewBox或xmlns导致渲染失败
容易被忽略的兼容性陷阱
看似标准的写法，在旧版 Safari（≤15.6）、IE11 或某些 Android WebView 里会静默失效。
立即学习“前端免费学习笔记（深入）”；
- 省略
xmlns="http://www.w3.org/2000/svg"属性：Safari 14–15.6 渲染为空白，必须显式声明 - 用 CSS 设置
fill: currentColor但父元素没定义color：部分 WebView 下 fallback 为黑色而非透明 -
<use href="#id">在 iOS Safari 中不支持外部文件引用（href="sprite.svg#id"），仅支持同文档 ID - 内联 SVG 中的
<style>标签在 IE11 下会被忽略，必须用外部 CSS 或行内属性
真正麻烦的从来不是“能不能写”，而是“写完要不要维护”。一个内联 SVG 如果后续要复用在三个不同主题、两种尺寸、四种交互状态里，它的初始简洁性很快就会被补丁堆满。这时候，该拆成组件、该抽成 symbol sprite、该转为 <img> 就得果断做决定——别等上线后才发现 fill 改了 7 次，每次都要 grep 全项目。
