最常用方式是<img>标签引入SVG，轻量但无交互；需交互用<object>；需样式控制用内联；纯视觉装饰可用CSS background-image。
直接用 <img> 标签引入外部 SVG 文件
这是最轻量、最常用的方式，适合图标、装饰性图形等不需要交互或动态修改的场景。浏览器把它当普通图片处理，不暴露内部结构。
常见错误是路径写错或服务器未正确返回 image/svg+xml MIME 类型（尤其本地双击打开时会失败，必须走 HTTP 服务）。
-
<img src="icon.svg" alt="logo">—— 支持width/height控制尺寸，但无法用 CSS 选中内部元素 - SVG 内联样式（如
fill）会被忽略；想换色？得准备多份文件或改用其他方式 - 注意：IE9+ 支持，但部分旧 Android WebView 有渲染 bug，建议加
loading="lazy"防止阻塞
用 <object> 嵌入 SVG 并保持可访问性与脚本控制
当 SVG 需要响应点击、悬停，或 JS 要动态修改其中的 <path>、<circle> 等元素时，<object> 是稳妥选择。
它把 SVG 当作独立文档加载，支持 focus、title、aria-label，也允许 JS 访问其 DOM（需等 load 事件）。
立即学习“前端免费学习笔记（深入）”；
<object data="chart.svg" type="image/svg+xml" aria-label="销售趋势图"></object>- JS 获取内部元素：
obj.contentDocument.querySelector('circle')，但跨域 SVG 会触发安全限制 - fallback 内容写在
<object>标签体内（如<img src="chart-fallback.png">），IE 和 Safari 对 fallback 渲染较可靠
内联 SVG：直接把 SVG XML 写进 HTML 中
需要精细控制样式、动画、响应式缩放，或 SEO 要求图形文本可读（如图表中的数字、标签），就该用内联。
缺点是 HTML 体积增大，无法缓存复用；但换来的是 CSS 可直接作用于 <svg> 内的 fill、stroke、transform，且无跨域问题。
- 复制 SVG 文件内容（从
<svg到</svg>），粘贴进 HTML，删掉xmlns属性（HTML5 中非必需，反而可能引发解析异常） - 用
currentColor让图标自动继承文字颜色：<path fill="currentColor" d="M10 10..."> - 响应式技巧：去掉
width/height，设viewBox，再用 CSS 控制容器宽高，SVG 自动等比缩放
用 CSS background-image 显示 SVG
适合用作按钮背景、装饰性花纹、loading 动画等纯视觉用途，尤其是需要重复平铺（repeat）或模糊叠加的场景。
优势是可和渐变、阴影等其他 background 层叠，且支持伪元素调用；但无法设置语义属性，也不利于屏幕阅读器识别。
.icon { background-image: url("arrow.svg"); background-size: contain; }- 内联 SVG 可转为 data URL：
url("data:image/svg+xml,%3Csvg...%3C/svg%3E")，避免额外请求，但注意 URL 编码（特别是<、>、"） - IE 不支持 data URL 中的 SVG，若需兼容，优先用外部文件 +
url()
