直接写标签最可靠，无需额外请求或外部文件，样式和交互均可直接控制；需保留到闭合块，删xml声明与注释，设width、height和viewbox防失真。
直接写 <svg></svg> 标签到 HTML 里最可靠
不用额外请求、不依赖外部文件、样式和交互都能直接控制。只要把 SVG 的结构代码（也就是以 <svg></svg> 开头、 结尾的那段 XML）原样粘贴进 HTML 文件的任意位置（比如 内），浏览器就能渲染。
常见错误现象：复制了别人导出的 SVG 文件全文（含 <?xml ...?> 声明、..> 或多余注释），直接贴进去会导致解析失败或空白；或者误把 SVG 当成图片路径塞进 <img src="...">，结果无法用 CSS 控制内部元素。
- 只保留从
<svg> 到 <code>的完整闭合块，删掉所有外部声明和注释 - 确保
<svg></svg>标签有明确的width和height，否则可能默认为 0×0 显示为空白 - 如果原 SVG 含
<style></style>或内联style="..."，它们在 HTML 中依然生效；但 CSS 选择器需注意作用域（比如.icon会匹配页面中所有带该 class 的元素）
用 <object></object> 嵌入外部 SVG 文件时要注意 fallback 和脚本限制
<object data="icon.svg" type="image/svg+xml"></object> 能加载独立 SVG 文件，支持 DOM 操作（比如 JS 选中内部 <path></path>），但有明显兼容性陷阱。
使用场景：SVG 较大、需复用多处、或内容由后端动态生成时更合适；但别指望它像内联 SVG 那样被父级 CSS 直接穿透控制颜色（例如 color: red 不会自动染红 <path></path>）。
- 必须提供 fallback 内容（写在
<object></object>标签内部），否则 IE 或禁用插件的环境里会留白 - 跨域 SVG 文件会被浏览器阻止 DOM 访问（CORS 错误），JS 无法用
contentDocument获取内部节点 - 某些旧版 Safari 对
<object></object>渲染 SVG 有闪烁或重绘异常，不如内联稳定
<img> 标签只能当“图片”用，别想改内部结构
写 <img src="logo.svg"> 最简单，但这是纯位图式引用——SVG 在这里和 PNG 无异：无法用 CSS 修改其中的 <circle></circle> 颜色，JS 也无法查询或操作它的路径数据。
性能影响：HTTP 请求少（单个资源），但牺牲全部可定制性；适合图标库、静态 logo 等完全不需要 runtime 干预的场景。
- 如果 SVG 里用了相对单位（如
em）或依赖外部 CSS，<img>方式下这些全部失效 - 不能响应父容器的
color或font-size，除非 SVG 本身用currentcolor声明颜色（且浏览器支持） - 想换主题色？只能准备多套 SVG 文件，或改用内联/
<object></object>方案
内联 SVG 里 <use></use> 引用同页面 <defs></defs> 是复用关键
避免重复写相同图形（比如多个箭头、同一图标不同尺寸），把公共部分抽到 <defs></defs> 里，再用 <use href="#id"></use> 插入——这比复制粘贴代码干净，也方便统一维护。
容易踩的坑：href 属性值必须带 # 前缀；<defs></defs> 必须在首次 <use></use> 出现之前（DOM 顺序很重要）；IE11 及更早版本不支持 href，得用过时的 xlink:href（需同时写两个属性兼容）。
- 同一个
<defs></defs>块可以定义多个<symbol></symbol>或<g></g>，用不同id区分 -
<use></use>支持width/height和transform，能缩放、旋转单个实例而不影响源定义 - 不要在
<use></use>上直接写fill，它不会覆盖源图形的 fill（除非源用fill="currentColor"）
真正麻烦的不是怎么嵌入，而是嵌入后要不要响应式缩放、是否要适配暗色模式、JS 动画要不要触发重排——这些细节在内联 SVG 里可控，在其他方式里要么做不到，要么得绕远路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
