SVG，即可缩放矢量图形（Scalable Vector Graphics），是一种基于可扩展标记语言（XML）的图形文件格式。SVG图形可以任意缩放而不失真，非常适合网页设计和打印。本教程将带你从零开始，轻松学会SVG绘图，让你快速掌握矢量绘图技巧。
SVG绘图基础知识
1. SVG图形结构
SVG图形由多个元素组成，包括<svg>、<circle>、<rect>、<line>、<polyline>、<polygon>、<ellipse>、<path>等。以下是一个简单的SVG图形示例：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
这个示例创建了一个红色的圆形，圆心在坐标(50, 50)，半径为40。
2. SVG属性
SVG元素具有丰富的属性，如width、height、fill、stroke、stroke-width等。以下是一个使用属性绘制矩形的示例：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="160" height="160" stroke="black" stroke-width="3" fill="green" />
</svg>
这个示例创建了一个绿色的矩形，左上角坐标为(20, 20)，宽度和高度均为160。
3. SVG坐标系统
SVG使用笛卡尔坐标系，其中x轴表示水平方向，y轴表示垂直方向。坐标原点位于SVG画布的左上角。
SVG绘图进阶技巧
1. SVG路径（Path）
SVG路径允许你绘制复杂的图形，如曲线、弧线等。以下是一个使用路径绘制心形的示例：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<path d="M100,100 q-30,0 -40,-20 q-10,-10 -10,-30 q0,-25 20,-40 q20,-15 40,-15 q25,0 40,15 q15,15 20,40 q10,20 10,30 q0,20 -10,30 q-10,20 -40,20 q-25,0 -40,-15" fill="red" />
</svg>
这个示例使用d属性定义了心形的路径。
2. SVG渐变（Gradient）
SVG渐变允许你在图形中创建颜色渐变效果。以下是一个使用线性渐变绘制彩虹的示例：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="rainbow" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color: red;" />
<stop offset="25%" style="stop-color: orange;" />
<stop offset="50%" style="stop-color: yellow;" />
<stop offset="75%" style="stop-color: green;" />
<stop offset="100%" style="stop-color: blue;" />
</linearGradient>
</defs>
<rect x="20" y="20" width="160" height="160" fill="url(#rainbow)" />
</svg>
这个示例使用<defs>元素定义了一个线性渐变，并在矩形中应用了渐变效果。
SVG绘图工具推荐
以下是一些SVG绘图工具推荐：
- Inkscape：开源矢量图形编辑器，支持SVG格式。
- Adobe Illustrator：专业矢量图形设计软件，支持SVG格式。
- Figma：在线协作设计工具，支持SVG格式。
总结
通过本教程，你已掌握了SVG绘图的基础知识和进阶技巧。现在，你可以开始使用SVG创作各种图形和动画了。祝你学习愉快！