一、直接使用 <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;
}
<div class="icon"></div>
优点：
- 样式分离：将图片加载放在 CSS 中，保持 HTML 简洁。
- 易于管理和复用：适用于重复使用的图标或装饰。
缺点：
- 无法直接操作 SVG 内容：与
<img>标签类似，无法对 SVG 内部进行操作。
适用场景：
- 装饰性图案或背景：需要在多个地方使用相同的 SVG。
三、内联 SVG 代码
// 在HTML里面
<svg width="..." height="..." xmlns="http://www.w3.org/2000/svg">
<!-- SVG 内容 -->
</svg>
优点：
- 完全控制：可以直接操作 SVG 内部的元素，添加交互、动画等。
- 减少请求：避免额外的 HTTP 请求。
缺点：
- 代码冗长：SVG 内容可能较长，嵌入到 HTML 中会增加页面体积。
- 不可缓存：每次页面加载都会重新加载 SVG。
适用场景：
- 需要与 SVG 交互：需要动态修改 SVG 内部元素，添加事件监听等。
四、使用 <object>、<embed> 或 <iframe> 标签
<object type="image/svg+xml" data="path/to/image.svg"></object>
优点：
- 可访问 SVG DOM：可以操作 SVG 内部的元素。
- 避免污染主文档命名空间：SVG 在其自己的文档中。
缺点：
- 兼容性问题：某些旧版浏览器可能支持不佳。
- 样式隔离：无法直接使用主页面的 CSS 样式。
适用场景：
- 需要部分交互：希望操作 SVG，但又不希望 SVG 代码直接嵌入到 HTML 中。
五、使用 JavaScript 动态加载 SVG
<div id="svg-container"></div>
<script>
fetch('path/to/image.svg')
.then(response => response.text())
.then(svg => {
document.getElementById('svg-container').innerHTML = svg;
});
</script>
优点：
- 动态加载：可以根据需要加载 SVG。
- 可操作性强：加载后可以操作 SVG DOM。
缺点：
- 异步加载：需要处理加载过程，可能出现内容延迟显示。
- 安全性考虑：需要防范 XSS 攻击，确保加载的 SVG 安全可信。
适用场景：
- 需要在运行时加载或替换 SVG：例如根据用户操作加载不同的 SVG。
六、使用 SVG Sprite（符号）
<!-- 定义部分（通常在页面顶部或单独的文件中） -->
<svg style="display: none;">
<symbol id="icon-example" viewBox="0 0 100 100">
<!-- SVG 内容 -->
</symbol>
</svg>
<!-- 使用部分 -->
<svg width="50" height="50">
<use xlink:href="#icon-example"></use>
</svg>
优点：
- 重复使用：可以在页面中多次使用相同的符号。
- 减少请求：所有图标集中在一个文件中。
缺点：
- 初次加载较慢：如果符号库较大，可能增加页面初始加载时间。
- 需要注意命名空间：符号 ID 需要唯一，避免冲突。
适用场景：
- 多图标项目：如网站中大量使用小图标的情况。
七、使用 Base64 编码的 Data URI
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0i..." alt="SVG Image">
优点：
- 减少请求：将图片数据内联到 HTML 中，减少 HTTP 请求。
- 便于传输：适用于需要将图片嵌入到 CSS 或 JavaScript 中的情况。
缺点：
- 增加页面体积：Base64 编码会使数据体积增加约 33%。
- 不可缓存：每次页面加载都需要重新下载数据。
适用场景：
- 小型图标或装饰：仅适用于体积较小的 SVG。