SVG（可缩放矢量图形）是一种基于 XML 的标记语言，用于创建矢量图形和动画效果。与像素图不同，SVG图像是由数学方程定义的，因此可以随意放大而不会损失图像质量。本教程将向您介绍如何使用SVG创建精美的矢量图形和动画效果。
1. 创建基础形状
要创建简单的形状（如矩形、圆形、椭圆等），您可以使用SVG的内置元素。以下是一个矩形的示例：
<svg width="200" height="100">
<rect width="200" height="100" style="fill:rgb(0,0,255);" />
</svg>
在上面的代码中，我们使用<svg>元素指定了画布的尺寸，然后使用<rect>元素创建了一个矩形。style属性用于定义填充颜色。
2. 绘制路径
使用SVG的<path>元素可以绘制出更复杂的形状。路径由一系列指令组成，如移动到（M/m）、直线到（L/l）、贝塞尔曲线（C/c）等。以下是一个绘制心形的示例：
<svg width="200" height="200">
<path d="M100 10 C40 180, 160 180, 100 10" style="fill:red;" />
</svg>
在上面的代码中，我们使用<path>元素的d属性定义了心形的路径。M100 10表示将光标移动到坐标（100，10）处，C40 180, 160 180, 100 10表示在此之后绘制了一条贝塞尔曲线。
3. 添加文本
要在SVG图像中添加文本，可以使用<text>元素。以下是一个显示“Hello World！”的示例：
<svg width="200" height="100">
<text x="50%" y="50%" fill="black" dominant-baseline="middle" text-anchor="middle">Hello World!</text>
</svg>
在上面的代码中，我们使用<text>元素在画布的中心位置显示了“Hello World！”文本。x和y属性用于指定文本的位置，fill属性用于定义文本的颜色，dominant-baseline和text-anchor属性用于调整文本的对齐方式。
4. 创建动画效果
SVG还支持通过CSS或JavaScript创建动画效果。以下是一个使用CSS过渡实现心跳动画的示例：
<svg width="200" height="200">
<circle cx="100" cy="100" r="50" fill="red">
<animate attributeName="r" from="50" to="70" dur="1s" repeatCount="indefinite"/>
</circle>
</svg>
在上面的代码中，我们使用<circle>元素创建了一个圆形，并使用<animate>元素在1秒的时间内将其半径从50增加到70。repeatCount属性设置为indefinite表示动画将无限循环播放。
5. 其他SVG元素和属性
除了上述介绍的元素和属性外，SVG还提供了许多其他元素和属性，用于创建更复杂的图形和动画效果。例如，您可以使用<line>创建直线，使用<polygon>创建多边形，使用<g>创建组，使用transform属性进行变换等等。您可以通过SVG规范详细了解所有可用的元素和属性。
希望这个SVG图像教程能够帮助您开始创建出令人惊叹的矢量图形和动画效果！使用SVG，您可以轻松地通过代码实现各种创意和表现方式。加油！
本文来自极简博客，作者：魔法使者，转载请注明原文链接：SVG图像教程：创建矢量图形和动画效果
