拿出你的手机，随便在聊天记录里找一个表情包，或者在相册里挑一张照片。把两个手指按在屏幕上，慢慢往外拉，拼命放大，再放大。放大到极限的时候，你会发现原本圆润光滑的小猫小狗，边缘开始散落成一格一格模糊粗糙的彩色小方块。 这就是大家平时常说的马赛克。 在我们的日常生活中，绝大多数图片都在用这种方式记录画面。如果把这个过程拆开来看，它跟我们小时候见过的十字绣、或者用乐高像素积木拼图没什么区别。一张布上划分出成千上万个极小的方格，每个格子里填上一抹固定的颜色。只要格子够密，离远看就是一幅漂亮的图画；但只要走近了、或者强行把它拉伸放大，每个小方格的毛边就会无所遁形。这种靠一个个像素点拼出来的图片，就是我们天天打交道的位图，常见的后缀有 JPG 和 PNG。 位图有一个绕不过去的物理缺陷：它里面的方块数量在出厂那一刻就定死了。一张图片原本只有两百个小方块，你非要在超大的高清屏幕上把它拉伸十倍，屏幕只能硬着头皮把每一个原本的小方块放大成大方块，画面看起来自然就全是粗糙的锯齿。 但是，只要回想一下我们在中学数学课上的经历，世界上其实还有另一种完全不同的画图方式。 老师在黑板上画一个圆，他绝对不会拿着粉笔在黑板上点几万个粉笔点。他会从讲台下拿出一把大圆规，铁针扎在黑板正中间，另一只脚拉开十厘米，手腕转一圈，一条完美光滑的圆就出来了。这时候，不管你坐在教室的第一排贴着看，还是把这套规矩放到两层楼高的户外巨型广告牌上，只要圆心在中间、半径是十厘米这条规则不变，画出来的圆永远没有任何锯齿，边缘永远光滑如初。 这种依靠数学规则记录图形的技术，就是大家常说的矢量图，也就是 SVG。 它的英文全称叫 Scalable Vector Graphics，翻译过来就是可缩放矢量图形。它不存储任何塑料方块颗粒，它记录的是那套直尺和圆规的操作口诀。很多人以为矢量图是什么深奥复杂的计算机文件，但如果把它底层扒开来看，它其实就是一份写给电脑看的画画说明书。 这就像你闭着眼睛给一个看不见画面的朋友打电话，教他画画。你绝对不会在电话里告诉他第一排第五百个点是粉色，你会跟他说：在纸的正中间画一个半径三厘米的圆当做脸，在左边画一个小圆当眼睛，在右边画一个小圆当另一只眼睛，在下面画一条弯弯的弧线当嘴巴。 你的朋友听懂了步骤，拿起笔当场在纸上画出了一个笑脸。 平时你用的手机浏览器、电脑浏览器，其实就是那个手里握着画笔的朋友。SVG 文件里装的就是这套大白话般的画画口诀，上面写着在什么位置画一个多大的圆、在什么地方拉一条多粗的线、图形肚子里填什么颜色。浏览器收到这份说明书，就会在屏幕上现场调动芯片，根据当前的屏幕大小重新把线条绘制一遍。这就解释了为什么它永远放大不糊：既然每次都是拿着公式当场现画，屏幕给它多大空间，它就能发挥出多高的清晰度，放大一万倍也像刀削一样锋利。 既然图形完全是由文字指令现画出来的，它就带来了一个普通图片根本做不到的妙处：它在屏幕上不是一张印死了的贴纸，而是一组活生生的零件。 以前软件里用普通图片做图标，就像在手机壳上贴了一张印好的小狗贴纸。如果你哪天看腻了，想把小狗脖子上的项圈从黄色换成绿色，你没有任何办法，只能把贴纸撕掉，重新买一张新的贴上去。但如果图标是用几何口诀画出来的，整个图形就是一个个独立的零件。软件可以在后台随时给这些零件下命令：手指按上去的时候，把小圆的颜色从灰色换成宝蓝；松开的时候，让这个圆在零点几秒内微微放大一圈。不需要重新下载新图片，图形就自然而然地有了生命力。 很多人初次了解矢量图时，还会好奇一个问题：智能手表的屏幕只有指甲盖那么大，客厅的电视屏幕有几十寸那么长，同一份画画说明书怎么能做到在所有设备上都完美适应呢？ 这里藏着一个像相机取景框一样的巧妙设计。 在矢量图的逻辑里，底层的画纸在理论上是无限宽广的，你可以在上面随心所欲画一艘巨大的轮船。但这艘轮船要展示在不同的屏幕上，就需要借助于一个虚拟的取景框。这就好比你手里端着一台单反相机，镜头可以调整距离，把整艘轮船稳稳当当地框进取景范围里。只要把这个取景框定好，无论后面连接的是一块小手表，还是一台巨大的液晶电视，相机框住的内容都会等比例完整投射在屏幕上。图形里的每一个点和每一条线，从此摆脱了现实中具体毫米或像素的束缚，变成了纯粹的比例。 更神奇的是，这种图形还能在网页上玩出很多魔术。 平时在一些科技品牌的官方网站上，经常会看到让人眼前一亮的动效：页面一打开，并没有播放沉重的视频，但屏幕上的产品线稿或者艺术签名，却像有一支无形的钢笔顺着纸面在飞速游走，一笔一画现场生长出来。 这套看似神奇的动效，背后依靠的只是一个极度朴素的物理障眼法，原理就像拉卷尺。 在画线条时，说明书里可以把一条实线打散成带有间隔的虚线，还可以控制整条虚线沿着轨道向前或者向后滑动。工程师先把整幅线稿设置成一段很长的实线、后面连着一段很长的空白。在动效开始前，就像把卷尺往回拉一样，把那段实线顺着轨道硬生生往后拖拽，彻底拖出了屏幕的取景范围。这时候停留在屏幕视野里的，正好是一整段空空如也的空白，画面上看起来什么都没有。 随后，工程师按下播放键，让卷尺用短短两秒钟的时间匀速滑回原位。原本藏在屏幕外面的实线顺着弯曲的轮廓一点点溜回镜头里，在人的眼睛看来，就像是一支神奇的钢笔正顺着轮廓现场画出了整幅图形。 聊到这里，很自然就会产生最后一个疑问：既然这种格式永远不会模糊，体积又小，还能做各种生动的动效，那为什么我们平时用手机拍的风景照、自拍照，依然还是传统的位图格式，而不用它呢？ 答案其实藏在自然界的光影里。 大自然的光影太丰富也太微妙了。一片傍晚的晚霞，天空中从绯红过渡到金黄，中间包含着几百万种极其细腻柔和的色彩变化。如果非要用圆规、直尺和几何多边形去一条一条描绘天空中每一缕云彩的明暗渐变，这份说明书可能得写上几万页、包含几十亿条数学公式。不仅写不出来，电脑芯片在读取计算时也会瞬间卡死。 所以在数字的世界里，图像技术找到了各自最舒适的领地：面对真实世界里复杂、不规则、光影渐变深邃的生活照片，老老实实交给马赛克方块去细腻拼贴；面对人类设计出来的规则图案、产品图标、商标和交互动效，放心地交给用文字写成的几何说明书。 看懂了这层物理逻辑，下次在屏幕上看到那些无论怎么放大都依然锐利的小图标时，你就能明白，那不是一张被动印在上面的静止画面，而是一幅随时等待浏览器当场挥毫作画的数字蓝图。