SVG 急速入门教程(02.SVG是什么?)

111 阅读2分钟

上一篇:教程介绍

1. SVG 是什么?

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

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

2. SVG 特点和优势

2.1. 两种图形系统

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

2.1.1. 光栅系统

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

以下是一张 webp 格式的图片:

webp 格式的红绿灯

2.1.2. 矢量系统

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

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

002.svg

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

2.2. SVG 矢量图形的优势

2.2.1. 缩放性(Scalability)

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

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

2.2.2. 动态、可交互

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

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

3. 小结

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

下一篇:如何使用 SVG ?