最可靠方式是内联SVG：直接用<svg>标签写入HTML，支持CSS/JS操作，无跨域和延迟问题；其次<img>最轻量但不可样式控制；<object>可交互且有降级；慎用<iframe>和background-image。
直接用 <svg> 标签内联 SVG 最可靠
内联是最常用、最可控的方式，SVG 代码直接写在 HTML 中，能被 CSS 和 JS 操作，无跨域或加载延迟问题。
- 适合图标、简单图表、需要交互或动态变色的图形
- 注意：所有属性（如
fill、stroke）可直接用 CSS 覆盖，但需确保没加!important锁死内联样式 - 避免在
<svg>外包裹<div>后再设width/height—— 应直接在<svg>上设width、height或用viewBox保证缩放比例
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"> <circle cx="12" cy="12" r="10" stroke="#333" stroke-width="2" fill="transparent"/> </svg>
用 <img> 引入外部 SVG 文件最轻量
适用于静态图标、不需 JS/CSS 控制的场景，浏览器当作图片处理，加载快、缓存友好。
- 路径必须正确，且服务器需返回
Content-Type: image/svg+xml，否则可能显示为下载或空白 - 不能用 CSS 修改内部元素（比如改
<path>的fill），但可用filter做简单效果（如invert()） - IE11 支持，但不支持 SVG 中的
<script>或外部引用（如<use xlink:href>）
<img src="icon-home.svg" alt="首页" width="24" height="24">
<object> 嵌入 SVG 可兼顾交互与降级
比 <iframe> 更语义化，支持 fallback 内容，且允许 JS 访问 SVG DOM（需同源）。
- 若 SVG 加载失败，
<object>内部的 HTML 会显示（比如一个<p>图标加载失败</p>） - JS 操作需等
load事件后取contentDocument，例如：obj.addEventListener('load', () => obj.contentDocument.querySelector('circle').style.fill = 'red') - 注意 CSP 策略可能禁止
object加载本地 SVG（尤其开发时用file://协议）
<object type="image/svg+xml" data="chart.svg" width="300" height="200"> <p>无法加载矢量图，请升级浏览器</p> </object>
慎用 <iframe> 和 background-image
这两种方式看似方便，但实际限制多、调试难，容易踩坑。
立即学习“前端免费学习笔记（深入）”；
-
<iframe>会创建独立上下文，CSS 不继承父页样式，JS 通信需postMessage，且移动端易触发双滚动条 -
background-image: url(icon.svg)在 CSS 中使用时，SVG 文件里不能含<script>或相对路径引用（如<image xlink:href="logo.png">），否则失效 - 部分旧版 Android WebView 对 base64 编码的 SVG
background-image渲染异常，建议优先走文件引用
viewBox 缺失、width/height 冲突、或服务器 MIME 类型配置错误有关。 
