AnyToSVG

操作教程 · 阅读约7分钟

PNG、JPG的Logo怎么转成SVG矢量图(效果干净的做法)

描摹工具的效果,取决于你喂给它什么。花十分钟认真处理原图、调好两个设置,就是能印在横幅上的矢量图,和得重画一遍的矢量图之间的区别。

01 · 原图

从你能找到的最好的位图开始

大多数不好的矢量图,一开始就是不好的位图。

打开转换器之前,花一分钟找找Logo最大、最干净的版本。优先顺序如下:

  1. 现成的矢量文件。向对方要设计Logo时用的.ai、.eps、.pdf或.svg。如果有,就根本不用描摹。
  2. 透明背景的PNG,尺寸500–2000像素。PNG是无损的,所以边缘正是设计师画出来的样子。
  3. 较大的JPG。对于纯色块图稿,800像素以上就没问题,压缩噪点相对图形很小。再小的话,JPG的方块和振铃杂纹会在描摹结果里显现出来。
  4. 截图或很小的网页图片。也能用,小图在描摹前会先放大,但曲线会更圆,小字可能会糊在一起。

不管手上是哪种,都不要先在图片编辑软件里调整大小。AnyToSVG最大按2048 px描摹,小图也会自己用适合描摹的滤波方式放大;中间多一次重采样只会增加模糊。

只想看精简版?Logo转SVG页面把转换器和最关键的五项设置放在了同一个屏幕上。
是从网站上截的图?先在Logo上右键,选在新标签页中打开图片,页面背后的原图文件往往比显示出来的大好几倍。

02 · 拖入

先让自动识别做第一轮判断

把文件拖到转换器上(或按Ctrl+V粘贴)。一秒之内,你就会看到SVG出现在原图旁边,设置面板里会显示识别结果:

  • 彩色模式,颜色数等于找到的不同颜色数量,多数Logo是2到8种;或者
  • 如果图片是浅底深色的线稿,就是黑白模式,阈值和墨色都从图片里选取。

看一眼色块行。如果列出的正是你预期的颜色,没有别的,那最难的部分就完成了。如果多出一个与另一个几乎一样的色块,把颜色数减一;如果你看得见的某种颜色没有出现,就把颜色数加一。

自动识别之后的设置面板:彩色模式、六种颜色、识别出的色块和“透明背景”复选框
拖入一个六色Logo之后的设置面板。色块下方的圆点标记的是背景色。

03 · 背景

把背景变透明

一个复选框,而且它分得清“外面”和“里面”。

白底(或任何纯色底)上的Logo,几乎都应该去掉背景再交付。勾选透明背景:与图片边缘相连的颜色(在色块行里带圆点标记)会从SVG中去掉。

只会去掉外围区域。如果Logo本身含有同样的颜色,比如白底上的白色文字、图形里的白色高光,这些被包围的区域会保留,因为它们和边缘不相连。把预览底色切换成深色(预览上方的方形按钮),确认没有重要的东西消失。

要去掉其他颜色,点击它的色块:色块会变灰并带一条斜线,它的图形随即消失。再点一次就恢复。这是去掉投影、扫描时的杂物,或者只是因抗锯齿而出现的颜色的快捷办法。

在黑白模式下,背景本来就是透明的,只会描摹深色图形(用反相时则是浅色图形)。

04 · 边缘

修复锯齿、毛糙或断裂的边缘

放大预览(在上面滚动滚轮,或按+),检查一条曲线和一个拐角。然后:

  • 曲线抖动:原图太小或被压缩过。调高曲线平滑,或选柔和预设。如果是JPG,再在高级选项里勾选先降噪。
  • 本该尖锐的拐角被磨圆了:调低曲线平滑,或选锐利。Potrace会逐个拐角判断,低于0.5的值几乎会保留所有拐角。
  • 灰尘和小碎片:调大去除杂点。小于这么多原图像素的东西会被忽略。2 px能清掉抗锯齿的残渣;扫描件可能需要10或更多。
  • 细线断开:可能是它比杂点尺寸还细,或者某种颜色被并入了相邻颜色。调低去除杂点,或者把颜色数加一。

05 · 颜色

把颜色数设对

每种颜色会变成一条路径,所以颜色数也是影响文件大小和干净程度的最大因素。经验法则:

  • 纯色Logo:设计有几种颜色就设几种。自动识别通常能判断对。
  • 带渐变的Logo:保持勾选识别渐变。平滑明暗的区域会用线性或径向渐变拟合,并写成一个带真正<linearGradient> / <radialGradient>填充的图形,色块行里会把它显示为渐变色块。这时颜色数只对纯色部分起作用。如果某个渐变没被识别出来(JPG噪点严重,或明暗沿着图形弯曲),勾选先降噪;还不行就调高颜色数,明暗会变成色带,你可以在矢量编辑软件里重新做成渐变。
  • 照片或绘画:12–32种颜色可得到海报化效果。参见描摹能做到什么,做不到什么。

除非你打算实际切割图形或在编辑软件里把它们拆开,否则请保持颜色图层为叠加;它能防止相邻颜色之间出现发丝般的缝隙。

开启渐变识别后描摹的气球条纹:平滑的明暗,每条条纹一个图形
开启识别渐变:6个渐变,15个图形,6.7 KB。
同样的条纹用13种纯色描摹:边缘生硬的色带
关闭:13种颜色,29个图形,56 KB,而且是色带。

06 · 检查与交付

发给别人之前

检查三十秒,能省一次重印。

  1. 在对比视图里,拖动分隔线扫过整张图。线经过时形状发生变化的地方,都值得再仔细看看。
  2. 对最小的文字或最细的线放大到400%。在这里看得清,印在横幅上也看得清。
  3. 看看结果面板里的数字。干净的Logo是寥寥几个图形、几KB;几百个图形通常意味着有噪点、是JPG,或者颜色太多。
  4. 下载SVG,然后用浏览器或矢量编辑软件打开一次。文件很朴素:每种颜色一条带fill的<path>,采用原图像素坐标,没有分组或变换,手动改色很容易。
  5. 如果对方到底还是要位图,用PNG 2×或4×按钮:它们由矢量图渲染,所以比你最初的文件更清晰。

如果结果还是不够好,比如原图非常模糊、是名片的照片、或者Logo带有柔和的阴影,那就是该重画的信号。描摹忠实地复制已有的东西,它没法凭空造出像素里本来没有的内容。

边读边试

转换器免费,无需注册,大约一秒就能把SVG和原图并排对比给你看。

打开转换器