SVG，即可缩放矢量图形（Scalable Vector Graphics），是一种基于可扩展标记语言（XML）的图形图像格式。SVG图像在放大或缩小后不会失真，因此非常适合用于网页设计、图标制作等领域。本教程将从零开始，带你一步步绘制你的第一个SVG图标。
1. SVG基础
1.1 SVG元素
SVG由多种元素组成，包括：
<svg>：SVG容器的根元素。<circle>：圆形。<rect>：矩形。<line>：直线。<polyline>：多边形。<polygon>：闭合多边形。<ellipse>：椭圆。<path>：路径。<text>：文本。
1.2 属性
SVG元素具有多种属性，如：
x、y：元素的横纵坐标。width、height：元素的宽度和高度。r：圆形的半径。rx、ry：椭圆的横轴和纵轴半径。stroke：边框颜色。stroke-width：边框宽度。fill：填充颜色。
2. 绘制第一个图标
2.1 准备工作
首先，打开你的文本编辑器（如Notepad++、Sublime Text等），创建一个新的SVG文件（文件扩展名为.svg）。
2.2 设置SVG容器
在文件中输入以下代码，设置SVG容器的宽度和高度：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<!-- 图标内容 -->
</svg>
2.3 绘制圆形
接下来，在<svg>标签内部添加一个圆形元素，并设置其属性：
<circle cx="100" cy="100" r="50" stroke="black" stroke-width="2" fill="none" />
这里，cx和cy属性表示圆形中心的横纵坐标，r属性表示半径，stroke和stroke-width属性表示边框颜色和宽度，fill属性表示填充颜色。
2.4 添加文本
现在，我们为圆形添加一个文本标签，表示图标名称：
<text x="100" y="120" font-family="Arial" font-size="20" fill="black">图标名称</text>
这里，x和y属性表示文本的横纵坐标，font-family、font-size和fill属性分别表示字体、大小和颜色。
2.5 保存并预览
保存文件后，使用浏览器打开SVG文件，你应该能看到一个圆形图标，中间有文字“图标名称”。
3. 总结
通过本教程，你已成功绘制了第一个SVG图标。SVG具有强大的图形绘制能力，可以满足各种设计需求。在实际应用中，你可以根据需要添加更多元素和属性，制作出更加精美的图标。