SVG 简介
SVG（Scalable Vector Graphics，可缩放矢量图形）是一种基于 XML 的矢量图像格式，用于描述二维图形。与位图图像（如 PNG、JPEG）不同，SVG 图像可以无限缩放而不失真，这使其成为现代 Web 开发中不可或缺的技术。
什么是 SVG？
SVG 是由 W3C（万维网联盟）制定的开放标准，于 1999 年首次发布。它使用 XML 语法来描述图形，这意味着：
- 文本格式：SVG 文件是纯文本，可以用任何文本编辑器查看和编辑
- 可搜索：SVG 中的文本内容可以被搜索引擎索引
- 可脚本化：可以使用 JavaScript 动态操作 SVG 元素
- 可样式化：可以使用 CSS 为 SVG 元素添加样式
SVG 的优势
1. 无限缩放
矢量图形基于数学公式描述形状，而不是像素点，因此可以缩放到任意大小而保持清晰：
xml
<!-- 这个圆形无论放大多少倍都保持清晰 -->
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>2. 文件体积小
对于简单的图形和图标，SVG 文件通常比同等质量的位图小得多。
3. 响应式设计友好
SVG 可以根据容器大小自动缩放，非常适合响应式网站设计：
xml
<svg viewBox="0 0 100 100" width="100%">
<rect x="10" y="10" width="80" height="80" fill="green" />
</svg>4. 可访问性
SVG 支持添加标题和描述，提高了网页的可访问性：
xml
<svg>
<title>公司标志</title>
<desc>一个蓝色圆形，代表我们公司的标志</desc>
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>5. 动画支持
SVG 原生支持动画，可以创建流畅的矢量动画：
xml
<svg width="100" height="100">
<circle cx="50" cy="50" r="20" fill="red">
<animate attributeName="r" from="20" to="40" dur="1s" repeatCount="indefinite" />
</circle>
</svg>SVG vs 位图格式
| 特性 | SVG | PNG/JPEG |
|---|---|---|
| 图像类型 | 矢量图 | 位图 |
| 缩放质量 | 无损 | 会失真 |
| 文件大小 | 取决于复杂度 | 取决于分辨率 |
| 编辑方式 | 文本编辑器 | 图像编辑软件 |
| 适用场景 | 图标、标志、图表 | 照片、复杂图像 |
| 浏览器支持 | 现代浏览器全支持 | 所有浏览器 |
| SEO 友好 | 是 | 否 |
SVG 基本语法
SVG 使用 XML 语法，一个基本的 SVG 文档结构如下：
xml
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
width="200"
height="200"
viewBox="0 0 200 200">
<!-- 在这里添加图形元素 -->
<rect x="10" y="10" width="180" height="180" fill="#f0f0f0" />
<circle cx="100" cy="100" r="50" fill="blue" />
</svg>常用属性
width/height：定义 SVG 画布的宽度和高度viewBox：定义 SVG 的坐标系统和可见区域xmlns：声明 SVG 命名空间
SVG 的应用场景
1. 网站图标和标志
SVG 是制作网站图标的理想选择，因为它们可以在任何分辨率的屏幕上保持清晰。
2. 图表和数据可视化
SVG 是创建交互式图表的基础，许多流行的图表库（如 D3.js）都使用 SVG。
3. 动画和交互效果
SVG 动画可以创建吸引人的用户界面效果。
4. 地图
SVG 非常适合制作可缩放的交互式地图。
5. 图标字体替代
SVG 图标比图标字体更灵活，支持多色和动画。
浏览器支持
现代浏览器（Chrome、Firefox、Safari、Edge）都完全支持 SVG。IE9+ 也提供了基本支持。
在网页中使用 SVG
SVG 可以通过多种方式嵌入网页：
1. 内联 SVG
html
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>
</body>2. 使用 img 标签
html
<img src="image.svg" alt="SVG 图片" />3. 使用 CSS 背景
css
.icon {
background-image: url('icon.svg');
background-size: contain;
}4. 使用 object 标签
html
<object type="image/svg+xml" data="image.svg">
您的浏览器不支持 SVG
</object>学习 SVG 的建议
- 从基础形状开始：先学习矩形、圆形、线条等基本图形
- 理解坐标系统：掌握 viewBox 和坐标变换
- 学习路径命令：path 元素是 SVG 最强大的工具
- 实践动画效果：尝试 CSS 和 SMIL 动画
- 结合 JavaScript：学习如何用脚本操作 SVG
下一步
准备好开始学习 SVG 了吗？继续阅读以下章节：
- SVG 嵌入 HTML - 学习如何在网页中使用 SVG
- SVG 矩形 - 创建你的第一个 SVG 图形
- SVG 圆 - 绘制圆形和椭圆