SVG，即可缩放矢量图形（Scalable Vector Graphics），是一种基于可扩展标记语言（XML）的图形矢量文件格式。SVG可以描述任何二维图形，并可以自由缩放，不会降低分辨率，因此非常适合用于网页设计和图形处理。本篇文章将带你从零开始，轻松学会SVG绘图。
了解SVG的基础知识
在开始绘制SVG图形之前，我们需要了解一些基础知识。
SVG的基本元素
SVG中有许多基本元素，如<circle>、<rect>、<line>、<ellipse>、<polygon>等，这些元素可以组合成各种图形。
<circle>：创建一个圆形。<rect>：创建一个矩形。<line>：创建一条直线。<ellipse>：创建一个椭圆形。<polygon>：创建一个多边形。
SVG的属性
SVG元素具有多种属性，可以控制元素的形状、大小、颜色等。
cx、cy：圆心的横纵坐标。r：圆的半径。width、height：矩形的宽度和高度。x1、y1、x2、y2：直线的起点和终点坐标。rx、ry：椭圆的水平和垂直半径。points：多边形的顶点坐标列表。
从零开始绘制SVG图形
创建SVG文件
首先，我们需要创建一个SVG文件。可以使用任何文本编辑器（如Notepad++、VS Code等）创建一个以.svg为扩展名的文件。
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<!-- 图形元素 -->
</svg>
这里，我们设置SVG的宽度和高度为200像素。
绘制圆形
接下来，我们使用<circle>元素绘制一个圆形。
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="50" fill="red" />
</svg>
这里，我们设置了圆心的坐标为(100, 100)，半径为50像素，并填充了红色。
绘制矩形
现在，我们使用<rect>元素绘制一个矩形。
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="50" fill="red" />
<rect x="50" y="50" width="100" height="100" stroke="black" fill="none" />
</svg>
这里，我们设置了矩形的左上角坐标为(50, 50)，宽度和高度为100像素，边框颜色为黑色。
绘制直线
接下来，我们使用<line>元素绘制一条直线。
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="50" fill="red" />
<rect x="50" y="50" width="100" height="100" stroke="black" fill="none" />
<line x1="0" y1="0" x2="200" y2="200" stroke="blue" />
</svg>
这里，我们设置了直线的起点坐标为(0, 0)，终点坐标为(200, 200)，边框颜色为蓝色。
保存SVG文件
完成绘图后，将SVG文件保存为.svg格式，并在浏览器中打开查看效果。
总结
通过本篇文章的学习，你现在已经掌握了SVG绘图的基本技巧。希望你能将这些知识应用到实际项目中，绘制出更多精美的矢量图形。记住，SVG绘图是一门实践性很强的技能，只有多练习，才能不断提高。祝你在SVG绘图的道路上越走越远！