SVG 是什么？

前端教程SVG

SVG 是什么？

SVG 全称是: Scalable Vector Graphics, 中文名是: 可缩放矢量图形，本质上就是用 XML 标记语言把线、形状、颜色等组合为一个图形。

一个简单示例：以下代码就是用 XML 标记语言描述了一个背景为蓝色的长方形（<rect>），三个背景分别为红、黄、绿的圆形（<circle>）。

新窗口打开

SVG 特点和优势

两种图形系统

计算机绘制图形时主要使用以下两种图形系统。

光栅系统

在光栅系统中，一张图片本质上就是像素的二位数组（也被称为位图），保存为 png，jpg，webp 等格式。

webp 格式的红绿灯

更多光栅系统的介绍：百科-光栅图像

矢量系统

在矢量系统中，一张图片被描述为一系列的几何图形，在代码运行时实时绘制点、线、面等。

SVG 就是属于矢量系统，例如下面用 SVG 代码绘制的红绿灯：

SVG 格式的红绿灯

更多矢量系统的介绍：百科-矢量图

SVG 矢量图形的优势

缩放性（Scalability）

SVG 允许在不损失图像质量的情况下任意缩放图形，因为是代码执行时根据窗口大小实时绘制的，而不像 png 等图片是固定大小的。如果把 200x200 的png 图片放大为 400x400，就会出现模糊的情况。然而 SVG 不会出现这种情况。

例子：点击下面的“触发缩放”按钮，可以发现 SVG 没有任何模糊，然后 PNG 图片却很模糊。

新窗口打开

动态、可交互

由于 SVG 其实就是 XML 代码，并且可以和 HTML/CSS/JavaScript 交互，所以可以创建更加多彩、动态的、可交互的图形。

例如以下 2 个动态可交互的 SVG 图形：

新窗口打开

新窗口打开

小结

本节简单扼要地介绍了 SVG，下一节我们学习 SVG 的使用方式。