SVG，即可缩放矢量图形（Scalable Vector Graphics），是一种基于可扩展标记语言（XML）的图形图像格式。SVG格式的图像可以无限放大而不失真，非常适合用于网页设计、图标制作等领域。本教程将从零开始，手把手教你轻松入门SVG绘图。
一、SVG基础
1. SVG元素
SVG由多种元素组成，包括形状、文本、图像等。以下是一些常用的SVG元素：
<circle>：圆形<rect>：矩形<ellipse>：椭圆<line>：直线<polyline>：折线<polygon>：多边形<path>：路径<text>：文本<image>：图像
2. SVG属性
SVG元素具有丰富的属性，用于控制元素的外观和行为。以下是一些常用的SVG属性：
x、y：元素的中心点坐标width、height：元素的宽度和高度r：圆形的半径cx、cy：圆形的中心点坐标rx、ry：椭圆的水平和垂直半径stroke：边框颜色stroke-width：边框宽度fill：填充颜色font-size：字体大小text-anchor：文本对齐方式
二、SVG绘图实例
下面通过几个实例，带你一步步学习SVG绘图。
1. 绘制圆形
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="50" stroke="black" stroke-width="2" fill="red" />
</svg>
这段代码将绘制一个半径为50的红色圆形，中心点坐标为(100, 100)。
2. 绘制矩形
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<rect x="50" y="50" width="100" height="100" stroke="black" stroke-width="2" fill="blue" />
</svg>
这段代码将绘制一个宽度和高度均为100的蓝色矩形，左上角坐标为(50, 50)。
3. 绘制路径
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<path d="M10 10 L50 10 L50 50 L10 50 Z" stroke="black" stroke-width="2" fill="green" />
</svg>
这段代码将绘制一个绿色三角形，顶点坐标分别为(10, 10)、(50, 10)、(50, 50)。
三、SVG进阶
1. SVG组合
SVG支持组合多个元素，形成复杂的图形。使用<g>元素可以将多个元素组合在一起。
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<g>
<circle cx="100" cy="100" r="50" stroke="black" stroke-width="2" fill="red" />
<rect x="50" y="50" width="100" height="100" stroke="black" stroke-width="2" fill="blue" />
</g>
</svg>
2. SVG动画
SVG支持动画效果，如渐变、旋转等。使用<animate>元素可以实现动画效果。
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="50" stroke="black" stroke-width="2" fill="red">
<animate attributeName="r" from="50" to="100" dur="2s" fill="freeze" />
</circle>
</svg>
这段代码将使红色圆形在2秒内从半径50扩大到100。
四、总结
通过本教程，你已掌握了SVG绘图的基本知识和技能。SVG绘图具有无限的可扩展性和丰富的功能，相信你在实际应用中会越来越熟练。祝你学习愉快！