SVG，即可缩放矢量图形（Scalable Vector Graphics），是一种基于可扩展标记语言（XML）的图形文件格式。SVG格式的图形可以任意缩放而不失真，非常适合网页设计、移动应用开发等领域。本教程将从零开始，带你轻松掌握SVG图形绘制技巧。
一、SVG基础
1. SVG文档结构
一个基本的SVG文档结构如下：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px" height="200px">
<!-- 图形内容 -->
</svg>
xmlns：指定SVG命名空间，值为”http://www.w3.org/2000/svg”。version：指定SVG版本，值为”1.1”。width和height：指定SVG图形的宽度和高度。
2. SVG元素
SVG图形主要由以下元素组成：
<circle>：圆形<ellipse>：椭圆形<line>：直线<polyline>：折线<polygon>：多边形<rect>：矩形<text>：文本
二、SVG图形绘制
1. 圆形
绘制一个圆形，需要指定圆心坐标、半径以及填充和描边颜色：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px" height="200px">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
cx和cy：圆心坐标r：半径stroke：描边颜色stroke-width：描边宽度fill：填充颜色
2. 矩形
绘制一个矩形，需要指定左上角坐标、宽度和高度以及填充和描边颜色：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px" height="200px">
<rect x="10" y="10" width="100" height="100" stroke="blue" stroke-width="2" fill="red" />
</svg>
x和y：左上角坐标width和height：宽度和高度stroke和stroke-width：描边颜色和宽度fill：填充颜色
3. 文本
绘制文本，需要指定文本内容、位置、字体样式以及填充和描边颜色：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px" height="200px">
<text x="10" y="20" font-family="Verdana" font-size="20" fill="black" stroke="white" stroke-width="1">Hello, SVG!</text>
</svg>
x和y：文本位置font-family：字体样式font-size：字体大小fill：填充颜色stroke和stroke-width：描边颜色和宽度
三、SVG图形组合
SVG图形可以组合使用，形成复杂的图形。以下是一个组合示例：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px" height="200px">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
<rect x="10" y="10" width="100" height="100" stroke="blue" stroke-width="2" fill="red" />
<text x="10" y="20" font-family="Verdana" font-size="20" fill="black" stroke="white" stroke-width="1">Hello, SVG!</text>
</svg>
通过以上教程，相信你已经对SVG图形绘制有了初步的了解。接下来，你可以尝试绘制更多有趣的图形，提升你的SVG绘图技巧。祝你学习愉快！