你拍了一张照片。一朵花。阳光下花瓣的纹理清晰可见露珠在叶片上闪闪发光。你把照片放大。放大。再放大。花瓣变成了一堆彩色的方块。露珠变成了一团模糊的色斑。叶片的边缘变成了锯齿状的阶梯。美消失了。你看到的不再是一朵花而是一堆像素——成千上万个微小的彩色方格子像马赛克一样拼在一起。这就是**位图Bitmap**的宿命。它由像素组成。像素是固定的。放大了像素就暴露了。现在让我给你看另一种图像。同样是一朵花。同样的形状同样的颜色。你把它放大。放大。再放大。放大一万倍。花瓣的边缘依然光滑如丝。没有方块。没有模糊。没有锯齿。无论你放多大它都完美无缺。就好像它不是一张图而是一个数学公式——无论你用多高的精度去计算它都能给你精确的答案。事实上它确实是一个数学公式。这就是矢量图形Vector Graphics。两种截然不同的世界观位图和矢量图代表了两种完全不同的描述图像的方式。位图的世界观 一张图像是由无数个彩色小方块组成的。 每个小方块叫做一个像素Pixel。 每个像素有一个固定的颜色。 所有像素排列在一个网格上。 一张1920×1080的照片 2,073,600个像素。 每个像素记录一个颜色值。 就像一幅马赛克画—— 远看是一幅画近看是一堆小方块。 ┌──┬──┬──┬──┬──┬──┬──┬──┐ │ │ │ │██│██│ │ │ │ ├──┼──┼──┼──┼──┼──┼──┼──┤ │ │ │██│██│██│██│ │ │ ├──┼──┼──┼──┼──┼──┼──┼──┤ │ │██│██│ │ │██│██│ │ ├──┼──┼──┼──┼──┼──┼──┼──┤ │ │██│ │ │ │ │██│ │ ├──┼──┼──┼──┼──┼──┼──┼──┤ │ │██│██│██│██│██│██│ │ ├──┼──┼──┼──┼──┼──┼──┼──┤ │ │██│ │ │ │ │██│ │ ├──┼──┼──┼──┼──┼──┼──┼──┤ │ │██│ │ │ │ │██│ │ └──┴──┴──┴──┴──┴──┴──┴──┘ 这是一个用像素画的字母A。 放大了看就是一堆方块。 矢量图的世界观 一张图像是由数学指令组成的。 不记录每个像素的颜色。 而是记录怎么画这张图。 从点(100,200)画一条直线到点(300,200)。 以点(200,300)为圆心半径50画一个圆。 用红色填充这个区域。 就像一份建筑图纸—— 图纸上不画每一块砖 而是写着在这里建一面3米高的墙。 无论你把图纸放大多少倍 3米高的墙还是3米高的墙。 指令不会因为放大而失真。位图记录的是结果——每个像素是什么颜色。矢量图记录的是过程——怎么画出这个图形。这个区别决定了一切。矢量图形的基本元素矢量图形的世界里一切都由几种基本的数学元素构成。点Point最基础的元素。一个坐标。 P (150, 300) 它不占任何面积。 它只是空间中的一个位置。 一个锚点。一个起点。一个参考。 所有更复杂的图形都从点开始。直线Line两个点之间的连线。 起点(100, 200) 终点(400, 500) 数学描述 P(t) 起点 t × (终点 - 起点)其中 t ∈ [0, 1] 当 t 0 时P 起点 当 t 1 时P 终点 当 t 0.5 时P 中点 无论你放大多少倍 这条线都是从起点到终点的完美直线。 因为它不是由像素组成的。 它是由一个方程定义的。 (100,200) \ \ \ \ (400,500)贝塞尔曲线Bézier Curve这是矢量图形的灵魂。 如果只有直线矢量图形就只能画方方正正的东西。 贝塞尔曲线让矢量图形能画出任何曲线—— 圆弧、波浪、花瓣、字母的弧度、人脸的轮廓。 最常用的是三次贝塞尔曲线Cubic Bézier。 它由四个点定义 P0起点 P1第一个控制点 P2第二个控制点 P3终点 P1 • \ • P2 \ / \ / \ / P0 •──╲╱──• P3 曲线 数学公式 B(t) (1-t)³·P0 3(1-t)²t·P1 3(1-t)t²·P2 t³·P3 其中 t ∈ [0, 1] 当 t 从 0 变化到 1 时 B(t) 从 P0 出发 被 P1 和 P2 拉扯着 最终到达 P3。 P1 和 P2 就像两块磁铁 把直线吸成了曲线。 移动 P1 和 P2 的位置 曲线的形状就会改变。 这就是为什么在Illustrator或Figma里 你拖动那些手柄就能改变曲线的弧度—— 你拖动的就是控制点。让我用一个具体的例子来展示贝塞尔曲线的威力画一个字母 S 用位图 需要记录几千个像素的颜色。 放大后变成锯齿。 用矢量 只需要两条三次贝塞尔曲线。 8个点。16个数字。 曲线1S的上半部分 P0 (200, 100) ← 起点 P1 (350, 100) ← 控制点1向右拉 P2 (350, 250) ← 控制点2向右下拉 P3 (200, 250) ← 终点 曲线2S的下半部分 P0 (200, 250) ← 起点接上一条曲线的终点 P1 (50, 250) ← 控制点1向左拉 P2 (50, 400) ← 控制点2向左下拉 P3 (200, 400) ← 终点 16个数字描述了一个完美的S形曲线。 放大一万倍依然光滑。 而同样的S用位图在100×100的画布上 需要记录10000个像素的颜色值。 放大十倍就模糊了。路径Path把多条直线和曲线首尾相连就构成了一条路径。 路径是矢量图形中形状的基本单位。 一个矩形 4条直线组成的闭合路径 一个圆形 4条贝塞尔曲线组成的闭合路径 一个心形 若干条贝塞尔曲线组成的闭合路径 一个字母 若干条直线和曲线组成的闭合路径 一个国家的地图轮廓 成百上千条线段和曲线组成的路径 路径可以是开放的起点和终点不相连 → 一条线、一个弧 路径可以是闭合的起点和终点相连 → 一个形状可以填充颜色填充与描边Fill Stroke路径本身只是一条线。 要让它变成一个有颜色的图形需要两样东西 填充Fill ├── 用颜色填满路径围成的区域 ├── 可以是纯色、渐变色、图案 └── 只对闭合路径有效 描边Stroke ├── 沿着路径画一条有宽度的线 ├── 可以设置线宽、颜色、虚线样式 ├── 可以设置端点样式圆头、方头、平头 └── 可以设置拐角样式圆角、尖角、斜角 一个红色圆形的矢量描述 路径以(200,200)为圆心半径100的圆 填充红色 #FF0000 描边黑色 #000000宽度2像素 就这么简单。 三行指令描述了一个完美的红色圆形。 无论放大多少倍圆都是圆的红都是红的。矢量图形 vs 位图一场全面的对比┌────────────────┬──────────────────┬──────────────────┐ │ 特性 │ 位图 │ 矢量图 │ ├────────────────┼──────────────────┼──────────────────┤ │ 基本单位 │ 像素方块 │ 数学指令公式 │ ├────────────────┼──────────────────┼──────────────────┤ │ 放大效果 │ 模糊、锯齿 │ 永远清晰 │ ├────────────────┼──────────────────┼──────────────────┤ │ 缩小效果 │ 可能丢失细节 │ 永远精确 │ ├────────────────┼──────────────────┼──────────────────┤ │ 文件大小 │ 与分辨率成正比 │ 与复杂度成正比 │ │ │ 分辨率越高越大 │ 形状越多越大 │ ├────────────────┼──────────────────┼──────────────────┤ │ 适合表现 │ 照片、复杂纹理 │ 图标、文字、UI │ │ │ 自然场景 │ 插画、Logo、图表 │ ├────────────────┼──────────────────┼──────────────────┤ │ 编辑灵活性 │ 修改单个像素 │ 修改形状和属性 │ │ │ 难以修改形状 │ 随时调整 │ ├────────────────┼──────────────────┼──────────────────┤ │ 渲染速度 │ 直接显示像素 │ 需要计算后显示 │ │ │ 非常快 │ 相对较慢 │ ├────────────────┼──────────────────┼──────────────────┤ │ 常见格式 │ PNG, JPG, BMP │ SVG, AI, EPS, PDF │ │ │ GIF, TIFF, WebP │ SWF, XAML │ ├────────────────┼──────────────────┼──────────────────┤ │ 常见工具 │ Photoshop │ Illustrator │ │ │ GIMP, 画图 │ Figma, Inkscape │ │ │ Lightroom │ Sketch, Affinity │ └────────────────┴──────────────────┴──────────────────┘让我用一个更直观的比喻位图就像一幅油画。 画家用画笔在画布上一笔一笔地涂颜色。 每一笔都是固定的。 画完之后你不能说把这朵花往左移一点—— 花已经和背景融为一体了。 你只能把那块区域涂掉重画。 如果你想把这幅画印在一面墙上放大 你会看到粗糙的笔触和颜料的颗粒。 因为画的细节是固定的放大不会增加细节。 矢量图就像一份乐谱。 作曲家写下音符、节拍、力度。 乐谱本身不是音乐——它是音乐的指令。 一个小型乐团可以演奏它低分辨率渲染。 一个交响乐团也可以演奏它高分辨率渲染。 在体育场用巨型音响播放也可以巨幅打印。 无论用什么规模演奏乐谱都是同一份。 音乐的质量不会因为场地大小而改变。 而且你可以随时修改乐谱—— 把第三小节的音符从C改成D。 不需要重新录制整首曲子。矢量图形是怎么变成屏幕上的像素的这里有一个有趣的悖论——你的屏幕是由像素组成的。无论矢量图形多么优雅、多么数学化最终它必须变成像素才能显示在屏幕上。那矢量图形的永远清晰是怎么实现的答案是每次显示时根据当前的分辨率和缩放级别重新计算像素。矢量图形的显示过程光栅化 / Rasterization 第一步读取矢量指令 画一个圆圆心(200,200)半径100红色填充 第二步根据当前显示条件计算像素 当前屏幕分辨率1920×1080 当前缩放级别100% GPU/CPU遍历圆覆盖的每一个像素位置 判断这个像素是否在圆内 对于像素(x, y) 距离 sqrt((x-200)² (y-200)²) 如果 距离 100 → 这个像素在圆内 → 涂红色 如果 距离 100 → 这个像素在圆外 → 不涂 如果 距离 ≈ 100 → 这个像素在边缘 → 抗锯齿处理 第三步输出像素到屏幕 如果你放大到200% 同样的指令圆心(200,200)半径100 但现在每个单位对应更多的像素。 GPU/CPU重新计算 用更多的像素来表示同一个圆。 圆的边缘有更多的像素来描绘。 所以边缘更加光滑。 这就是永远清晰的秘密—— 不是图像本身有无限的细节 而是每次显示时都重新计算 用当前可用的像素数量来最优地表现图形。 ┌─────────────────────────────────────────┐ │ │ │ 100% 缩放 │ │ │ │ ████ │ │ ████████ │ │ ██████████ │ │ ██████████ │ │ ████████ │ │ ████ │ │ │ │ 像素不多但圆形基本成立。 │ │ │ │ 400% 缩放 │ │ │ │ ████████ │ │ ██████████████ │ │ ██████████████████ │ │ ████████████████████ │ │ ██████████████████████ │ │ ██████████████████████ │ │ ██████████████████████ │ │ ██████████████████████ │ │ ████████████████████ │ │ ██████████████████ │ │ ██████████████ │ │ ████████ │ │ │ │ 更多像素圆形更加光滑。 │ │ 同一个数学公式不同的精度。 │ │ │ └─────────────────────────────────────────┘位图放大时是在拉伸已有的像素——像素变大变模糊。矢量图放大时是在重新计算像素——像素变多变清晰。这就是本质区别。矢量图形在现实世界中的应用矢量图形无处不在。你每天都在使用它只是你可能没有意识到。字体你现在正在阅读的每一个文字都是矢量图形。 字母 A 的矢量描述 外轮廓一个三角形状的路径 ├── 移动到 (250, 0) ├── 直线到 (500, 700) ├── 直线到 (450, 700) ├── 直线到 (375, 500) ├── 直线到 (125, 500) ├── 直线到 (50, 700) ├── 直线到 (0, 700) └── 闭合路径 内轮廓中间的三角形孔洞 ├── 移动到 (250, 100) ├── 直线到 (150, 450) ├── 直线到 (350, 450) └── 闭合路径 这就是为什么你可以把网页文字放大到任意大小 它都是清晰的——因为文字是矢量的。 浏览器在每次渲染时 根据当前的字号重新计算像素。 12号字用少量像素渲染小而清晰。 72号字用大量像素渲染大而清晰。 720号字用更多像素渲染巨大而依然清晰。 同一份字体文件。不同的大小。永远清晰。 常见的矢量字体格式 ├── TrueType (.ttf)用二次贝塞尔曲线描述轮廓 ├── OpenType (.otf)用三次贝塞尔曲线描述轮廓 └── WOFF (.woff)网页专用的压缩字体格式图标和Logo公司的Logo几乎都是矢量图形。 为什么 因为Logo需要出现在各种尺寸上 ├── 名片上2厘米宽 ├── 网页上200像素宽 ├── 海报上2米宽 ├── 广告牌上20米宽 └── 体育场大屏幕上可能更大 如果Logo是位图你需要为每种尺寸准备一个版本。 而且大尺寸的版本文件会非常大。 如果Logo是矢量图你只需要一个文件。 打印名片时渲染成300dpi的小图。 打印广告牌时渲染成适当分辨率的大图。 同一个文件。任意尺寸。永远锐利。 手机上的图标也是类似的道理 ├── 普通屏幕1x 分辨率 ├── Retina屏幕2x 分辨率 ├── Super Retina3x 分辨率 └── 未来可能有 4x、5x…… 如果用位图每种分辨率都需要一套图标。 如果用矢量一套图标适配所有分辨率。 这就是为什么现代UI设计越来越多地使用矢量图标 SVG格式、图标字体等。地图你在手机上打开地图应用。 缩小看到整个国家的轮廓。 放大看到城市的街道。 再放大看到每栋建筑的形状。 每个缩放级别地图都是清晰的。 道路的线条是光滑的。 文字标注是锐利的。 建筑的轮廓是精确的。 这是因为地图的大部分元素都是矢量的 ├── 道路矢量路径 描边 ├── 河流矢量路径 填充 ├── 建筑轮廓矢量多边形 ├── 行政区划矢量多边形 ├── 文字标注矢量字体 └── 图标餐厅、加油站矢量图标 只有卫星影像是位图的—— 因为真实的地面照片无法用数学公式描述。游戏中的UI游戏的UI界面越来越多地使用矢量图形 血条一个矩形路径宽度随血量变化 小地图矢量路径绘制的地形轮廓 技能图标矢量绘制的符号 伤害数字矢量字体渲染的数字 准星矢量绘制的十字线 为什么游戏UI要用矢量 因为游戏需要支持多种分辨率 ├── 720p手机 ├── 1080p普通显示器 ├── 1440p高端显示器 ├── 4K旗舰显示器 ├── 8K未来 └── 还有各种奇怪的分辨率超宽屏、竖屏…… 如果UI是位图每种分辨率都需要一套资源。 如果UI是矢量一套资源适配所有分辨率。 Unity的UI Toolkit和TextMeshPro 都大量使用了矢量渲染技术。SVG矢量图形的通用语言在众多矢量格式中SVGScalable Vector Graphics是最通用、最开放的一种。SVG是一种基于XML的文本格式。你可以用记事本打开它直接阅读里面的绘图指令。一个SVG文件的内容画一个笑脸 ?xml version1.0 encodingUTF-8? svg width200 height200 xmlnshttp://www.w3.org/2000/svg !-- 脸一个黄色的圆 -- circle cx100 cy100 r90 fill#FFD700 strokeblack stroke-width3/ !-- 左眼一个黑色的圆 -- circle cx65 cy75 r12 fillblack/ !-- 右眼一个黑色的圆 -- circle cx135 cy75 r12 fillblack/ !-- 嘴巴一条弧线 -- path dM 55 130 Q 100 170 145 130 fillnone strokeblack stroke-width4 stroke-linecapround/ /svg 让我们逐行翻译 circle cx100 cy100 r90 fill#FFD700 → 在坐标(100,100)的位置画一个半径90的圆填充金黄色。 circle cx65 cy75 r12 fillblack → 在坐标(65,75)的位置画一个半径12的圆填充黑色。 → 这是左眼。 circle cx135 cy75 r12 fillblack → 在坐标(135,75)的位置画一个半径12的圆填充黑色。 → 这是右眼。 path dM 55 130 Q 100 170 145 130 → 移动到(55,130)画一条二次贝塞尔曲线 控制点(100,170)终点(145,130)。 → 这是嘴巴的微笑弧线。 整个笑脸用不到20行文本描述。 文件大小不到500字节。 同样的笑脸如果用200×200的PNG位图 文件大小约5-10KB。 如果用2000×2000的高清PNG 文件大小约50-100KB。 矢量版本永远是500字节。 无论你要渲染成多大的图像。SVG的美妙之处在于它是人类可读的。你可以打开一个SVG文件直接看到这里有一个圆那里有一条线。你甚至可以用文本编辑器手动修改它——把圆的半径从90改成120保存刷新浏览器圆就变大了。试试用记事本修改一张JPG照片你只会看到一堆乱码。这就是指令和数据的区别。矢量图形的阿喀琉斯之踵矢量图形如此优雅如此强大。但它有一个致命的弱点。它不擅长表现复杂的自然图像。想象你要用矢量图形描述一张照片—— 一片秋天的森林。 成千上万片树叶每片都有不同的形状。 每片叶子上有复杂的纹理和色彩渐变。 阳光透过树冠在地面上投下斑驳的光影。 落叶铺满地面层层叠叠。 远处的山峦笼罩在薄雾中。 用矢量描述这个场景 每片叶子 一条复杂的贝塞尔曲线路径 每片叶子的颜色 一个多点渐变填充 光影效果 无数个半透明的渐变形状叠加 薄雾效果 大面积的半透明渐变 一片叶子可能需要20个控制点。 一棵树有几千片叶子。 一片森林有几百棵树。 总共需要数百万个控制点数百万条路径。 文件大小可能比同等质量的位图还大。 渲染速度可能比位图慢几十倍。 而且即使你用了数百万个控制点 结果看起来还是不像照片。 因为自然界的细节是无穷的、随机的、混沌的。 数学公式擅长描述规则的形状 不擅长描述混沌的纹理。 这就是为什么 照片 → 用位图JPG、PNG Logo → 用矢量SVG、AI 自然场景 → 用位图 几何图形 → 用矢量 人脸照片 → 用位图 人脸插画 → 用矢量 油画质感 → 用位图 扁平设计 → 用矢量矢量图形的复杂度取决于形状的复杂度而不是图像的尺寸。一个简单的圆无论多大都只需要三个数字圆心x、圆心y、半径。但一片树叶的精确轮廓可能需要几十个控制点。一整棵树可能需要几万个。一片森林可能需要几百万个。当形状的复杂度超过一定程度时矢量图形就失去了它的优势。这时候位图反而更高效——不管场景多复杂一张1920×1080的照片永远是两百万个像素不多不少。矢量图形的渲染挑战把矢量图形变成屏幕上的像素这个过程叫做光栅化Rasterization。听起来简单实际上充满了挑战。挑战一曲线的抗锯齿屏幕是由方形像素组成的。 曲线是光滑的。 用方形的像素去表现光滑的曲线 天然就会产生锯齿。 理想的圆弧 ╭───╮ ╱ ╲ │ │ 实际的像素渲染无抗锯齿 ██ █ █ █ █ █ █ 边缘是阶梯状的。这就是锯齿。 解决方案抗锯齿Anti-aliasing 在边缘的像素上不是简单地涂或不涂 而是根据像素被曲线覆盖的比例来混合颜色。 一个像素被曲线覆盖了80% → 80%的前景色 20%的背景色 一个像素被曲线覆盖了30% → 30%的前景色 70%的背景色 结果边缘出现了半透明的过渡色 视觉上看起来更加光滑。 像素渲染有抗锯齿 ▓█▓ █░░░█ █░ ░█ █░ ░█ ░ 半透明像素过渡色 远看锯齿消失了曲线看起来是光滑的。 但计算每个像素的覆盖比例是很耗时的。 这是矢量渲染比位图渲染慢的主要原因之一。挑战二复杂路径的填充判断一个像素是否在一个复杂路径的内部 并不总是显而易见的。 简单的情况——圆形 距离 半径 → 内部 → 填充 距离 半径 → 外部 → 不填充 简单。 复杂的情况——自相交的路径 ╱╲ ╱ ╲ ╱ ╱╲ ╲ ╱ ╱ ╲ ╲ ╱ ╱ ╲ ╲ ╲ ╲ ╱ ╱ ╲ ╲╱ ╱ ╲ ╱ ╲╱ 这是一个8字形的路径。 中间交叉的部分算内部还是外部 两种规则 奇偶规则Even-Odd Rule ├── 从像素向任意方向画一条射线 ├── 数射线穿过路径边界的次数 ├── 奇数次 → 内部 → 填充 └── 偶数次 → 外部 → 不填充 非零缠绕规则Non-Zero Winding Rule ├── 从像素向任意方向画一条射线 ├── 路径从左到右穿过射线 → 1 ├── 路径从右到左穿过射线 → -1 ├── 总和 ≠ 0 → 内部 → 填充 └── 总和 0 → 外部 → 不填充 两种规则对同一个路径可能给出不同的结果。 SVG默认使用非零缠绕规则。 这些计算对于每一个像素都要做一次。 路径越复杂计算越慢。挑战三大量路径的性能一个复杂的矢量插画可能包含 几千条路径 每条路径有几十个控制点 每条路径有填充和描边 路径之间有叠加和混合 渲染这样一幅插画 对于屏幕上的每一个像素比如200万个像素 都需要检查它被哪些路径覆盖 然后按照从后到前的顺序混合颜色。 这是一个巨大的计算量。 现代的矢量渲染引擎使用了很多优化技术 ├── 边界框剔除Bounding Box Culling │ 如果一个路径的边界框不包含当前像素 │ 直接跳过不需要精确计算。 │ ├── 分块渲染Tiled Rendering │ 把屏幕分成小块每块只处理覆盖它的路径。 │ ├── GPU加速 │ 利用GPU的并行计算能力来加速光栅化。 │ 每个像素的计算可以独立进行天然适合并行。 │ └── 缓存Caching 如果矢量图形没有变化 把渲染结果缓存为位图下次直接使用。 只有当图形变化时才重新渲染。 这就是为什么浏览器渲染SVG时 第一次可能稍慢之后就很快了—— 因为结果被缓存了。矢量图形的未来矢量图形正在变得越来越重要。原因很简单——屏幕的分辨率在不断提高。屏幕分辨率的演变 2005年1024×768约80万像素 2010年1920×1080约200万像素 2015年2560×1440约370万像素 2018年3840×2160 / 4K约830万像素 2020年7680×4320 / 8K约3300万像素 未来 分辨率每翻一倍位图的文件大小就翻四倍。 宽度×2高度×2像素数×4 一个图标 ├── 1x32×32 1,024 像素 ├── 2x64×64 4,096 像素 ├── 3x96×96 9,216 像素 ├── 4x128×128 16,384 像素 └── 8x256×256 65,536 像素 你需要准备5套位图资源来适配不同的屏幕。 或者你只需要一个矢量文件。 随着屏幕分辨率继续提高 位图的分辨率军备竞赛会越来越疯狂。 而矢量图形始终只需要一份文件。 这就是为什么 ├── 苹果的SF Symbols是矢量的 ├── Google的Material Icons是矢量的 ├── 微软的Fluent Icons是矢量的 ├── 网页图标越来越多地使用SVG ├── 移动应用的UI越来越多地使用矢量 └── 游戏的UI也在向矢量化发展同时GPU对矢量图形的加速能力也在不断提高GPU加速矢量渲染的发展 过去矢量图形主要由CPU渲染速度较慢 现在 ├── GPU可以直接渲染贝塞尔曲线 ├── 硬件加速的路径渲染如NV_path_rendering ├── 计算着色器Compute Shader加速填充判断 └── 专用的矢量渲染引擎如Pathfinder、Vello 未来 ├── GPU可能会内置矢量渲染单元 ├── 矢量渲染的速度可能接近位图显示的速度 └── 矢量和位图的性能差距会越来越小一个统一的视角让我们最后用一个统一的视角来看待矢量图形和位图。它们不是对立的。它们是互补的。 位图擅长 ├── 记录现实世界的复杂细节 ├── 照片、纹理、自然场景 └── 这个世界看起来是什么样的 矢量擅长 ├── 描述人类设计的精确形状 ├── 文字、图标、UI、Logo、插画 └── 这个设计应该是什么样的 在实际应用中两者经常结合使用 一个网页 ├── 背景照片位图JPG ├── Logo矢量SVG ├── 文字矢量字体 ├── 图标矢量SVG或图标字体 ├── 按钮矢量CSS绘制的圆角矩形 └── 用户头像位图JPG/PNG 一个游戏 ├── 3D模型的纹理位图PNG/DDS ├── UI界面矢量 位图混合 ├── 文字矢量字体 ├── 小地图矢量路径 ├── 粒子特效的贴图位图 └── 技能图标位图或矢量 一个手机应用 ├── 应用图标矢量适配多种分辨率 ├── 界面元素矢量按钮、输入框、开关 ├── 用户上传的照片位图 ├── 表情符号矢量或位图 └── 图表矢量折线图、饼图、柱状图位图捕捉世界的样子。矢量描述设计的意图。一个记录是什么。一个表达该怎样。一个是照片。一个是蓝图。一个随着放大而模糊因为现实的细节是有限的。一个随着放大而清晰因为数学的精度是无限的。当你下次在手机上捏合手指放大一段文字看着每个字母在任何大小下都锐利清晰时——那不是魔法。那是几条贝塞尔曲线在你的GPU上以你当前需要的精度被重新计算了一遍。几个控制点。一条数学公式。无限的清晰度。这就是矢量图形。不记录答案只记录方法。不存储像素只存储指令。不描绘图像只描述图像应该是什么样子。然后在每一次需要显示的时刻现场计算出完美的结果。每一次都是新鲜的。每一次都是精确的。每一次都是为当前的屏幕、当前的尺寸、当前的分辨率量身定制的。永远不会模糊。因为它从来就不是一张固定的图。它是一个永恒的公式。