Raster image and Vector image

引言：两种完全不同的“画图方式”

在数字世界里，几乎所有图像都可以归到两大类：栅格图像（Raster image / 位图） 和 矢量图形（Vector image / SVG 等）。

• 栅格图像：用“像素点阵”描述图像，每个像素都有颜色，组成整张图。
• 矢量图形：用“几何形状 + 数学公式”描述图像，不直接保存每个像素。

这两种方式在存储结构、缩放效果、性能和应用场景上都有本质差异，理解它们有助于你在 Web、移动端、数据可视化甚至 GIS 中选对格式、写对代码。

---

一、什么是栅格图像（Raster image）

1. 栅格图像的数据结构

栅格图像也叫位图（bitmap）、光栅图像，本质是一张二维像素矩阵：

• 用一个规则的网格（matrix）来表示图像，每个格子是一个像素（pixel）。
• 每个像素记录自己的颜色（如 RGB、RGBA）和在网格里的位置（行、列）。

用伪结构可以写成：

image[row][col] = { r, g, b, a }  // 每个像素一个颜色值

分辨率就是这个矩阵的尺寸，例如 1920×1080 就是 1920 列 × 1080 行。

2. 常见栅格格式

常见的栅格图像文件格式包括：

• BMP：几乎不压缩，文件大，多用于 Windows 系统内部。
• JPEG / JPG：有损压缩，适合照片，色彩丰富但会牺牲一些细节。
• PNG：无损压缩，支持透明和较高色深，常用于 UI 图标、网页资产。
• GIF：支持简单动画，但色彩数量有限。
• TIFF：高保真、可带多页，常用于出版和扫描件。

这些格式差异主要在于压缩方式和附加特性（透明、动画、多页等），但底层都还是“像素网格”。

3. 栅格图像的优缺点

优势：

• 适合复杂、连续色调的图像：照片、绘画、复杂纹理。
• 可以自然表现阴影、渐变、噪点等丰富细节。
• 与现实世界的成像方式（相机感光元件）高度一致。

劣势：

• 与分辨率强绑定：
  • 放大到超过原始分辨率会出现“锯齿、模糊”，能看到像素块。
• 文件可能很大：
  • 尤其是高分辨率、多通道的图像，需要大量存储空间。
• 编辑时操作的是像素，不是对象：
  • 难以精确修改单个图形对象（比如单独调整一个图标的轮廓）。

---

二、什么是 SVG / 矢量图形（Scalable Vector Graphics）

1. SVG 的定义与语法

SVG 是 “Scalable Vector Graphics” 的缩写，中文通常称 可缩放矢量图形。 zh.wikipedia

• 它是一种基于 XML 的图形语言，用标签描述二维矢量图形：路径、线条、形状、文本、以及样式和变换。

一个简单的 SVG 例子：

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="orange" stroke="black" />
</svg>

这里没有任何像素数据，只有“画一个圆”的指令：中心点、半径、填充色、边框等。 developer.mozilla

2. 矢量图形的本质：数学对象

矢量图形（包括 SVG、AI、EPS 等）用数学方程描述几何对象：

• 每个基本元素是一个对象：
  • 点、线段、曲线（贝塞尔曲线）、多边形等。
• 对象的属性包括颜色、轮廓、线宽、位置、旋转、缩放等。
• 渲染时，浏览器或渲染引擎根据这些方程，在当前屏幕分辨率下生成像素。

因此，矢量图本质是“画图的代码”而不是像素快照。 w3

3. SVG / 矢量图形的优缺点

优势： zh.wikipedia

• 与分辨率无关：
  • 理论上可以无损放大到任意大小，边缘始终锐利。
• 文件通常更小（在图形较为简洁时）：
  • 存的是路径和指令，而不是每个像素，适合图标、Logo、插画。
• 易于编辑和重用：
  • 可以通过代码或图形工具修改单个对象、改变样式、做动画。
• 在 Web 中天然支持：
  • 内嵌于 HTML、可用 CSS/JS 控制，适合交互式图标和数据可视化。 developer.mozilla

劣势：

• 不适合高度写实的照片：
  • 用矢量去近似一张真实照片既不现实也不经济，文件和渲染非常复杂。
• 当图形极其复杂时，文件也可能变大：
  • 如果路径和节点多到几万几何元素，SVG 也会膨胀。

---

三、存储空间对比：为什么矢量通常更“轻”

1. 栅格 vs 矢量的存储模型

