SVG 在网页中有哪些使用方式，各自的优缺点是什么

SVG 在网页中有多种使用方式，每种方式都有其适用场景和优缺点：

1. 内联 SVG（Inline SVG）

html
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

• 优点：可以通过 CSS 和 JavaScript 完全控制样式和交互；减少 HTTP 请求；支持动画和事件
• 缺点：增加 HTML 文件大小；不适合重复使用的图形
• 适用场景：需要交互的图标、动画、独特的图形

2. 作为 img 标签引用

html
<img src="icon.svg" alt="图标" />

• 优点：代码简洁；可以缓存；适合重复使用的图形
• 缺点：无法通过 CSS 控制内部样式；不支持交互和动画
• 适用场景：静态图标、logo、不需要交互的图形

3. 作为 background-image

css
.icon {
  background-image: url('icon.svg');
  background-size: contain;
}

• 优点：可以应用 CSS 效果（如 hover）；适合图标系统
• 缺点：无法控制内部元素；不支持交互
• 适用场景：图标字体替代方案、装饰性图形

4. 使用 object 标签

html
<object data="icon.svg" type="image/svg+xml"></object>

• 优点：支持外部 CSS 文件；可以访问 SVG DOM
• 缺点：浏览器兼容性稍差；加载方式复杂
• 适用场景：需要外部样式控制的复杂图形

5. 使用 embed 标签

html
<embed src="icon.svg" type="image/svg+xml" />

• 优点：支持脚本访问；兼容性较好
• 缺点：非标准元素；不推荐使用
• 适用场景：需要向后兼容的旧项目

最佳实践建议：

• 需要交互或动画时使用内联 SVG
• 静态图标使用 img 或 background-image
• 复杂图形考虑使用 object 或内联
• 对于大量图标，考虑使用 SVG sprite 技术