打开一个网页，网站加载速度每慢一秒，矢量就有大约7%的网站用户放弃等待。这个数字背后，矢量图片往往是网站最大的拖累。JPG和PNG格式的矢量图片，一张首页大图动辄几百KB甚至几MB，网站而同样一张图换成SVG格式，矢量可能只有几KB。网站这不是矢量魔法，是网站矢量图在网站上的基本优势。

SVG，矢量全称可缩放矢量图形，网站2003年就成了W3C推荐标准。矢量但直到最近几年，网站它才真正在网站开发中普及开来。原因不复杂——以前浏览器支持参差不齐，开发者宁愿用PNG图省事。现在情况变了，所有主流浏览器都原生支持SVG，连IE9都勉强能渲染基础图形。我去年帮一个客户重构企业官网，把导航图标、Logo、背景装饰全部换成SVG，页面整体体积从2.3MB降到680KB。加载时间从4.2秒压缩到1.8秒，跳出率直接降了12个百分点。

矢量图和位图的区别，说穿了就是“记录线条”还是“记录像素”。位图把图像切成无数小方块，每个方块填色，放大就模糊。矢量图记录的是数学公式——一条线从A点到B点，粗细多少，什么颜色。浏览器拿到这些公式，实时画出来。所以SVG图标放大到1000%依然锐利，而PNG早就糊成马赛克了。上周我测试一个电商网站的购物车图标，32×32像素的PNG在视网膜屏幕上显示模糊，换成SVG后，无论屏幕像素密度多高，边缘都像刀切一样干净。

但SVG不是万能药。照片类图像千万别用SVG，一张人像照片转成矢量，要么丢失细节变成色块画，要么文件体积爆炸。SVG适合的是图标、Logo、简单插画、图表、地图路径这些由几何形状构成的图形。我见过有人把产品照片转成SVG，结果文件比原图大3倍，渲染还卡顿。那纯粹是选错了工具。

实际使用中，SVG有三种嵌入方式。直接写进HTML里，用<svg>标签，好处是可以用CSS控制样式、用JavaScript操作图形。第二种用<img>标签引用外部SVG文件，简单但无法用CSS改内部颜色。第三种作为CSS背景图，适合装饰性图案。我习惯把需要交互的图标内联，把纯装饰的扔进CSS。有个细节：内联SVG的代码量不小，一个复杂图标可能几十行，但gzip压缩后往往只剩几百字节，比请求一张PNG还划算。

优化SVG也有讲究。设计软件导出的SVG常带一堆无用代码——编辑器元数据、空组、重复的样式定义。用SVGO工具跑一遍，体积能砍掉40%到60%。我通常还会手动删掉<title>和<desc>标签，除非确实需要无障碍访问。另外记得给SVG设置viewBox属性，这是它自适应缩放的根基。没有viewBox的SVG，在不同尺寸容器里会失控。

浏览器渲染SVG的性能，比很多人想的好。简单图形几乎零开销，复杂路径可能比位图慢一点，但省下的网络传输时间远远抵消了渲染成本。移动端尤其明显——一张20KB的SVG背景图，和一张200KB的PNG背景图，在4G网络下差距就是0.3秒的加载时间。用户感知不到0.3秒，但累积到整个页面，就是流畅和卡顿的分界线。

说到底，网站用矢量图不是赶时髦，是算一笔账。图标、Logo、简单图形，SVG在清晰度、体积、可访问性、可编程性上全面占优。位图留给照片和复杂纹理。分清楚这个界限，网站性能就能上一个台阶。我自己的博客全站图标都是SVG，三年没换过，屏幕从1080p换到4K，图标从来没糊过。这种一劳永逸的事，值得花点时间折腾。