SVG 嵌入 HTML
在网页中使用 SVG 有多种方式，本章将介绍各种嵌入方法及其优缺点。
方式一：直接内联 SVG
最直接的方式是将 SVG 代码直接写在 HTML 中：
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 作为图片文件引入：
html
<img src="image.svg" alt="SVG 图片" width="200" height="100">优点
- 语法简单，与普通图片一致
- 可被浏览器缓存
- 保持 HTML 整洁
缺点
- 无法使用 CSS 修改 SVG 内部样式
- 无法使用 JavaScript 操作 SVG 元素
- 不支持 SVG 动画中的脚本
方式三：使用 CSS 背景图
将 SVG 作为 CSS 背景：
css
.icon {
width: 100px;
height: 100px;
background-image: url('icon.svg');
background-size: contain;
background-repeat: no-repeat;
}html
<div class="icon"></div>优点
- 便于 CSS 控制尺寸和位置
- 可被浏览器缓存
- 适合装饰性图形
缺点
- 无法操作 SVG 内部元素
- 不适合需要交互的图形
方式四：使用 <object> 标签
html
<object type="image/svg+xml" data="image.svg" width="200" height="100">
您的浏览器不支持 SVG
</object>优点
- 可被浏览器缓存
- 支持回退内容
- SVG 内部的脚本可以运行
缺点
- 跨域访问受限
- 样式隔离，外部 CSS 无法影响内部
方式五：使用 <iframe> 标签
html
<iframe src="image.svg" width="200" height="100" frameborder="0">
您的浏览器不支持 iframe
</iframe>优点
- 完全隔离的环境
- SVG 内部脚本可运行
缺点
- 样式完全隔离
- 跨域操作受限
- 增加页面复杂度
方式六：使用 Data URI
将 SVG 编码为 Base64 或直接嵌入：
html
<!-- 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：
html
<!-- 定义 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 的坐标系统：
html
<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：
html
<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 矩形 的绘制方法！