SVG，即可缩放矢量图形（Scalable Vector Graphics），是一种基于可扩展标记语言（XML）的图形图像格式。SVG格式的图像可以无限放大而不失真，非常适合用于网页设计、图标制作等领域。本教程将从零开始，带你轻松入门SVG绘制。
一、SVG基础
1. SVG元素
SVG图形由多种元素组成，主要包括：
<svg>：定义SVG图形的根元素。<circle>：绘制圆形。<rect>：绘制矩形。<line>：绘制直线。<polyline>：绘制多边形。<polygon>：绘制闭合多边形。<ellipse>：绘制椭圆。<path>：绘制任意形状。
2. SVG属性
SVG元素具有丰富的属性，用于控制图形的样式和位置。以下是一些常用属性：
x、y：元素的中心点坐标。width、height：元素的宽度和高度。r：圆形的半径。rx、ry：椭圆的水平和垂直半径。stroke：边框颜色。stroke-width：边框宽度。fill：填充颜色。
二、绘制第一个SVG图形
1. 创建SVG文件
首先，创建一个名为example.svg的文件，并添加以下内容：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<!-- 图形内容 -->
</svg>
这里设置了SVG的宽度和高度为200像素，并指定了XML命名空间。
2. 绘制圆形
在<svg>元素内部，添加以下代码来绘制一个圆形：
<circle cx="100" cy="100" r="50" stroke="black" stroke-width="2" fill="red" />
这里定义了一个圆形，其中心点坐标为(100, 100)，半径为50像素，边框颜色为黑色，边框宽度为2像素，填充颜色为红色。
3. 查看效果
保存文件后，使用浏览器打开example.svg，即可看到绘制的圆形。
三、进阶技巧
1. 绘制矩形
使用<rect>元素可以绘制矩形，以下是一个示例：
<rect x="50" y="50" width="100" height="50" stroke="blue" stroke-width="2" fill="green" />
这里定义了一个矩形，其左上角坐标为(50, 50)，宽度和高度分别为100像素和50像素，边框颜色为蓝色，边框宽度为2像素，填充颜色为绿色。
2. 绘制直线
使用<line>元素可以绘制直线，以下是一个示例：
<line x1="50" y1="50" x2="150" y2="150" stroke="purple" stroke-width="2" />
这里定义了一条直线，起点坐标为(50, 50)，终点坐标为(150, 150)，边框颜色为紫色，边框宽度为2像素。
3. 绘制多边形
使用<polygon>元素可以绘制多边形，以下是一个示例：
<polygon points="50,50 100,150 150,50" stroke="orange" stroke-width="2" fill="yellow" />
这里定义了一个三角形，顶点坐标分别为(50, 50)、(100, 150)和(150, 50)，边框颜色为橙色，边框宽度为2像素，填充颜色为黄色。
四、总结
通过本教程，你已成功绘制了第一个SVG图形。SVG具有丰富的功能和强大的表现力，相信通过不断学习和实践，你将能够创作出更多精美的矢量图形。