HTML 网页中引入 SVG 图片，常用的四种方式如下，每种方式适用场景不同：

1. 使用 <img> 标签直接引入外部 SVG 文件

<img src="image.svg" alt="SVG 图片">
  • 简单易用，类似引入普通图片。
  • 无法直接操作 SVG 内部元素。
  • 支持浏览器缓存。

2. 使用 <object> 标签嵌入 SVG

<object type="image/svg+xml" data="image.svg"></object>
  • 可以保持 SVG 的交互和动画功能。
  • 可以通过 JavaScript 操作 SVG DOM。
  • 兼容性较好，但在某些浏览器上可能出现样式隔离问题。

3. 使用 <embed> 标签嵌入 SVG

<embed type="image/svg+xml" src="image.svg" />
  • 类似 <object>，用于嵌入外部资源。
  • 简单，支持 SVG 动画和交互。
  • 控制能力较弱。

4. 直接在 HTML 中内联写 SVG 代码

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
  • 最灵活，方便 CSS 和 JavaScript 操作内部元素。
  • 不依赖外部文件，减少网络请求。
  • 代码较长，影响 HTML 文件大小。

总结对比

方式操作灵活度兼容性网络请求适用场景
<img>低高有纯展示，简单场景
<object>高较好有需要交互动画，独立文件
<embed>中较好有快速嵌入，简单交互
内联 SVG最高高无需要操作、动画、自定义样式

如果你需要，我可以帮你写具体示例代码或者实现动画与交互的SVG用法！