先找最大的那一版
在网页上右键点Logo,选“在新标签页中打开图片”:页面背后的文件往往比显示出来的大好几倍。1000像素的PNG比200像素的描摹得明显更好。
为什么Logo好转
颜色少、边缘硬、形状简单:这是最容易矢量化的一类图。
你的Logo最初肯定是被“画”出来的:这里一个圆,那里一个字母,三四种纯色。后来为了放进网页、PPT或者邮件签名,它被导出成PNG或JPG,图形被压平成了一格一格的像素。Logo转SVG,就是把这条路倒着走一遍:把那些图形重新找回来。因为Logo的颜色少、边界清晰,描摹工具几乎可以原样还原:常见的结果是2到8种颜色、几KB大小、每种颜色一条可编辑的路径,放大到任何尺寸,看上去都和原稿一样。
这也是一份SVG能顶一整个文件夹的原因。16像素的网站图标、512像素的应用图标、网页顶部的Logo、印在信纸上的Logo、展会背景板,都可以从同一个矢量文件出来。不用再分别导出1倍、2倍、3倍图,客户放大页面或者换成高分屏,也不会发虚。
AnyToSVG把Logo当作最主要的使用场景。打开一张Logo后,它会自己判断这是彩色还是黑白、实际有几种颜色、有没有需要去掉的背景。光泽徽章、渐变飘带、图标背后的柔和光晕这类平滑过渡的区域,会在统计颜色之前先被识别出来,写成真正的<linearGradient>或<radialGradient>填充,所以渐变Logo仍然是一个平滑的图形,而不会碎成一级一级的色带。
关键设置
自动识别通常已经把第一遍做对了,下面是值得了解的几个控件。
每次修改都会在不到一秒内重新描摹,所以学会这些控件最快的办法,就是拖一下滑块,看预览怎么变。Logo转SVG图文教程配了截图,把每一项都讲了一遍。
用到哪里
同一个矢量文件,各种输出。只需要知道其中三四个特殊的地方。
网站和App。SVG可以放在<img>标签里、当作CSS背景,也可以直接内联到HTML里,再用CSS改颜色。现代浏览器也支持把SVG当作网站图标(<link rel="icon" type="image/svg+xml" href="/logo.svg">),老浏览器则保留一份PNG或ICO作为备用。文件很朴素:viewBox采用原图像素尺寸,每种颜色一条<path>,所以通常比它的来源PNG还小。不过不少邮箱客户端至今不显示SVG,邮件签名请继续用PNG:转换器里的PNG 2×和4×按钮可以从矢量图渲染出一张,比你最初那张还清晰。
印刷和广告制作。把SVG直接发给印刷厂,或者用Inkscape、Illustrator、Affinity Designer打开后另存为PDF或EPS,这是矢量到矢量的转换,不会有任何损失。要注意颜色:填充色是sRGB的十六进制值,如果品牌规定的是潘通色或CMYK,需要在编辑软件里手动对应色板。想要精确的品牌色,直接修改每种颜色对应的那个fill属性即可,文件很好改。
刻字机、切割机和即时贴。勾选透明背景,关闭识别渐变,再到高级选项里把颜色图层设为镂空,这样每种颜色恰好是它自己的闭合图形,刀头不会把同一条边切两遍。每种颜色导入刻字机软件后会成为单独的图层;颜色数尽量少,再适当调高去除杂点,免得出现小到没法清理的碎片。完整的切割检查清单在PNG转SVG页面。
激光雕刻和数控。黑白模式得到的是一条路径加透明背景,非常适合雕刻。如果CAD或数控软件要的是DXF,用Inkscape打开SVG,再“另存为”DXF即可。
描摹还是重画
两者都是描摹,区别在价格、上手难度和可调的参数多少。
如果你本来就在用Adobe Illustrator,它的「图像描摹」(Image Trace)是个很好的工具:有预设,有可调的阈值,有路径和拐角滑块,有“忽略白色”选项,结果还可以扩展成可编辑的路径,而且全都在你接着要干活的软件里。如果你用Inkscape,「临摹位图」(Trace Bitmap)是免费的桌面版对应功能,它用的描摹器(Potrace)和AnyToSVG是同一个。
AnyToSVG面向的是另外几种情况:你没有Illustrator,你在手机或者别人的电脑上,或者只是想一分钟内、不装任何软件就拿到一份干净的SVG。它会替你选好彩色还是黑白、颜色数和阈值,在统计颜色之前先识别渐变,去掉抗锯齿产生的光晕,免得相邻图形之间出现细线,而且一切都在浏览器里完成,所以客户还没发布的Logo不会离开你的电脑。输出是普通的SVG,在Illustrator、Inkscape、Figma、Affinity、Canva里和任何SVG一样打开,你还可以继续在那里润色。
不管用哪个,都要记住描摹的本质:它是对像素里已有内容的忠实复制。模糊的、特别小的、或者从店招上拍下来的Logo,描摹出来也是模糊的、很小的、或者歪斜的矢量图。遇到这种情况,把描摹结果当作底稿重新画一遍,或者向设计师要原始的.ai、.eps、.pdf、.svg文件。另外,只矢量化你自己拥有或者已获得授权的Logo:转换文件格式,并不会改变设计的版权归谁。
使用方法
只有三步,第二步还可以跳过。没有繁琐的向导,不用选模型,也没有积分计数。
把图片拖到页面上、从电脑里选择,或按Ctrl+V粘贴,马上开始分析和描摹。彩色还是黑白、该用几种颜色、阈值多少,都会自动识别。
拖动原图和SVG之间的分隔线对比,放大看边缘。可以改颜色数、隐藏某种颜色、把背景变透明,每次修改都在不到一秒内重新描摹。
保存SVG文件、复制SVG代码,或导出2倍、4倍大小的PNG。坐标与原图像素一致,每种填充一条路径,文件里没有多余内容。
小技巧
在网页上右键点Logo,选“在新标签页中打开图片”:页面背后的文件往往比显示出来的大好几倍。1000像素的PNG比200像素的描摹得明显更好。
PNG会把边缘原样保存。JPG的Logo也能转,降噪会自动运行,但要比PNG多花一点时间修整。
AnyToSVG最大按2048像素描摹,小图会用适合描摹的滤波方式自动放大。在图片编辑软件里再重采样一次,只会多加一层模糊。
多余的投影或者彩色底色,点击对应色块就能从SVG里去掉,不需要重新画。
很小的文字能描摹成不错的图形,但不会变成字体。如果Logo上的口号需要修改,就在编辑软件里对照描摹结果重新输入。
在预览里滚轮放大,拖动分隔线扫过整个Logo。你看到的,就是SVG里的实际内容。
把PNG或JPG的Logo拖到本页,或者打开转换器选择文件,大约一秒就在浏览器里描摹完成。如果Logo放在白底上,勾选透明背景,看一下色块行,然后点下载SVG。不用账号,没有积分制度,没有水印。
是的。“Logo转SVG”“Logo转矢量图”“Logo矢量化”说的都是同一件事:把Logo的形状重新建成曲线,而不是像素。结果是SVG格式,所有矢量编辑软件、浏览器和刻字机都能打开。
对于颜色平整、边缘清晰的Logo,几乎一模一样,放大时还比PNG更锐利。柔和的投影、模糊的原图和特别小的图描摹得会差一些,下载前可以在对比视图里看到差别。
可以。本来就透明的PNG会保留透明。如果Logo放在纯色背景上,勾选透明背景,外围的颜色会被去掉,而被包围的同色区域(比如字母中间的空白)会保留。
转换器输出的是SVG(以及由它渲染出来的PNG)。用Inkscape、Illustrator或Affinity Designer打开SVG,再另存为PDF、EPS或AI就行,这些都是矢量到矢量的转换,不会有损失。
看你手上有什么。「图像描摹」在Illustrator里能手动调的东西更多。AnyToSVG免费、不用安装、会替你选好设置,并把渐变写成真正的SVG渐变。两者都最适合干净、颜色平整的Logo。
不会。PNG、JPG、GIF、WebP、BMP和SVG文件完全在你的浏览器里解码和描摹。只有浏览器打不开的格式(TIFF、PSD、HEIC、PDF)才会在服务器内存里转换并立即丢弃。详见隐私政策。
技术上可以,法律上只有你拥有它或者得到许可才行。不管是什么文件格式,商标权和著作权都属于权利人。
更多转换器
同一个引擎、同样的隐私保护,每种输入格式一个页面,方便你收藏常用的那个。
免费、在浏览器里运行,无需安装,不上传图片。大约一秒,SVG就会和原图并排显示。