SVG，即可缩放矢量图形（Scalable Vector Graphics），是一种基于可扩展标记语言（XML）的图形矢量格式。SVG文件可以无限放大或缩小而不失真，这使得它们在网页设计和图形制作中非常受欢迎。本文将带你从零开始学习SVG，帮助你轻松绘制图形，解锁设计新技能。
SVG基础
1. SVG文件结构
SVG文件是一个XML文件，包含一系列的元素和属性。以下是一个简单的SVG文件示例：
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
这个例子中，<svg>元素是SVG文档的根元素，定义了图形的大小和命名空间。<circle>元素定义了一个圆形，cx和cy属性定义了圆心的坐标，r属性定义了圆的半径，stroke和stroke-width定义了边框颜色和宽度，fill定义了填充颜色。
2. SVG基本元素
SVG包含多种基本元素，如：
<circle>：圆形<rect>：矩形<line>：直线<polyline>：折线<polygon>：多边形<ellipse>：椭圆<path>：路径
每个元素都有相应的属性来定义其外观和行为。
绘制图形
1. 绘制圆形
以下代码演示了如何绘制一个圆形：
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
这个圆形的圆心在坐标（50, 50），半径为40，边框颜色为绿色，宽度为4，填充颜色为黄色。
2. 绘制矩形
以下代码演示了如何绘制一个矩形：
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="80" height="80" stroke="blue" stroke-width="2" fill="red" />
</svg>
这个矩形的左上角坐标为（10, 10），宽度为80，高度为80，边框颜色为蓝色，宽度为2，填充颜色为红色。
3. 绘制折线
以下代码演示了如何绘制一个折线：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<polyline points="0,0 50,100 100,0" fill="none" stroke="black" stroke-width="2" />
</svg>
这个折线通过三个点（0,0）、（50,100）和（100,0）定义，没有填充颜色，边框颜色为黑色，宽度为2。
总结
通过学习SVG，你可以轻松地绘制各种图形，并将其应用于网页设计和图形制作。SVG的矢量特性使得图形可以无限放大或缩小，而不会失真。希望本文能帮助你从零开始学习SVG，解锁设计新技能。
