SVG，即可缩放矢量图形（Scalable Vector Graphics），是一种基于可扩展标记语言（XML）的图形图像格式。它具有图像质量高、文件体积小、可无限放大而不失真的特点，广泛应用于网页设计、移动应用界面、图标制作等领域。本教程将从零开始，带你轻松上手SVG绘制。
SVG基础
1. SVG元素
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文件
首先，创建一个名为my-first-svg.svg的文件，并添加以下内容：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<!-- 这里将添加图形元素 -->
</svg>
2. 添加圆形元素
在<svg>元素内，添加一个圆形元素：
<circle cx="100" cy="100" r="50" stroke="black" stroke-width="2" fill="red" />
这段代码将创建一个半径为50的红色圆形，中心点坐标为(100, 100)。
3. 添加矩形元素
在<svg>元素内，添加一个矩形元素：
<rect x="50" y="50" width="100" height="100" stroke="black" stroke-width="2" fill="blue" />
这段代码将创建一个宽度和高度都为100的蓝色矩形，左上角坐标为(50, 50)。
4. 添加路径元素
在<svg>元素内，添加一个路径元素：
<path d="M10 10 L100 10 L100 100 L10 100 Z" stroke="black" stroke-width="2" fill="green" />
这段代码将创建一个绿色三角形，顶点坐标依次为(10, 10)、(100, 10)、(100, 100)和(10, 100)。
5. 保存并查看效果
保存文件后，使用浏览器打开my-first-svg.svg文件，即可查看你的第一幅SVG图。
总结
通过本教程，你已成功绘制了你的第一幅SVG图。SVG具有丰富的功能和强大的表现力，相信你在实践中会越来越熟练。继续探索和学习，你将能够创作出更多精美的SVG作品！