SVG，即可缩放矢量图形（Scalable Vector Graphics），是一种基于可扩展标记语言（XML）的图形图像格式。SVG图形可以无限放大而不失真，非常适合网页设计、移动应用和数字媒体等领域。本教程将从零开始，逐步教你如何使用SVG绘制图形，让你快速上手。
第一节：SVG基础
1. SVG元素
SVG图形由各种元素组成，包括矩形、圆形、线条、文本等。以下是一些常见的SVG元素：
<rect>：矩形<circle>：圆形<line>：线条<ellipse>：椭圆<polygon>：多边形<path>：路径<text>：文本
2. SVG属性
SVG元素具有丰富的属性，可以控制元素的外观和行为。以下是一些常见的SVG属性：
width和height：元素的宽度和高度x和y：元素的中心点坐标rx和ry：圆角矩形的半径r：圆形的半径stroke：边框颜色stroke-width：边框宽度fill：填充颜色
第二节：绘制基本图形
1. 绘制矩形
以下是一个简单的SVG代码示例，用于绘制一个矩形：
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="180" height="80" stroke="black" stroke-width="2" fill="none" />
</svg>
这段代码创建了一个宽180px、高80px的矩形，边框颜色为黑色，边框宽度为2px。
2. 绘制圆形
以下是一个简单的SVG代码示例，用于绘制一个圆形：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="50" stroke="black" stroke-width="2" fill="none" />
</svg>
这段代码创建了一个半径为50px的圆形，中心点坐标为(100, 100)，边框颜色为黑色，边框宽度为2px。
第三节：绘制线条和路径
1. 绘制线条
以下是一个简单的SVG代码示例，用于绘制一条线条：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<line x1="10" y1="10" x2="190" y2="190" stroke="black" stroke-width="2" />
</svg>
这段代码创建了一条从(10, 10)到(190, 190)的线条，边框颜色为黑色，边框宽度为2px。
2. 绘制路径
以下是一个简单的SVG代码示例，用于绘制一个心形路径：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<path d="M100,100 Q100,150 150,100 Q100,50 50,100 Q100,150 150,100" stroke="black" stroke-width="2" fill="none" />
</svg>
这段代码创建了一个心形路径，使用Q（quadratic Bézier curve）函数定义曲线。
第四节：绘制文本
以下是一个简单的SVG代码示例，用于绘制文本：
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<text x="10" y="20" font-family="Arial" font-size="16" fill="black">Hello, SVG!</text>
</svg>
这段代码创建了一个文本元素，内容为“Hello, SVG!”，字体为Arial，字号为16px，填充颜色为黑色。
总结
本教程从SVG基础、绘制基本图形、绘制线条和路径、绘制文本等方面，逐步介绍了SVG图形绘制的基本知识。通过学习本教程，你可以快速上手SVG图形绘制，并在实际项目中应用。希望本教程对你有所帮助！