AI 生成任务

矢量化:把位图转成 SVG

又称 位图转矢量, 图片转 SVG, image to svg, vectorization, 描摹

矢量化是把像素图像转成由数学路径描述的形状,于是结果可以放大到任意尺寸而不发虚。图片转 SVG 必须判断边缘在哪、以及用多少条曲线能描述它们,这也解释了为什么它在 logo 和平面图形上很成功、在照片上很吃力。

这次转换在判断什么

位图是一张测量值的网格;矢量图是一串指令:从这里开始、用这个控制点弯到那里、把围起来的区域填上这个颜色。前一种描述里没有任何东西告诉你一个形状在哪儿结束、另一个在哪儿开始,所以任何描摹器都必须自己做这个判断,而这个判断就是全部产品。

两个决定占主导。第一是分割:哪些像素属于同一个区域。第二是简化:最少用多少段曲线能跟住这个区域的边界而不明显偏离。简化压得太狠,尖角会变圆、小特征会消失;完全不压,就得到每个像素簇一条路径 —— 技术上复现了图像,作为图形素材毫无用处。

这组张力解释了它全部的成败画像。硬边界的平面图形让两个决定都变得不费脑子;照片让两个决定都无解,因为渐变不存在正确的分割方式,颗粒也不存在一小组能描述它的曲线。

怎么准备一张好描的图

大多数糟糕的转换,是在描摹器跑之前解决的,不是靠调它的参数。

  • 减到少量平涂色。 主动色调分离到最终图形应有的颜色数,描摹之前先看结果。
  • 拿到硬边。 抗锯齿的边界会造出一条细的中间色带,而它会变成自己的一条路径。用硬边渲染或导出,能一次消掉一整类瑕疵。
  • 去掉特效。 投影、发光、渐变和纹理,描出来要么是垃圾几何,要么是几百个几乎相同的形状。
  • 在高分辨率上做。 边界上像素越多,曲线拟合越好,尽管输出本身没有分辨率。
  • 在干净背景上描。 杂乱背景把分割难度翻倍而毫无收益,反正你也会丢掉它。

如果要处理的只是小截图或者压缩过的 JPEG,先放大并清理再描。压缩瑕疵会被当成真实几何描进去,而描摹器分不清 JPEG 振铃和一条有意为之的边。

怎么判断输出好不好

按这个顺序看三样东西,别管它在你当前视图尺寸下的样子。

先看路径数量。 这是判断描摹器有没有理解这张图最快的代理指标。几百条路径的 logo 是被结构性地描出来的;同一个 logo 五千条,是被当成噪点描的。

然后放大看尖角。 简化误差总是最先在两条线成角相接的地方显现,因为曲线拟合会把它抹圆。文字和锐利的几何标记是最不容错的情形。

最后改一个形状的颜色。 这才是文件能不能用的真实测试,因为它会暴露这些形状是不是你以为的那些形状。如果改一处填充变成了一块拼布,说明区域是沿着看不见的边界被切开的,这个文件会和你之后每一次编辑作对。

描摹和直接生成矢量

拿到可缩放文件有两条路,各适合不同处境。描摹从必须被保留的成品出发:一个现有 logo、一张扫描的手稿、一张你已经批过的画面。它输出的几何是「碰巧近似这些像素」的东西,很少是设计师本来会那样画的。

直接生成矢量(用输出 SVG 而不是像素的模型)给你的路径结构本来就是当结构设计的,通常有合理的分组和一小组颜色,编辑和改色都容易得多,只要「和原稿一模一样」不重要,它就是更好的选择。实用规则:原稿神圣就描摹,只有想法重要就生成。而两条路都一样吃「输入纪律」这一套 —— 一开始就要求平涂色和硬边。

这个效果的提示词

一条能稳定出效果的起点。主体和场景可以换,技术性的那几句留着。

Flat vector logo of a mountain range inside a circle, three solid colours only, hard clean edges, no gradients, no texture, no drop shadow, centred on a plain white background

试一下:矢量化

打开生成器,参数已经预填好。

常见问题

矢量化和放大(upscaling)有什么区别?
放大让图像仍然是一张像素网格,只是凭空造出更多像素,所以它即使看起来锐利也仍然有分辨率。矢量化把网格整个扔掉,换成曲线,而曲线根本没有分辨率。放大过的 logo 终究会发虚,矢量的在任何尺寸下都完全一致。
照片为什么矢量化效果差?
因为照片里没有描摹器需要的那种「边缘」。连续渐变、胶片颗粒和虚焦意味着两个区域之间的界限是一段渐变而不是一条线,于是描摹器要么造出成千上万个碎形状,要么把一切压平成色块。
什么样的素材描得干净?
平涂实色、颜色数量少、边界硬、边缘没有抗锯齿留下的杂色。本来就是按矢量设计的图形,几乎能完美描摹;带阴影、渐变、纹理或者透明度的东西,动手之前要先简化。
输出应该有多少条路径?
越少越好,只要能描述形状。一个描得好的 logo 通常不到一百条路径。产出几千条的,说明它把噪点当成几何描进去了 —— 屏幕上也许看着对,但渲染慢、编辑痛苦、手动改颜色根本不可能。
能不能直接生成矢量而不是描摹?
能,而且往往更好。能输出 SVG 的模型产出的路径结构本来就是给人编辑用的,而描摹产出的是「碰巧近似这些像素」的几何。需要可编辑图层时直接生成,手上已有必须保留的成品时才做矢量化。
为什么描完每个形状外面都有一圈淡边?
抗锯齿。原图每条边上都有混合过渡的像素,描摹器把这段中间色读成了一个真实区域,给了它自己的路径。用硬边版本重新描,或者事后删掉那些细路径,都能解决。

相关术语