2. 位图 vs. 矢量图

位图和矢量图是平面领域最常用到的两个概念,这里详细解释一下。

2.1. 构成原理的区别

位图也叫光栅图、栅格图、像素图。叫什么无所谓,反正是外来词,我们需要理解的是位图的原理。

原理上,位图是像素图,即位图是由像素构成的,每一个像素只能有一种颜色,不同的像素就可以有不同的颜色。

像素是位图的最小单位。所以,描述一幅位图就是描述一组像素,而打印一幅位图实际上就是打印一组像素,只不过,这组像素的数量可能非常多。

另外,如果要把位图打印出来,必须要依靠图像分辨率这个参数来换算像素的物理尺寸,因为打印位图就是打印像素,不知道像素的物理尺寸的话,就无法正常打印位图。

在显示器上或手机上显示位图时,可以没有分辨率(ppi)这个参数,因为只有打印时才需要分辨率;仅仅显示位图时,是没有物理尺寸的概念的。

矢量图不是由像素构成的,而是由曲线构成;而矢量图的曲线是通过数学公式来描述的。所以,描述一幅矢量图其实是描述一组数学公式。并且,打印矢量图与图像分辨率(ppi)无关,或者说,矢量图没有分辨率(ppi)这个概念,只有位图才有分辨率的概念。

我们举个例子来看一下。

2.1.1. 位图描述方法

假设有一张30x30像素的位图图像,内容是一个直径3厘米的黑色圆圈,应该这样描述:

  1. 首先,准备好一个类似围棋棋盘一样的矩阵,30x30个小方块;

  2. 然后,文件会记录第1个像素,需要记录的信息包括像素的坐标位置在哪里,以及像素的颜色;

  3. 再然后记录第2个像素,记录的信息仍然包括像素的坐标位置和像素的颜色;

  4. 再然后记录第3个像素……

  5. 再然后记录第4个像素……

  6. 再然后记录第5个像素……

……

  1. 最后记录第900个像素;

这样,就完成了整个位图图像的描述。

如果形象化一些来看的话,这幅位图就是一个有900个小方格的正方形围棋棋盘,其中每一个小方格就是一个像素。这900个小方格彼此紧挨着排列在一起,每一个小方格涂上不同的颜色,就形成了最终的位图图像。

其中,有的像素是黑色(圆圈颜色),有的像素不是黑色(背景色)。

上面的解释过程中,忽略了分辨率参数。

2.1.2. 矢量图描述方法

那么,一幅黑色圆圈矢量图,文件应该怎么描述呢?这样描述:

圆形;直径3;圆圈宽度0.1;单位厘米;描边黑色。

很明显,矢量图的描述方式比位图要简单很多,这也是导致很多情况下矢量图比位图更节约磁盘空间的原因。

../../_images/circle-vs1.png

圆圈:左侧是位图,右侧是矢量图

左侧位图生成工具:https://cquinn.dev/tools/pixelgeometry
右侧矢量图生成工具:inkscape

2.2. 缩放的区别

下面我们看一下位图与矢量图在缩放时的区别,先看位图。

同上,30x30像素的位图图像,内容是一个直径3厘米的黑色圆圈,现在放大为60x60像素,整体变成原来四倍。文件会这样描述:

  1. 首先,在原来的矩阵中插入2700个小方块,加上原来的900个小方块,一共是60x60=3600个小方块;

  2. 然后,程序会计算哪些方块需要变成黑色,哪些方块不能是黑色;

  3. 再然后,文件会记录第1个像素,需要记录的信息包括像素的坐标位置在哪里,以及像素的颜色;

  4. 再然后记录第2个像素,记录的信息仍然包括像素的坐标位置和像素的颜色;

  5. 再然后记录第3个像素……

  6. 再然后记录第4个像素……

  7. 再然后记录第5个像素……

……

  1. 最后记录第3600个像素;

其中,有的像素是黑色(圆圈颜色),有的像素不是黑色(背景色)。

而对于矢量图,只需要稍微修改一下就可以:

原来:圆形;直径3;圆圈宽度0.1;单位厘米;描边黑色。
现在:圆形;直径6;圆圈宽度0.2;单位厘米;描边黑色。

2.3. 形状的区别

位图只能是矩形,而矢量图可以是任意形状。

位图虽然只能是矩形,但可以把不需要的像素设置为透明,这样位图也可以模拟成任意形状。

位图文件有多种格式,比如jpg、png、tiff等,有的位图文件格式不支持透明,所以只能显示成矩形,无法模拟其它形状。

2.4. 来源的区别

早期的位图来源于扫描仪扫描的图片。

现在手机拍摄的照片是位图,视频也是位图组成的,屏幕截图也是位图。

矢量图通常是用矢量图软件创建的。扫描或拍照是无法直接创建矢量图的。

位图可以通过软件转换成矢量图,但效果与原来的位图可能会有很大区别。

矢量图可以保存成位图,这种位图通常质量都很高。

2.5. 打印的区别

打印机在处理位图和矢量图时,基本没有区别。而矢量图打印质量更高的原因是,矢量图本身的精度就高,不像位图那样精度有限。

无论是位图,还是矢量图,打印机在打印之前都会进行 光栅化 (RIP)处理。

2.6. 应用方向的区别

线条类或者色块类的内容,使用矢量图非常适合,因为矢量图本身就是曲线,全部由线条构成。

比如汉字,或者字母,或者阿拉伯数字,这些都是线条构成,用矢量图来处理会得到很高的质量,速度也比较快。

从现实生活中得到的图像,典型的是拍摄的照片和扫描的图片,都是位图。这一类的图片不适合转换成矢量图,因为转换是程序化的过程,结果无法精准控制,效果有可能很奇怪。

位图如果以像素为单位转换成矢量图,精确控制的话,效果可以达到原位图效果(不会提升质量),但工作量太大,投入产出不成比例;并且,生成的矢量图有可能会比原来的位图占用更多的磁盘空间。