矢量图和位图有什么区别？什么时候真的需要 SVG？

矢量图和位图的区别，说到底是图像的存储方式不同。位图（PNG、JPG、WebP）是一张由彩色像素组成的固定网格；矢量图（SVG）则是一组绘图指令：用坐标描述的形状、线条、曲线和填充。正是这一点决定了它们各自擅长什么。矢量图放大到任何尺寸都清晰，适合标志、图标和示意图；位图则能记录照片中无穷无尽的细微细节。本文会讲清楚什么时候该用 SVG、什么时候不该用，以及在两者之间转换时到底发生了什么。

位图到底是什么#

位图就是一个由像素组成的矩形，每个像素都有自己的颜色。一张 1200 × 800 的照片恰好由 960,000 个彩色小方块组成，不多也不少。PNG、JPG、WebP、GIF 和 HEIC 都是位图格式，它们的区别在于压缩这些像素的方式，而不是基本原理。（如果你正在两种最常见的格式之间犹豫，可以看看我们的 PNG 和 JPG 对比指南。）

由于像素数量是固定的，位图有一个天然的尺寸。缩小时，多余的像素会被丢掉；放大时，软件只能在原有像素之间“猜”出新的像素。这就是为什么把一个小标志拉伸到横幅上会变得发虚或出现明显的像素块。好处是，像素网格能记录相机拍到的一切：皮肤、树叶、雾气、阴影，以及其间的每一处渐变。

矢量图到底是什么#

矢量图根本不存储像素，而是存储一段描述，大致像这样：“在这里画一个这么大半径的圆，填成紫色，再画一条经过这些点的曲线。”SVG（Scalable Vector Graphics，可缩放矢量图形）是网页上的矢量格式，由 W3C 的 SVG 规范 定义，并且如 MDN 的 SVG 文档 所述，所有现代浏览器都支持它。从底层看，SVG 文件就是纯文本（XML），用文本编辑器就能打开。

像素只在图像被显示的那一刻才出现：浏览器或应用会按当时需要的尺寸把这些指令画出来。这就是矢量图缩放不失真的原因：一个由一个圆和几条曲线画成的标志，无论在手机、4K 显示器还是印刷海报上，都会被重新绘制得一样清晰。这也是为什么简单的矢量图往往文件极小，因为描述几个形状只需要几行文字。想更全面地了解这个格式本身，可以阅读我们的文章 什么是 SVG 文件。

矢量图与位图：直接对比#

什么时候真的需要 SVG#

当图像是由形状构成、而不是从现实世界拍摄下来的，并且需要在多种尺寸下都显示良好时，就选择矢量格式：

• 标志。 同一个标志会出现在小小的网站图标、网站页眉和印刷横幅上，一个 SVG 就能全部搞定。
• 图标和界面图形。 在高分辨率屏幕上显示清晰，而且简单的图标做成 SVG 往往比 PNG 更小。
• 图表、示意图和插画，尤其是纯色、线条干净的那种。
• 任何用来驱动机器的图形。 切割机、刻字机和激光雕刻机都是沿着路径工作的，所以它们需要矢量轮廓，而不是像素。
• 你还会继续修改的图形。 给矢量图换颜色或改尺寸，无论改多少次都不会降低质量。

什么时候位图才是正确选择#

只要图像是照片或包含照片级的细节，就用位图格式：

• 各种照片。 真实场景由数百万种略有差异的颜色组成，这恰恰是像素网格擅长记录、而形状无法高效描述的内容。
• 截图。 截图本来就是像素，用 PNG 可以原样保存。
• 扫描件和纹理，比如纸张、布料或手绘作品，这类图像的质感本身就是重点。
• 任何不接受 SVG 的地方。 很多上传表单、社交平台和办公软件都要求 PNG 或 JPG，即使是标志也一样。

简单的判断方法：画出来的，考虑矢量图；拍出来的，就用位图。

矢量图与位图之间的转换#

这两个方向并不对称，大部分困惑都来自这里。

矢量图转位图很简单，实际上也不会损失画质。 因为 SVG 是一组指令，转换器可以按你要求的任意像素尺寸把它画出来，所以你能在正好需要的尺寸上得到清晰的结果。我们的 SVG 转 PNG 工具 可以让你选择缩放倍数或精确的宽高，保留透明背景，并且完全在你的浏览器中运行。我们的指南 把 SVG 转成 PNG 时会发生什么 介绍了更多细节，比如输出尺寸是如何确定的。

位图转矢量图是“描摹”，而不是“还原”。 任何工具都无法从 PNG 或 JPG 中找回原始的矢量文件，图像一旦变成像素，那些信息就没有了。描摹工具做的是把颜色相近的像素归成一块块纯色区域，再沿每块区域画出轮廓。对于本来就由几个纯色形状组成的标志，效果可以接近完美。我们的 PNG 转 SVG 工具 正是为此设计的：标志、线稿和简单插画。

但用在照片上，描摹的效果很差。我们把一张 14.1 KB 的照片放进 JPG 转 SVG 工具，得到的是一个由 607 条路径组成、151.5 KB 的 SVG：体积是原图的十倍以上，和原图放在一起能明显看出色块斑驳。现在这个工具会先统计图片中的颜色，如果一张照片眼看要变成这样，就会提前提醒你。如果你好奇为什么体积会暴涨，可以看看我们的文章 为什么描摹出的 SVG 比 PNG 还大。

常见问题#

矢量图和位图的主要区别是什么？ 位图存储的是固定的彩色像素网格，而矢量图把形状和线条存储为数学指令，在显示时才绘制出来。所以矢量图在任何尺寸下都保持清晰，而位图放大到超过原始分辨率后就会变模糊。

SVG 比 PNG 好吗？ 做标志、图标和简单的纯色图形时 SVG 比 PNG 好，而截图、照片和任何细节复杂的图像则更适合用 PNG。两者没有绝对的好坏，只是为不同类型的图像而设计。

照片可以转成 SVG 吗？ 照片可以通过描摹转成 SVG，但结果通常比原图大得多，而且看起来色块斑驳，因为照片中平滑的颜色过渡会变成成百上千个纯色形状。照片还是保存为 JPG、PNG 或 WebP 比较好。

把 PNG 转成 SVG 就能无限放大吗？ 只有当图像足够简单、能被干净地描摹时（比如标志或线稿），把 PNG 转成 SVG 才能让它可以自由缩放。描摹工具会把像素重新画成形状，干净的描摹结果放大效果很好，而杂乱的描摹结果放大后只会让杂乱的形状变得更大。

SVG 转 PNG 会损失画质吗？ SVG 转 PNG 在导出的尺寸上不会损失画质，因为矢量图会在那个像素尺寸上重新绘制。不过导出后的 PNG 不能再像 SVG 那样随意放大，所以请按你需要的最大尺寸导出。

我的标志应该用 SVG 还是 PNG？ 你的标志应该保留一个 SVG 源文件，因为它能干净地缩放到从网站图标到户外广告牌的任何尺寸。对于不接受 SVG 的平台和表单，再从这个 SVG 导出 PNG 副本即可。

简单总结#

• 位图（PNG、JPG、WebP）是固定的像素网格：适合照片、截图和扫描件。
• 矢量图（SVG）是一组绘图指令：适合标志、图标、示意图和切割文件。
• 用 SVG 转 PNG 把 SVG 导出为任意尺寸的像素图。用 PNG 转 SVG 或 JPG 转 SVG 把简单图形描摹成矢量图，照片就让它保持照片的样子。
• 更多格式对比请看我们的 文件格式指南，所有图片工具都在 图片工具中心。