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