网页中加载 SVG 的七大方式

一、直接使用 标签加载外部 SVG 文件

优点：

• 简单易用：与加载其他图片格式（如 PNG、JPEG）相同。
• 浏览器支持良好：现代浏览器普遍支持。
• 可缓存：SVG 文件可以被浏览器缓存，减少重复请求。

缺点：

• 无法直接操作 SVG 内部元素：如果需要对 SVG 内部的元素进行交互或样式修改，这种方法不适用。

适用场景：

• 静态图像展示：仅需要展示 SVG 图像，不需要与之交互。

---

二、 将 SVG 作为 CSS 背景图片

.icon {
  width: 100px;
  height: 100px;
  background-image: url('path/to/image.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

优点：

• 样式分离：将图片加载放在 CSS 中，保持 HTML 简洁。
• 易于管理和复用：适用于重复使用的图标或装饰。

缺点：

• 无法直接操作 SVG 内容：与 标签类似，无法对 SVG 内部进行操作。

适用场景：

• 装饰性图案或背景：需要在多个地方使用相同的 SVG。

---

三、内联 SVG 代码

// 在HTML里面

优点：

• 完全控制：可以直接操作 SVG 内部的元素，添加交互、动画等。
• 减少请求：避免额外的 HTTP 请求。

缺点：

• 代码冗长：SVG 内容可能较长，嵌入到 HTML 中会增加页面体积。
• 不可缓存：每次页面加载都会重新加载 SVG。

适用场景：

• 需要与 SVG 交互：需要动态修改 SVG 内部元素，添加事件监听等。

---

四、使用