图片转 SVG

"一张形状的图"和"形状本身"不是一回事

PNG 或 JPG 是一格一格的像素。放大到超过它本来的尺寸,那张网格就露馅了:边缘变成锯齿,原本利落的 logo 糊掉,浏览器也无能为力,因为那些细节压根就不存在。SVG 存的是另一种东西——真正的几何。圆就是被描述成一个圆,曲线是一条路径,填充是一个颜色值。因为这些形状是数学而不是像素,放到任何尺寸都能重新画得清清爽爽。所以一个你打算印到名片上、印到广告牌上、又要做成 favicon 的 logo,最好是 SVG:一个文件,不管放多大都不糊。

这个工具把位图转成这种矢量文件,而且整个过程都在你的浏览器里完成。你选一张 PNG 或 JPG,它用 imagetracer 引擎把里面的形状描出来,还给你一个 SVG。图片是在你自己机器上从 canvas 里读的——什么都不上传,没有账号,页面加载完之后断网也照样能用。你丢进去的图,不出你的设备。

它真正擅长的场景

描摹这件事,在输入平整、边缘干净的时候最出彩:logo、图标、简单插画、线稿、手写字。这类图颜色不多、色块之间界限分明,正是描摹算法读得准的东西。它把每一块颜色区域找出来,沿边画一条路径,结果就是一个只有寥寥几个形状的干净 SVG——文件小、边缘利、后面也好改。

预设决定了算法怎么"读"你的图。扁平 / logo 把颜色数压到很低、形状保持简单,最适合两三个颜色的标志。精细 允许更多颜色和更细的路径,给层次更丰富的插画用。海报化 把图压成大块的平涂色带,一种海报般的图形感。黑白 把一切归成两个色调,线稿、印章、剪影最合适。颜色越少,文件越小越干净;颜色越多能留住细腻处,但路径和体积也跟着涨。同一张图不妨试两个预设对比一下——前后对照预览会把原图和描摹结果并排放给你,让你在下载之前就看清好坏。

关于照片,把话说明白

照片也能描,但你几乎肯定不会想这么做。一张照片有成千上万种微妙不同的颜色、没有硬边缘——描摹算法只能用一层层叠在一起的平涂色块去凑近似。出来的 SVG 极其庞大(常常比原来的 JPG 还大得多),看起来是涂抹感、海报感,而不是照片感,而且改起来要命。凡是连续色调的东西——人物、风景、产品照——用位图格式才对,那类需求有专门的压缩和转换工具。SVG 是给形状用的,不是给照片用的。这个工具不会拦着你去描一张照片,但预览会让问题一目了然。

还有一点要讲清楚:这是真正的描摹。它读你给的像素,画出跟着像素走的矢量路径。它不是一个 AI,不会把你的 logo 重画或"美化"成一个新东西。源图要是模糊、低分辨率或者带噪点,描摹结果就继承这些毛病——干净、清晰、颜色少的输入给你干净的结果,乱糟糟的输入给你乱糟糟的路径。

描完之后还能改色、能编辑

因为输出的是一个正常的 SVG,由带名字的路径和填充组成,你并不会被描摹当时产生的那些颜色困住。用矢量编辑器打开这个文件——Illustrator、Inkscape、Figma,甚至一个文本编辑器——你可以改一个填充值就把整块区域换色、微调某条路径、删掉算法多描出来的杂形状,或者把颜色设成你精确的品牌色值。把 logo 弄成矢量的真正好处就在这:它不再是一张定死的图,而是一个归你所有、任意尺寸都不糊、可以随手编辑的对象。