你手上的 logo 是一张 PNG。放在网站头部看着挺好,直到有人要它的大图——横幅、印刷、T 恤——一放大就发糊、带锯齿。这就是位图的天花板:它是一格一格定死的像素,放大时并没有多余的细节可以补出来。SVG 没这个天花板。它把 logo 存成形状和路径,所以不管是 32 像素宽还是两米宽,都能重新画得清清爽爽。
把 PNG logo 变成 SVG,靠的是描摹——读像素,画出跟着边缘走的矢量路径。对一个扁平 logo 来说,这正是对的工具,而且很快。
为什么 logo 很好描
一个好 logo 是描摹的理想输入。它通常颜色不多、色块之间界限干净、没有柔和的渐变或照片质感。描摹算法读这种图很干净:找到每一块颜色,沿边画一条贴合的路径,产出一个只有几个形状的 SVG。文件小、边缘利、之后完全可编辑。
图标、简单插画、线稿、手写字都因为同样的道理落进这个舒服的区间——平涂色加分明的边缘。
分步操作
- 用你手头最干净的那张 PNG。 分辨率高、清晰的源比一张又小又糊的描得好。如果你的 logo 是透明背景,留着——描摹能保住透明。
- 选一个跟 logo 匹配的预设。 两三个颜色的标志,用扁平 / logo,颜色数压得低、形状简单。层次更多的插画用精细,允许更多路径。纯线稿或剪影用黑白,归成两个色调。
- 看前后对照预览。 把描摹结果和原图比。如果边缘发肿,或者工具多冒出些颜色,换个预设试试——颜色越少通常越干净、文件越小。
- 下载 SVG,需要的话在矢量编辑器里精修。
因为整个过程都在你浏览器里跑,你丢进去的 logo 不会被上传——它是在你自己机器上从 canvas 里读的,没有账号,页面加载完之后断网也能用。
描完之后清理和改色
输出是一个正常的 SVG,由带名字的路径和填充组成,所以你不会被描摹当时的颜色锁死。用 Illustrator、Inkscape 或 Figma 打开,改一个填充值就能给整块区域换色、设成你精确的品牌色值、删掉算法多描出来的杂形状,或者微调路径。这才是真正的回报:logo 不再是一张定死的图,而是一个任意尺寸都能编辑的对象。
它帮不上忙的地方:照片
对输入要诚实。它描的是形状,不是照片。你要是喂它一张照片——头像、产品照、风景——它照样会产出一个 SVG,但是个糟糕的:成千上万种微妙的颜色被一层层色块凑近似,文件比原来的 JPG 大出一大截,看着一片涂抹感。凡是连续色调的东西,还是留成位图格式、去压缩它。而且这不是一个会把你 logo 重画成新东西的 AI——源 PNG 要是模糊或带噪点,描摹就继承这些毛病。一个干净、扁平、颜色少的 logo 给你干净的 SVG,这就是它的甜区。