内联svg在首屏加载和交互响应上更快，因其同步解析、免http请求、支持dom操作与css/js动态控制；外部引用则利于缓存复用、cdn分发与长期维护，关键在于按场景选择。
内嵌 SVG 在首屏加载和交互响应上更快，但外部引用在多页复用、缓存命中和长期维护上更稳；不是“哪个更好”，而是“在哪种场景下必须选哪个”。
内联 SVG 为什么首屏更快
浏览器解析 HTML 时同步构建 SVG DOM，不触发额外 HTTP 请求，省掉 DNS 查询、TCP 握手、TLS 协商和资源下载全过程。对按钮图标、状态徽标这类小图形（<svg></svg> 内容体积建议控制在 2–3KB 内），能明显缩短白屏时间。
-
viewBox必须写，否则 Safari 可能渲染为 0×0 或默认 300×150 尺寸 - 删掉所有
<path></path>、<circle></circle>上的fill、stroke等内联属性，否则 CSS 无法覆盖 - 推荐统一用
fill="currentColor"，靠父容器的color控制图标配色 -
<use href="#icon-home"></use>必须指向同文档内的<symbol></symbol>，跨文件引用在 iOS Safari 中直接失效
外部 SVG 引用更适合哪些场景
当同一个图标出现在 5+ 页面、或需 CDN 分发、灰度发布、版本控制时，外部引用是唯一可维护的选择。尤其是用 <img src="icon-home.svg"> 方式，最轻量、兼容性最好、支持 srcset 和 CSP 的 img-src 策略。
-
<img>方式无法用 CSS 选中内部<path></path>，hover 变色、暗色模式适配都得靠filter或mask间接处理 -
<use href="sprite.svg#icon-home"></use>虽支持符号复用，但受同源限制，且部分旧 WebView 不支持 externalResourcesRequired - 外部 SVG 文件加哈希后缀（如
icons.a1b2c3.svg）可强制更新缓存，避免手动清 CDN
交互能力决定是否必须内联
需要 JS 动态修改路径、绑定点击事件、做 stroke-dasharray 动画、或响应 :hover / :focus 伪类时，只能选内联 SVG。外部引用的 SVG 是“黑盒”，document.querySelector("svg path") 返回 null，getTotalLength() 也调用不了。
- 动画前务必用 JS 获取真实路径长度：
pathEl.getTotalLength()，不能硬编码stroke-dasharray="200" - 响应式缩放后，路径长度会变，需监听
resize并重算，或用 CSS 自定义属性同步：pathEl.style.setProperty('--path-len', len) -
<object></object>理论上支持交互，但contentDocument受跨域和 CSP 限制，实际项目中几乎不可靠
真正麻烦的从来不是“能不能写”，而是“改一个图标要不要重建整个 HTML”——50+ 图标的项目，手动内联等于自建技术债。自动化流程（如 Vite 插件 vite-plugin-svg-icons）才是平衡性能与可维护性的关键落点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
