SVG，即可缩放矢量图形（Scalable Vector Graphics），是一种基于可扩展标记语言（XML）的图形矢量图像格式。它具有无损压缩、跨平台显示等优点，广泛应用于网页设计、移动应用开发等领域。对于初学者来说，SVG的学习门槛相对较低，本教程将带你从零开始，轻松绘制矢量图。
第一节：SVG基础知识
1. SVG元素
SVG由一系列元素组成，每个元素都具有特定的功能。以下是SVG中常见的几个元素：
<svg>：定义SVG文档的根元素，包含所有SVG图形元素。<rect>：矩形元素，用于绘制矩形。<circle>：圆形元素，用于绘制圆形。<ellipse>：椭圆元素，用于绘制椭圆。<line>：直线元素，用于绘制直线。<polyline>：折线元素，用于绘制多边形。<polygon>：多边形元素，用于绘制多边形。
2. SVG属性
SVG元素具有丰富的属性，用于定义图形的形状、颜色、大小等。以下是SVG中常见的几个属性：
x、y：定义图形元素的坐标位置。width、height：定义图形元素的大小。fill：定义图形元素的填充颜色。stroke：定义图形元素的边框颜色和宽度。
第二节：绘制基本图形
1. 绘制矩形
使用<rect>元素绘制矩形，以下是一个示例代码：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="100" height="100" fill="blue" stroke="red" stroke-width="2" />
</svg>
这段代码将绘制一个蓝色的矩形，边框为红色，边框宽度为2。
2. 绘制圆形
使用<circle>元素绘制圆形，以下是一个示例代码：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="50" fill="green" stroke="purple" stroke-width="4" />
</svg>
这段代码将绘制一个绿色的圆形，边框为紫色，边框宽度为4。
第三节：组合图形
在实际应用中，我们常常需要将多个图形组合在一起，形成复杂的图形。以下是一个示例：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="100" height="100" fill="blue" />
<circle cx="150" cy="150" r="50" fill="green" />
<line x1="10" y1="100" x2="150" y2="150" stroke="red" stroke-width="2" />
</svg>
这段代码将绘制一个蓝色的矩形、一个绿色的圆形和一条红色的直线。
第四节：进阶技巧
1. 使用路径（Path）绘制图形
SVG中的路径（Path）元素可以绘制复杂的图形。以下是一个示例：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<path d="M10 10 Q50 50 100 10 T200 10" fill="none" stroke="black" stroke-width="2" />
</svg>
这段代码将绘制一个抛物线。
2. 动画效果
SVG支持动画效果，可以通过<animate>元素实现。以下是一个示例：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="50" fill="blue" stroke="red" stroke-width="2">
<animate attributeName="r" from="50" to="100" dur="1s" fill="freeze" />
</circle>
</svg>
这段代码将使圆形的半径在1秒内从50变为100。
第五节：总结
SVG是一种功能强大的矢量图形格式，具有丰富的应用场景。通过本教程，你已掌握了SVG的基本知识、绘制基本图形、组合图形和进阶技巧。希望你能将这些知识应用到实际项目中，创作出更多精美的矢量图形。