SVG 嵌入 HTML

在网页中使用 SVG 有多种方式，本章将介绍各种嵌入方法及其优缺点。

方式一：直接内联 SVG

最直接的方式是将 SVG 代码直接写在 HTML 中：

<!DOCTYPE html>
<html>
<body>

<svg width="200" height="100">
  <rect width="200" height="100" fill="#3b82f6" />
  <text x="100" y="55" text-anchor="middle" fill="white" font-size="20">
    Hello SVG
  </text>
</svg>

</body>
</html>

优点

可以使用 CSS 设置样式
可以使用 JavaScript 操作元素
无需额外的 HTTP 请求
支持所有 SVG 特性

缺点

HTML 文件会变大
无法被浏览器缓存
代码可能变得混乱

方式二：使用 `<img>` 标签

将 SVG 作为图片文件引入：

<img src="image.svg" alt="SVG 图片" width="200" height="100">

优点

语法简单，与普通图片一致
可被浏览器缓存
保持 HTML 整洁

缺点

无法使用 CSS 修改 SVG 内部样式
无法使用 JavaScript 操作 SVG 元素
不支持 SVG 动画中的脚本

方式三：使用 CSS 背景图

将 SVG 作为 CSS 背景：

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

<div class="icon"></div>

优点

便于 CSS 控制尺寸和位置
可被浏览器缓存
适合装饰性图形

缺点

无法操作 SVG 内部元素
不适合需要交互的图形

方式四：使用 `<object>` 标签

<object type="image/svg+xml" data="image.svg" width="200" height="100">
  您的浏览器不支持 SVG
</object>

优点

可被浏览器缓存
支持回退内容
SVG 内部的脚本可以运行

缺点

跨域访问受限
样式隔离，外部 CSS 无法影响内部

方式五：使用 `<iframe>` 标签

<iframe src="image.svg" width="200" height="100" frameborder="0">
  您的浏览器不支持 iframe
</iframe>

优点

完全隔离的环境
SVG 内部脚本可运行

缺点

样式完全隔离
跨域操作受限
增加页面复杂度

方式六：使用 Data URI

将 SVG 编码为 Base64 或直接嵌入：

<!-- Base64 编码 -->
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIi..." alt="SVG">

<!-- URL 编码 -->
<img src="data:image/svg+xml,%3Csvg%20width%3D%22100%22..." alt="SVG">

优点

减少 HTTP 请求
适合小型图标

缺点

不可读，难以维护
Base64 会增加约 33% 文件大小
无法被单独缓存

最佳实践选择

使用场景	推荐方式
需要 JS 交互	内联 SVG
需要 CSS 动画	内联 SVG
静态装饰图	`<img>` 或 CSS 背景
图标系统	内联 SVG + Symbol
外部 SVG 需要脚本	`<object>`

SVG Symbol 用法

对于图标系统，推荐使用 Symbol：

<!-- 定义 Symbol（通常放在页面顶部） -->
<svg style="display: none;">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
  </symbol>
  <symbol id="icon-user" viewBox="0 0 24 24">
    <path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
  </symbol>
</svg>

<!-- 使用 Symbol -->
<svg width="24" height="24">
  <use href="#icon-home"></use>
</svg>

<svg width="24" height="24">
  <use href="#icon-user"></use>
</svg>

viewBox 属性

viewBox 是 SVG 最重要的属性之一，它定义了 SVG 的坐标系统：

<svg width="200" height="100" viewBox="0 0 100 50">
  <rect width="100" height="50" fill="#3b82f6"/>
</svg>

viewBox="0 0 100 50" 表示：

0 0：起点坐标 (x, y)
100 50：视口宽度和高度

这使得 SVG 可以自适应缩放。

响应式 SVG

创建响应式 SVG：

<svg viewBox="0 0 100 100" style="width: 100%; max-width: 300px;">
  <circle cx="50" cy="50" r="40" fill="#3b82f6"/>
</svg>

关键点：

设置 viewBox 而不是固定的 width/height
使用 CSS 控制实际尺寸

下一步

现在您已经了解了如何在 HTML 中使用 SVG，接下来让我们学习 SVG 矩形的绘制方法！

#SVG 嵌入 HTML

#方式一：直接内联 SVG

#优点

#缺点

#方式二：使用 <img> 标签

#优点

#缺点

#方式三：使用 CSS 背景图

#优点

#缺点

#方式四：使用 <object> 标签

#优点

#缺点

#方式五：使用 <iframe> 标签

#优点

#缺点

#方式六：使用 Data URI

#优点

#缺点

#最佳实践选择

#SVG Symbol 用法

#viewBox 属性

#响应式 SVG

#下一步