内联SVG最可控，需保留viewBox、用CSS控制样式、fill="currentColor"适配文字色；img引入最轻量但无法交互；object嵌入可交互但操作复杂且有兼容问题；模糊错位多因viewBox与坐标未对齐。
直接在 HTML 中写 <svg> 标签是最可控、最常用的方式；用 <img> 引入 SVG 文件最轻量但完全无法交互；其他方式各有硬约束，别盲目套用。
内联 SVG：要样式/动画/JS 控制就选它
把 SVG 源码（从 <svg> 到 </svg>）直接粘进 HTML，它就成了 DOM 的一部分，<path>、<circle> 全都能被 CSS 选中、JS 绑定事件。
- 必须带
viewBox属性，例如viewBox="0 0 24 24"，否则缩放会失真或裁剪 - 删掉原始 SVG 中的
fill、stroke等 inline 属性，改用 CSS 控制，否则样式会被覆盖 - 想让图标自动跟随文字颜色？把
fill="currentColor"写进<path>里 - 避免复制时带入
xmlns（HTML5 中非必需，反而可能触发解析异常）或overflow="hidden"（缩放时图形被截） - 默认
display是inline，常需加display: block或vertical-align: middle防底部留白
<img> 引入 SVG：只适合静态展示
写 <img src="icon.svg"> 最快，但 SVG 在 DOM 里是“黑盒”——你查不到它的 <path>，也加不了 :hover 动画。
- 路径必须正确，相对路径以
index.html所在目录为基准 - 本地双击打开 HTML 会失败（缺少
image/svg+xmlMIME 类型），必须走 HTTP 服务 - IE9+ 支持，但部分旧 Android WebView 有渲染 bug，建议加
loading="lazy" - 不能用 CSS 修改内部颜色，想换色得准备多份文件，或改用内联
- 可加
alt提升可访问性，但 screen reader 对 SVG 的支持仍弱于内联
<object> 嵌入：需要交互又想复用文件时的折中方案
<object data="chart.svg" type="image/svg+xml"> 把 SVG 当独立文档加载，能保留样式和 JS 交互能力，但操作比内联麻烦。
立即学习“前端免费学习笔记（深入）”；
- 必须监听
object.onload后再用obj.contentDocument.querySelector()访问内部元素，不能直接document.querySelector('svg path') - 跨域 SVG 会触发安全限制，无法读取 DOM
- 每个
<object>都是一次 HTTP 请求，不适用于大量小图标 - IE 和旧 Edge 对
load事件触发不一致，部分移动端 WebView 可能静默失败 - fallback 内容（如
<img src="fallback.png">）建议加上，提升兼容性
为什么图形变模糊或错位？重点检查 viewBox 和坐标单位
SVG 不是位图，模糊或错位往往不是分辨率问题，而是 viewBox 和内部坐标没对齐。
-
viewBox="0 0 100 100"定义的是逻辑坐标系，所有cx、cy、x、y都基于这个范围；填错值会导致图形只显示一角或严重偏移 -
<circle>用cx/cy表示圆心，<rect>用x/y表示左上角——混用属性名会画不出东西 -
<line>默认无填充，漏设stroke或stroke-width就等于没画 -
<path d>中空格和逗号混用、负数前多空格、少一个坐标值，都会导致整段解析失败 - 删掉
preserveAspectRatio="none"，除非你明确需要扭曲变形
