从零开始学SVG：图文并茂的入门教程，轻松绘制你的第一幅矢量图

SVG，即可缩放矢量图形（Scalable Vector Graphics），是一种基于可扩展标记语言（XML）的图形图像格式。SVG格式的图像可以无限放大而不失真，非常适合用于网页设计、动画制作等领域。本教程将从零开始，带你轻松绘制你的第一幅矢量图。

SVG基础

1. SVG元素

SVG图像由一系列元素组成，包括<svg>、<circle>、<rect>、<line>、<polyline>、<polygon>、<ellipse>、<path>等。这些元素分别代表不同的图形形状。

2. 属性

SVG元素具有丰富的属性，如x、y、width、height、r（半径）等，用于定义图形的位置、大小和形状。

3. 坐标系

SVG图像的坐标系以左上角为原点，水平向右为x轴，垂直向下为y轴。

实战：绘制一个简单的圆形

1. 创建SVG元素

首先，我们需要创建一个SVG元素，并为其设置宽度和高度。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <!-- 图形内容 -->
</svg>

2. 绘制圆形

接下来，我们使用<circle>元素绘制一个圆形。设置cx和cy属性定义圆心坐标，r属性定义半径。

<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="red" />
</svg>

3. 添加样式

为了使圆形更加美观，我们可以为其添加一些样式，如边框颜色、边框宽度、填充颜色等。

<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="red" />
</svg>

实战：绘制一个简单的矩形

1. 创建SVG元素

与绘制圆形类似，首先创建SVG元素，并设置宽度和高度。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <!-- 图形内容 -->
</svg>

2. 绘制矩形

使用<rect>元素绘制一个矩形。设置x、y、width和height属性定义矩形的位置和大小。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect x="50" y="50" width="100" height="100" stroke="black" stroke-width="2" fill="blue" />
</svg>

3. 添加样式

为矩形添加样式，如边框颜色、边框宽度、填充颜色等。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect x="50" y="50" width="100" height="100" stroke="black" stroke-width="2" fill="blue" />
</svg>

总结

通过本教程，你已成功掌握了SVG的基本知识和绘制简单图形的方法。接下来，你可以尝试绘制更复杂的图形，如组合图形、路径等。随着经验的积累，你将能够创作出更多精美的矢量图形。