内联SVG最简单灵活，浏览器原生支持；object适合复用/缓存的SVG，支持隔离但父CSS无效；img最轻量但无法样式化或交互；iframe隔离最强但较重且少用。
直接把 SVG 的 XML 代码写进 HTML 文件里，是最简单、最灵活的嵌入方式，浏览器原生支持，无需额外加载文件或依赖 JavaScript。
直接内联 SVG（推荐）
把 SVG 的完整 XML 结构（从 开始到 结束）复制粘贴到 HTML 的任意位置，比如 内。它会像普通 HTML 元素一样渲染，并能用 CSS 控制样式、用 JS 绑定事件。
- 确保 XML 语法正确：标签闭合、属性值加引号、不包含 XML 声明（如
） - 可以删掉不必要的命名空间（如
xmlns="http://www.w3.org/2000/svg"），现代浏览器通常自动补全；但保留更稳妥 - 示例：
<svg width="100" height="100" viewbox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="#4285f4"></circle></svg>
用 object 标签引用外部 SVG 文件
适合复用频繁、体积较大或需独立缓存的 SVG。它保持独立文档上下文，支持 CSS 和 JS 隔离，但无法直接用父页面 CSS 控制内部元素（除非通过 的 contentDocument 访问）。
- 写法：
- 建议添加
width/height或 CSS 尺寸，避免布局抖动 - 注意同源限制：跨域 SVG 可能无法脚本访问其内部结构
用 img 标签引入 SVG
最轻量的方式，适合仅作静态图形展示（如图标、插图）。它不支持 CSS 样式化内部元素，也不能绑定交互事件。
- 写法：
- 优点是语义清晰、可缓存、支持响应式（配合
srcset） - 缺点是完全“黑盒”，无法修改颜色、动画或响应点击
用 iframe 嵌入 SVG（较少用）
类似 ，但隔离性更强，也更重。一般只在需要完全独立上下文（比如沙箱化第三方 SVG）时考虑。
- 写法：
- 默认有边框和滚动条，可用 CSS 清除（
border: none,overflow: hidden） - 跨域时同样无法脚本访问内容
