SVG，即可缩放矢量图形（Scalable Vector Graphics），是一种基于可扩展标记语言（XML）的图形图像格式。它允许网页设计师创建高质量、可无限缩放的矢量图形，适用于网页、移动应用和桌面应用程序。本教程将带你轻松入门SVG，从绘制你的第一幅图形开始，逐步掌握网页矢量图设计的基础。
了解SVG
在开始绘制图形之前，让我们先了解一些SVG的基本知识。
SVG元素
SVG使用XML语法来描述图形，它包含一系列预定义的元素，如<circle>、<rect>、<line>、<polyline>、<polygon>、<path>等，这些元素可以组合成复杂的图形。
SVG属性
每个SVG元素都有一组属性，用于定义其外观和行为。例如，<circle>元素具有cx、cy、r等属性，分别表示圆心的横纵坐标和半径。
SVG视图框
SVG视图框（viewport）定义了图形的显示区域。可以通过<svg>元素的width和height属性设置视图框的大小。
绘制你的第一幅图形
现在，让我们开始绘制SVG图形。以下是一个简单的示例，展示如何使用SVG绘制一个圆形：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="50" fill="blue" />
</svg>
这段代码创建了一个宽200像素、高200像素的SVG视图框，并在其中绘制了一个半径为50像素、填充颜色为蓝色的圆形。
分析代码
<svg>元素定义了SVG图形的根元素，width和height属性设置了视图框的大小。<circle>元素表示圆形，cx和cy属性定义了圆心的位置，r属性定义了圆的半径。fill属性设置了圆的填充颜色。
掌握SVG设计基础
绘制简单的图形后，我们可以进一步学习SVG设计的基础知识。
图形组合
SVG允许我们将多个图形组合在一起，形成更复杂的图形。以下是一个示例，展示如何将两个圆形组合成一个心形：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="50" fill="red" />
<circle cx="100" cy="100" r="30" fill="blue" />
</svg>
在这个示例中，我们使用了两个圆形，一个红色一个蓝色，通过调整它们的半径和位置，形成了一个心形。
SVG路径
SVG路径（<path>元素）是一种强大的图形绘制工具，可以绘制直线、曲线、圆形等复杂图形。以下是一个示例，展示如何使用SVG路径绘制一个三角形：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<path d="M10,10 L100,10 L50,100 Z" fill="green" />
</svg>
在这个示例中，我们使用<path>元素的d属性定义了三角形的路径，其中M表示移动到指定位置，L表示绘制直线，Z表示闭合路径。
总结
通过本教程，你已成功入门SVG，并掌握了绘制简单图形和组合图形的基本技巧。接下来，你可以尝试使用SVG设计更复杂的图形，并将其应用到网页和移动应用中。祝你学习愉快！