SVG（Scalable Vector Graphics）是一种用于描述二维图形的 XML 标记语言，它可以实现在不失真的情况下对图形进行缩放和旋转。SVG 可以用于创建简单的图标、复杂的图形甚至是动画效果，因此在 web 前端开发中被广泛应用。
SVG 的优势
- 矢量图形：SVG 使用矢量图形描述，因此无论放大多少倍都不会失真，适合用于高清屏幕。
- 可编辑性：SVG 图形可以通过文本编辑器进行编辑，方便开发人员进行修改。
- 交互性：SVG 支持事件绑定和动画效果，可以实现丰富的交互体验。
- 跨浏览器支持：所有现代浏览器都支持 SVG 标签，因此可以在各种平台上展示一致的效果。
- 轻量级：相比于传统的图片格式，SVG 文件通常更小，有利于提升页面加载速度。
SVG 的基本结构
一个简单的 SVG 图形通常由 <svg> 标签包裹，其中可以包含各种图形元素和属性。以下是一个简单的 SVG 示例：
---- ----------- ------------- ------- ------- ------- ------ ---------- -- ------
在上面的示例中，我们创建了一个宽高为 100px 的 SVG 画布，并在其中绘制了一个半径为 40px 的红色圆形。在 SVG 中，<circle> 标签用于绘制圆形，cx 和 cy 分别表示圆心的 x 和 y 坐标，r 表示半径，fill 表示填充颜色。
SVG 的坐标系统
在 SVG 中，坐标系统与常规的二维坐标系统有所不同。SVG 的坐标原点位于左上角，x 轴向右为正，y 轴向下为正。因此，当我们绘制图形时需要注意坐标的方向。
以上就是 SVG 的简介部分，希望通过本章的介绍能让你对 SVG 有一个初步的了解。在接下来的章节中，我们将深入探讨 SVG 的各种用法和技巧。