SVG 简介

SVG（Scalable Vector Graphics，可缩放矢量图形）是一种基于 XML 的矢量图像格式，用于描述二维图形。与位图图像（如 PNG、JPEG）不同，SVG 图像可以无限缩放而不失真，这使其成为现代 Web 开发中不可或缺的技术。

什么是 SVG？

SVG 是由 W3C（万维网联盟）制定的开放标准，于 1999 年首次发布。它使用 XML 语法来描述图形，这意味着：

文本格式：SVG 文件是纯文本，可以用任何文本编辑器查看和编辑
可搜索：SVG 中的文本内容可以被搜索引擎索引
可脚本化：可以使用 JavaScript 动态操作 SVG 元素
可样式化：可以使用 CSS 为 SVG 元素添加样式

SVG 的优势

1. 无限缩放

矢量图形基于数学公式描述形状，而不是像素点，因此可以缩放到任意大小而保持清晰：

<!-- 这个圆形无论放大多少倍都保持清晰 -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

2. 文件体积小

对于简单的图形和图标，SVG 文件通常比同等质量的位图小得多。

3. 响应式设计友好

SVG 可以根据容器大小自动缩放，非常适合响应式网站设计：

<svg viewBox="0 0 100 100" width="100%">
  <rect x="10" y="10" width="80" height="80" fill="green" />
</svg>

4. 可访问性

SVG 支持添加标题和描述，提高了网页的可访问性：

<svg>
  <title>公司标志</title>
  <desc>一个蓝色圆形，代表我们公司的标志</desc>
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

5. 动画支持

SVG 原生支持动画，可以创建流畅的矢量动画：

<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 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

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

2. 使用 img 标签

<img src="image.svg" alt="SVG 图片" />

3. 使用 CSS 背景

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

4. 使用 object 标签

<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 圆 - 绘制圆形和椭圆

#SVG 简介

#什么是 SVG？

#SVG 的优势

#1. 无限缩放

#2. 文件体积小

#3. 响应式设计友好

#4. 可访问性

#5. 动画支持

#SVG vs 位图格式

#SVG 基本语法

#常用属性

#SVG 的应用场景

#1. 网站图标和标志

#2. 图表和数据可视化

#3. 动画和交互效果

#4. 地图

#5. 图标字体替代

#浏览器支持

#在网页中使用 SVG

#1. 内联 SVG

#2. 使用 img 标签

#3. 使用 CSS 背景

#4. 使用 object 标签

#学习 SVG 的建议

#下一步