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