用 标签插入 svg 最简单但无法 css/js 控制内部元素；需交互时应内联或用 ；常见问题包括 404、mime 类型错误、脚本被禁用及样式失效。
直接用 <img> 标签插入 SVG 文件最简单，但会失去对内部元素（比如 <path></path>、<circle></circle>）的 CSS 控制和 JavaScript 交互能力；真要动态操作或样式定制，得把 SVG 内容内联进 HTML。
用 <img> 标签加载外部 SVG 文件
这是最轻量、最安全的方式，适合图标、装饰性图形等不需要脚本干预的场景。
常见错误现象：404（路径写错）、MIME type 不匹配（服务器没配 image/svg+xml）、SVG 显示为纯白或不渲染（含 <script></script> 或外部引用被浏览器拦截）。
-
<img src="icon.svg" alt="logo">—— 支持所有现代浏览器，可设宽高，支持响应式（width: 100%） - 路径必须正确：相对路径以当前 HTML 文件为基准，不要漏掉
.svg后缀 - 避免在 SVG 文件里写
<script></script>或使用xlink:href外部资源，否则多数浏览器会静默禁用 - 无法用 CSS 修改 SVG 内部颜色（如
fill），只能整体缩放或滤镜
用 <object></object> 嵌入 SVG 并保留交互能力
比 <img> 多一层 DOM 沙箱，能访问 SVG 内部结构，也支持 fallback 内容（如降级为 PNG）。
使用场景：需要 JS 动态修改 SVG 节点、监听点击事件、或需兼容老旧 IE（IE9+）。
<object type="image/svg+xml" data="chart.svg"><img src="chart-fallback.png" alt="chart"></object>- JS 可通过
obj.contentDocument获取 SVG DOM，但跨域时会触发安全限制 - 部分浏览器（如 Safari）对
<object></object>的 CSS 渲染有细微差异，建议显式设置width/height - 注意：Chrome 80+ 对非同源
<object></object>的contentDocument访问更严格，慎用于 CDN 上的 SVG
内联 SVG：完全可控，但体积和维护成本上升
把 SVG 的 XML 内容直接贴进 HTML，是最灵活的方式——可 CSS 选中 <path></path>、加 class、绑定事件、动画控制都无阻碍。
容易踩的坑：未转义特殊字符（如 &、）、<code>xmlns 缺失导致 IE 渲染异常、重复 ID 引发 JS 选择器冲突。
- 复制 SVG 文件内容（从
<svg> 开始到 <code>结束），粘贴进 HTML，删掉多余的xmlns（HTML5 中可省略） - 确保所有
id属性全局唯一，尤其多个 SVG 共存时，否则getElementById会出错 - 若原 SVG 含
<style></style>，建议抽离为外部 CSS，避免 inline style 覆盖失效 - 构建阶段可用工具（如 SVGR）自动转成 React 组件或带前缀的 class，减少手写风险
真正要改颜色、加动画、响应用户操作，内联是绕不开的；但别为了一个静态 logo 把整段 SVG 硬塞进 HTML —— 权衡可维护性和功能需求，比“怎么插”更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
