给客户做一个站点的首页标识,他发来一张 240×240 的 PNG,说这是官方 logo,放大用没问题。我把它转成 SVG 交付,结果 hero 区把它撑到 1200 像素宽,边缘一圈锯齿全冒出来,客户问我:转成 SVG 不是能随便放大吗?
后来我把这个问题的答案收敛成一句话:能不能放大,取决于 SVG 文件里面装的是什么,而不是取决于扩展名。
位图和矢量的差别是记录方式,不是清晰度
位图(PNG、JPG、WebP、GIF、BMP 都是)记录的是每个位置的颜色值。它的尺寸就是天花板:512×512 的图放到 5120×5120,等于每个原始像素被摊成 10×10 的方块,中间的颜色由插值算出来,边缘于是发虚或者起台阶。
矢量图记录的是几何描述——形状、路径、锚点、填充色。它没有"原生尺寸"这一说,渲染时按当前视图大小现算,1200 像素宽和 12000 像素宽用的是同一份数据。
所以"PNG 转 SVG"这句话底下藏着两条完全不同的路。一条是封装:把位图原样嵌进 SVG 文件,外面套一层矢量容器。另一条是描摹:真的去生成路径。封装的放大表现跟原 PNG 一样,只有描摹才拿到矢量的红利。
| 做法 | SVG 里存的内容 | 放大 5 倍后的边缘 | 体积 | 能不能单独改某个颜色 |
|---|---|---|---|---|
| 封装(内嵌位图) | 原图的像素数据,编码后写进 image 元素 | 仍是插值结果,细节不会变多 | 比原 PNG 大约多三分之一 | 不能,整张图是一个位图 |
| 描摹(转路径) | 若干 path 与填充色 | 边缘干净,轮廓按几何重算 | 取决于路径与节点数量 | 能,每个色块单独可选 |
| 手工重绘 | 按需画的 path | 干净 | 通常最小 | 完全可控 |
表格第三行那个"多三分之一"是能算的:内嵌的数据要经过 Base64 这类编码,字符数约为原始字节的 4/3,所以文件比原图大出三成上下。转换本身不损失画质,代价是体积。
描摹这条路的上限由三个参数决定
我试过不少描摹工具,旋钮基本是这三类,理解它们才不会对结果抱错误期待。
- 阈值:把灰度切成"是黑"和"是白"两类的分界线。阈值往上或往下挪一点,剪影的粗细就变了。二值描摹只可能产出纯色形状,一张有层次的照片在这里必然丢信息。
- 色阶数:允许多少种颜色参与生成。给到 4 色、8 色、16 色,贴合度依次上升,但生成的路径数量也依次上升,最后可能得到几千个色块碎片,反而比原图更难编辑。
- 节点与平滑:控制轮廓跟随原图边缘的紧不紧。跟随得紧,锯齿状的边缘噪点也会被忠实地描出来;放得松,形状圆滑但细节糊掉。
把这三个参数当成"画质调节"来看,是大部分失望的来源。它们调节的是拟合策略,不能凭空补出原图没有的细节。适合描摹的图有共同特点:色块少、边界清楚、没有连续渐变——纯色 logo、文字、印章、剪影、线稿、像素风图形。不适合的也很明确:人像照片、风景照、带阴影渐变的写实插画、毛发和烟雾这类高频纹理。
那什么时候我还是会把 PNG 转成 SVG
封装模式并非没用,我自己在这几种情况下就明确要它:
- SVG 项目里要嵌位图素材,格式必须统一成 SVG;这时我需要的是容器,不是路径。
- 要一个不损失原始画质的容器版本,缩放交给视图尺寸去管,位图本身保持原样,转换过程不做二次编码压缩。
- 要把图片资源以 SVG 形式交给网页或矢量编辑器,尺寸和布局由下游决定。
这几种情况下我用 图片转SVG,支持 PNG、JPG、WebP 这类常见格式,能批量处理。对我判断"放大到底会不会糊"最关键的反倒是它的另一个功能:生成之后可以直接查看 SVG 源码。源码里看到的是 <image> 加一串编码数据,还是 <path> 加坐标,一眼就能定结论——不用等到上线后在 hero 图上看到锯齿。
如果需求其实是"要一张更大的位图",那方向完全不同,该做的是像素尺寸调整,我用 图片尺寸调整,它同样不会补出细节,但至少输出的是明确的位图,不用解释为什么容器变了而边缘没变。已经拿到 SVG 但要交回位图格式时,我用 SVG转换格式 把方向反过来走。
那次交付最后怎么收场
客户的 logo 是三个字加一个圆环,总共 3 个填充色。我没有在描摹参数上耗时间,照着原图手工画了 path,不到 100 个节点,花了四十分钟。放大到 hero 尺寸边缘干净,颜色能单独调,文件比那张 PNG 还小。
如果它是那种带渐变和阴影的写实图标,我不会有这个选择——那时候正确的答复是"请给源文件(AI、SVG、或者至少一张高分辨率 PNG)",而不是指望任何转换参数。
Q:转成 SVG 之后放大还是糊,是不是转换失败了?
不一定是失败。打开 SVG 源码看内容就能判定:装的是内嵌位图就是封装模式,放大表现自然和原图一致;只有真的生成了路径才谈得上矢量放大。
Q:照片能矢量化吗?
能生成路径,但通常不像你想要的结果。照片的渐变会让描摹产出海量碎片色块,文件巨大且无法编辑。真要放大照片,方向是提高分辨率或重拍,不是换格式。
Q:阈值调高一点是不是更精细?
阈值改变的是保留哪一部分,不是精度。剪影类图形上它是有效旋钮;有灰层次的图上,往任何方向调都会丢掉另一边的层次。
Q:转成 SVG 体积会不会更小?
封装模式一般更大,因为编码开销约是三分之一。少色图形被描摹成路径时可能显著变小,照片类则往往变大。
Q:印刷要用,转成 SVG 就够了吗?
不够,如果里面是位图,印刷分辨率仍然按原始像素算。我给的判断是:印刷文件要求路径或者 300dpi 以上的位图,两者都不满足就得重做。
客户的疑问到这就清楚了:SVG 不是"高清"的同义词,它是一种容器和描述方式。我后来的流程里多了一步硬性检查——交付前打开源码确认里面是 path 还是 image,并据此告诉对方这张图能放大到什么程度。扩展名会骗人,源码不会。