网页中加载 SVG 的七大方式

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

<img src="path/to/image.svg" alt="描述文字">
<!--若多个svg格式的img的宽高设定为百分百高度，容易会造成首屏加载svg的高度为0-->

优点：

• 简单易用：与加载其他图片格式（如 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;
}