抖动的GIF要调大“去除杂点”
4–8 px可以去掉由照片转成GIF后带来的棋盘格噪点,又不影响真正的图形。
GIF为什么好描摹
GIF已经替你做了一半的颜色量化,转换器再从中找出真正的颜色。
一张GIF最多只有256种颜色,而大多数存成GIF的剪贴画、图标、按钮和示意图用的颜色要少得多,常常只有2到16种、边缘分明的纯色。这正是描摹工具最擅长处理的图:每种颜色变成一条干净的<path>路径,边缘清晰,生成的SVG通常比原来的GIF还小。
唯一要留意的是抖动。如果GIF是由照片或渐变图转换来的,编码器会用两种色板颜色组成的细密棋盘格去模拟缺少的颜色,而在描摹工具眼里,这就是成千上万个小杂点。AnyToSVG的颜色分析会尽可能把抖动图案重新归并为平均色,去除杂点(单位是原图像素)则会在画出任何路径之前,把剩下的碎片并入周围的颜色。所以对抖动严重的GIF,把它调到4–8 px,杂点就会消失,也不会留下空洞。高级选项里的先降噪同样有帮助。
输出的是原图像素坐标下的标准SVG:每种颜色一条路径,原图里有平滑明暗的地方使用真正的渐变,没有别的东西。它可以在Illustrator、Inkscape、Figma、各类刻字机软件和任何浏览器中打开。
透明与尺寸
保留GIF的透明;很小的网页图在描摹前会先放大。
GIF支持透明,但只有开和关两种:一个像素要么完全不透明,要么完全透明,没有柔和的边缘。转换器会遵循这一点:透明像素不会被描摹,SVG在同样的位置也是透明的。由于没有抗锯齿,透明GIF的轮廓是一级一级的像素台阶;Potrace会把这些台阶变成平滑的曲线,而曲线平滑滑块决定拐角变圆的程度(拉向0保持尖锐,拉向1.3则磨圆)。
早期网页上的GIF往往非常小,只有32到200像素。小图在计算矢量图之前,会用适合描摹的滤波方式放大两到三倍,曲线会比直接描摹原始像素圆润得多。如果是刻意做的像素画,你可能想要相反的效果:把曲线平滑设为0,细节预设选锐利,这样块状的边缘就会按原样保留。
GIF动图
SVG在这里是静态图,请先选好你要的那一帧。
GIF动图也能导入,浏览器会把它的第一帧交给转换器。如果需要其他帧,先用图片编辑软件(GIMP、Photoshop、Photopea、ezgif.com)把那一帧导出成PNG,再把PNG拖进来,参见PNG转SVG。SVG有自己的动画方式(SMIL和CSS),但描摹得到的是静态图,要让它动起来,需要在矢量编辑软件里另外制作。
使用方法
只有三步,第二步还可以跳过。没有繁琐的向导,不用选模型,也没有积分计数。
把图片拖到页面上、从电脑里选择,或按Ctrl+V粘贴,马上开始分析和描摹。彩色还是黑白、该用几种颜色、阈值多少,都会自动识别。
拖动原图和SVG之间的分隔线对比,放大看边缘。可以改颜色数、隐藏某种颜色、把背景变透明,每次修改都在不到一秒内重新描摹。
保存SVG文件、复制SVG代码,或导出2倍、4倍大小的PNG。坐标与原图像素一致,每种填充一条路径,文件里没有多余内容。
小技巧
4–8 px可以去掉由照片转成GIF后带来的棋盘格噪点,又不影响真正的图形。
自动识别会从图片里读取;一个4色图标就该用4种颜色描摹,而不是带上那些抖动出来的过渡色。
想保留刻意做出来的块状边缘,就把平滑关掉并使用“锐利”预设;保持“放大小图”开启,这样像素块的比例才会一致。
透明底上的黑色GIF用黑白模式描摹最好:只有一条路径,完全不需要色板。
老网站上的GIF按钮和图标都很小。如果哪里有更大的PNG或原始矢量文件,就用那个。
把预览背景切换成棋盘格,确认哪些区域转出来是透明的。
把GIF拖到本页,或者打开转换器选择文件,一秒内就会在浏览器里完成解码和描摹;看一下预览,点下载SVG即可。不用账号,不上传,没有水印。
会描摹第一帧;描摹工具生成的SVG是静态图。想矢量化其他帧,先用图片编辑软件把它导出成PNG。
会。GIF的透明是按像素的开关,这些像素不会被描摹,所以SVG在同样的位置也是透明的。纯色背景可以用透明背景复选框去掉。
因为它有抖动,也就是用两种颜色的细密图案去模拟第三种颜色。把去除杂点调到4–8 px,在高级选项里勾选先降噪,并把颜色数调到设计真正用到的数量。
不会。GIF、PNG、JPG、WebP和BMP文件完全在你的浏览器里解码和描摹。详见隐私政策。
几乎总是SVG:在任何屏幕密度下都清晰,通常体积更小,颜色还能用CSS修改。GIF则限于256色和固定的像素尺寸。
免费、在浏览器里运行,无需安装,不上传图片。大约一秒,SVG就会和原图并排显示。