最常用方式是<img>标签引入SVG，轻量但无交互；需交互用<object>；需样式控制用内联；纯视觉装饰可用CSS background-image。
直接用 <img> 标签引入 SVG 是最简单、最安全的方式，但会失去内联 SVG 的交互和样式控制能力；想改颜色、加动画、响应点击？得用 <svg> 内联或 <object>。
用 <img> 引入 SVG（推荐新手）
这是和引入 PNG、JPG 完全一致的方式，浏览器兼容性好，加载行为可预测，不会暴露内部结构。
- 路径必须正确，
src值支持相对路径（如./icon.svg）、绝对路径（如/assets/logo.svg）或 URL - 记得设置
width和height，否则 SVG 可能按原始尺寸（比如 1024×1024）撑开布局 - 不能用 CSS 修改内部
<path>颜色，fill属性被封装在文件里了 - 示例：
<img src="./arrow.svg" width="24" height="24" alt="右箭头">
把 SVG 当 HTML 写进页面（内联 SVG）
把 SVG 文件内容直接复制粘贴到 HTML 中，变成 <svg><path></path></svg> 结构。这时它就是 DOM 的一部分。
- 可以给
<path>加class或id，用 CSS 控制fill、stroke、transform - 能绑定 JavaScript 事件，比如
onclick、onmouseover - 注意：XML 命名空间（如
xmlns="http://www.w3.org/2000/svg"）通常可省略，但若含<use>或滤镜，建议保留 - 别直接复制带 BOM 的 UTF-8 SVG 文件内容，可能引发解析错误；用编辑器转成无 BOM UTF-8 再粘贴
用 <object> 加载外部 SVG（兼顾复用与控制）
比 <img> 多一层“沙箱”，SVG 内部可执行脚本、响应样式，且可通过 JS 访问其 contentDocument。
立即学习“前端免费学习笔记（深入）”；
- 语法：
<object type="image/svg+xml" data="./logo.svg"></object>
- 加载失败时，
<object>内容区域可写 fallback（如<img src="logo.png">） - JS 获取 SVG 内部元素需等加载完成：
obj.addEventListener('load', () => obj.contentDocument.querySelector('path')) - 不支持 IE9 以下；部分移动端对跨域
data路径有限制
为什么不用 <iframe> 或 <embed>？
<iframe> 安全策略太严，基本无法访问内部 SVG；<embed> 行为不统一，Chrome 和 Firefox 对样式继承、事件冒泡处理不同，且无标准 fallback 支持。
真正容易被忽略的是：**SVG 文件本身是否规范**——如果导出时带了冗余的 <defs>、未清理的编辑器元数据、或使用了不支持的滤镜（如 feTurbulence），哪怕引入方式再正确，也会在某些浏览器中渲染异常或空白。先用 [SVGOMG](https://jakearchibald.github.io/svgomg/) 压缩清理一遍，再引入。
