17370845950

内联SVG最简单灵活，浏览器原生支持；object适合复用/缓存的SVG，支持隔离但父CSS无效；img最轻量但无法样式化或交互；iframe隔离最强但较重且少用。

直接把 SVG 的 XML 代码写进 HTML 文件里，是最简单、最灵活的嵌入方式，浏览器原生支持，无需额外加载文件或依赖 JavaScript。

直接内联 SVG（推荐）

把 SVG 的完整 XML 结构（从 svg> 开始到 结束）复制粘贴到 HTML 的任意位置，比如 内。它会像普通 HTML 元素一样渲染，并能用 CSS 控制样式、用 JS 绑定事件。

• 确保 XML 语法正确：标签闭合、属性值加引号、不包含 XML 声明（如 ）
• 可以删掉不必要的命名空间（如 xmlns="http://www.w3.org/2000/svg"），现代浏览器通常自动补全；但保留更稳妥
• 示例：

用 object 标签引用外部 SVG 文件

适合复用频繁、体积较大或需独立缓存的 SVG。它保持独立文档上下文，支持 CSS 和 JS 隔离，但无法直接用父页面 CSS 控制内部元素（除非通过 的 contentDocument 访问）。

• 写法：
• 建议添加 width/height 或 CSS 尺寸，避免布局抖动
• 注意同源限制：跨域 SVG 可能无法脚本访问其内部结构

用 img 标签引入 SVG

最轻量的方式，适合仅作静态图形展示（如图标、插图）。它不支持 CSS 样式化内部元素，也不能绑定交互事件。

• 写法：
• 优点是语义清晰、可缓存、支持响应式（配合 srcset）
• 缺点是完全“黑盒”，无法修改颜色、动画或响应点击

用 iframe 嵌入 SVG（较少用）

类似 ，但隔离性更强，也更重。一般只在需要完全独立上下文（比如沙箱化第三方 SVG）时考虑。

• 写法：
• 默认有边框和滚动条，可用 CSS 清除（border: none, overflow: hidden）
• 跨域时同样无法脚本访问内容