从“存储什么”的角度看：

• 栅格图：存的是 像素矩阵。文件大小大致 ∝ 像素数 × 每像素字节数（再加压缩的影响）。
• 矢量图：存的是 对象列表 + 属性。文件大小大致 ∝ 图形对象数量 ×（对象描述长度）。

这就带来一个常见结论：

对于同一个 Logo 或简单插画，SVG 等矢量格式通常比同分辨率的 PNG/JPG 文件小很多，而且放大不会模糊。

2. 典型例子：Logo 与 UI 图标

假设你有一个很标准的应用 Logo：简单形状 + 文字。

• 如果导出为 1024×1024 PNG：
  • 需要存 1024×1024 ≈ 1M 像素，每个像素 3–4 字节，压缩后还是可能是几十 KB 甚至上百 KB。
• 如果导出为 SVG：
  • 只需要存一个圆、几条线、一段文字的路径定义，通常在几 KB 或十几 KB 量级。

图标集、图形按钮、线路图、示意图这些场景，用 SVG 几乎总是更省空间、更清晰。

3. 什么时候栅格更合理（甚至更小）

• 高度复杂的图像（照片、写实插画）：
  • 用矢量近似会让对象数量爆炸，文件不一定比 JPEG 小，还难以渲染。
  • JPEG/PNG 等光栅格式通过压缩，可以在可接受的质量下保持不错的体积。
• 目标设备或软件只支持栅格：
  • 某些老旧系统或打印工作流程只认栅格格式，这时就只能用位图。

所以正确思路不是“矢量一定比栅格小”，而是：

• 简洁几何型图像 → 优先矢量（SVG）。
• 写实、复杂、连续色调 → 优先栅格（JPEG/PNG/WebP）。 blog.fileformat

---

四、缩放与显示：分辨率绑定 vs 分辨率无关

1. 栅格图像的缩放问题

栅格图像因为与分辨率绑定，在缩放时会遇到这些问题： blog.fileformat

• 放大：
  • 渲染器只能“插值”现有像素，结果是边缘变软、有锯齿或马赛克感。
• 缩小：
  • 可能丢失细节，某些细线变得不可见或模糊。

因此，设计人员在导出图像时需要为不同用途指定各自的分辨率（@1x、@2x、@3x…），在 Web 和移动端要准备多套资源。

2. SVG 的分辨率独立性

SVG 是矢量，本质与分辨率无关：

• 同一个 SVG：
  • 在手机上可以渲成 24×24 像素的小图标。
  • 在 4K 屏上也可以渲成 240×240 像素的大图标。
• 文件内容不变，只是渲染时根据输出设备的分辨率计算更多或更少的像素。

这使得 SVG 在响应式网页、Retina 屏、打印（从屏幕到海报）场景中非常有优势：一套资源走天下。 developer.mozilla

---

五、Web 前端中的 Raster vs SVG：性能与实践

1. 加载性能和网络传输

• 栅格图（PNG/JPEG/WebP）：
  • 浏览器对它们高度优化，适合大面积背景、照片、Banner。
  • 可使用响应式图片（srcset）、懒加载等方式优化。
• SVG：
  • 对于小图标、插画，文件更小；可内嵌在 HTML 中减少请求。
  • 复杂 SVG（很多路径和滤镜）渲染成本可能会高，需要注意性能。

一些前端实战文章建议：

• 小图标、Logo、插画 → 优先 SVG。
• 背景图、照片类内容 → 优先栅格（JPEG/WebP），按需压缩。

2. 可访问性与交互

• SVG 里的图形是 DOM 的一部分，可以：
  • 用 CSS 添加 hover 效果。
  • 用 JS 做动画、响应点击。
  • 给图形元素加 aria-label 或标题，有利于无障碍访问。
• 栅格图仅是一块像素，不具备内建结构，交互通常通过外层容器实现。

这也是为什么在现代 UI 框架中，图标库大量采用 SVG，而不是一堆 PNG。 developer.mozilla

---

六、在数据可视化和技术栈中的选择

1. 报表和图表导出

• Web 报表：
  • 内嵌 SVG 图表可以随页面缩放保持清晰，也方便用户复制到文档中再编辑。
• PDF / Print：
  • 使用矢量图可以确保打印质量，不会出现像素化。

2. 地理信息系统（GIS）与工程制图

在 GIS 和工程制图领域，同样有“栅格 vs 矢量”的选择：

