SVG 简介

SVG（Scalable Vector Graphics）是一种用于描述二维图形的 XML 标记语言，它可以实现在不失真的情况下对图形进行缩放和旋转。SVG 可以用于创建简单的图标、复杂的图形甚至是动画效果，因此在 web 前端开发中被广泛应用。

SVG 的优势

1. 矢量图形：SVG 使用矢量图形描述，因此无论放大多少倍都不会失真，适合用于高清屏幕。
2. 可编辑性：SVG 图形可以通过文本编辑器进行编辑，方便开发人员进行修改。
3. 交互性：SVG 支持事件绑定和动画效果，可以实现丰富的交互体验。
4. 跨浏览器支持：所有现代浏览器都支持 SVG 标签，因此可以在各种平台上展示一致的效果。
5. 轻量级：相比于传统的图片格式，SVG 文件通常更小，有利于提升页面加载速度。

SVG 的基本结构

一个简单的 SVG 图形通常由 <svg> 标签包裹，其中可以包含各种图形元素和属性。以下是一个简单的 SVG 示例：

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

在上面的示例中，我们创建了一个宽高为 100px 的 SVG 画布，并在其中绘制了一个半径为 40px 的红色圆形。在 SVG 中，<circle> 标签用于绘制圆形，cx 和 cy 分别表示圆心的 x 和 y 坐标，r 表示半径，fill 表示填充颜色。

SVG 的坐标系统

在 SVG 中，坐标系统与常规的二维坐标系统有所不同。SVG 的坐标原点位于左上角，x 轴向右为正，y 轴向下为正。因此，当我们绘制图形时需要注意坐标的方向。

以上就是 SVG 的简介部分，希望通过本章的介绍能让你对 SVG 有一个初步的了解。在接下来的章节中，我们将深入探讨 SVG 的各种用法和技巧。