• 栅格（影像）：卫星图、遥感影像，适合显示真实地物。
• 矢量：道路、边界、管线等精确几何对象，易于做拓扑分析和网络分析。

实践中常常是两者混用：底图用栅格影像，上面叠加矢量线面要素。

---

七、如何在实际项目中做选择

你可以按这样几个问题来决策：

1. 我要表现的是真实照片 / 复杂纹理，还是 简单形状 / 标志 / 图标 / 线路图？
2. 是否需要 对图像做交互、动画或按代码修改局部元素？
3. 是否需要在不同分辨率设备和打印场景间无损缩放？
4. 是否在意文件体积、网络加载速度和可维护性？

粗略经验：

• 照片、写实图像 → 栅格（JPEG/WebP/PNG）。
• 图标、Logo、线框图、插画 → SVG 或其他矢量格式。
• Web UI 中的图标库 → 强烈建议 SVG。
• 报表和技术文档中的图形 → 优先矢量，保证打印和缩放效果。

---

八、Bitmap

这里的“Bitmap → 位图”其实是一个习惯用法 + 语义抽象的问题：
– 在图像语境里，map 确实来自“映射”，但中文不直接翻译成“位映射图”，而是抓核心——“用很多位组成的图像”，所以用了“位图”这个更顺口、直观的译名。

下面分开讲一下：

Bitmap 一词本身的含义

从英文技术术语来看：

• bit：比特，也就是二进制的 0/1。
• map：在计算机语言里，除了“映射（mapping）”之外，还有“表、图、布局”的含义，可以理解为“某个空间上的映射/布置”。

在图像这块，早期的 bitmap 本质上是：
– 一个按空间排布的 数组/矩阵，
– 每个位置用若干个 bit 表示颜色或状态。

所以英文里说 “bitmap” 原始意思就是：

一块“按空间排列的位（bits）构成的图像/数据结构”，也可以叫“map of bits”。

后来这个词在图像领域特化为：
– 用像素数组来表示图像的方式（也叫 raster image）。

这也是为什么很多英文资料会说：

“The term bitmap comes from computer programming terminology, meaning just a map of bits, a spatially mapped array of bits.”
意思就是：位在空间上“排布成图”，所以叫 bitmap。

为什么中文翻译成“位图”，不是“位映射”

中文翻译强调的是：

• 核心特征：
  • 用 “位”（比特、像素）来构成图像。
  • 图像表现为一个“图”，而不是抽象的“映射关系式”。
• “图”在中文里兼有“图像、图形”的含义，比“映射图”更自然，也更符合日常用法。

如果直译的话：

• bitmap 可以理解为 “位的映射图”、“比特映射图”之类，但这么说既拗口又不直观。
• 于是就简化为“位图”：
  • “位”指出用位/像素这种离散单元来记录。
  • “图”指出它是个图像。

又因为在图像领域 bitmap 几乎总是拿来指“像素图、点阵图”，所以中文直接用“位图”来作为这个概念的通用名称：

• 大陆一般叫：位图。
• 台湾叫：点阵图。
• 两者都强调“点/位组成的图像”。

与“映射”的关系：概念上仍然是 map

你说的“map 不是映射吗”其实是对的，只不过：

• 在图像语境里，这个映射是“空间位置 → 比特/像素值”的映射：
  • 行列坐标 ↔ 像素颜色。
• 英文里的 map 常常既有“映射关系”又有“布置好的图”的味道，所以用在图像时自然就往“某种图结构”靠。

中文翻译时做了这两步：

1. 认同它是“空间中一堆位的映射/排布”。
2. 把这层抽象压缩成更简洁的“位图”，让一般用户易于理解。

所以可以这么总结：

“Bitmap” 从字面和计算机术语上确实是 “map of bits（位的映射）”，
但在图像领域已经特化为“按像素/位排布的图像”，
中文翻译时抓住“用位构成图像”这层含义，就简洁地叫“位图”，而不是强行翻成“位映射图”。

结语：把 Raster 和 SVG 用在它们各自最擅长的地方

栅格图像和 SVG 并不是互相替代的关系，而是各自服务于不同类型的视觉内容：

• 栅格负责“真实世界的像素快照”，
• SVG 负责“抽象世界的几何符号”。

理解它们在数据结构、存储空间、缩放效果和性能上的本质差异，你就能在设计、开发和数据可视化中选对格式，既保证视觉质量，又兼顾性能和可维护性。 zh.wikipedia