位图和矢量是存图的两种不同方式,搞懂它们的区别,你就知道什么时候该在两者之间转换。位图——PNG、JPG、WebP——是一张定死的、由彩色像素组成的网格。矢量图——SVG——是一组指令:画这条路径、给它填这个颜色、把这个圆放这里。因为矢量用数学而不是像素来描述形状,放到任何尺寸都清晰;而位图一旦被推过它本来的分辨率,立刻就糊。
"位图转矢量"指的就是描摹:引擎读像素,推算出藏在里面的形状,再把这些形状写成矢量路径。用在对的场景,它是真有用;用在错的场景,它就一团糟。这篇两头都讲。
描摹擅长什么
描摹想要的是平整、边缘干净的输入:logo、图标、简单插画、线稿、手写字。这些图配色有限、界限分明,算法就能找到每一块颜色、沿边画一条利落的路径。结果是一个只有几个形状的紧凑 SVG——任意尺寸都清晰、文件小、之后可编辑。如果你的目标是一个从 favicon 到广告牌都能用的 logo,描摹能带你到那儿。
为什么照片不合适
照片正好是描摹最不想要的东西。它有成千上万种微妙变化的颜色、没有硬边缘——连续色调。要把这个矢量化,引擎只能用一层层叠在一起的平涂色块去凑每一段渐变。三件坏事同时发生:SVG 变得极其庞大,常常是原 JPG 的好几倍;它看着一片涂抹感、海报感,而不是照片感;而且它由成千上万个没意义的形状组成,改起来要命。对照片来说,位图格式就是对的答案——去压缩那张 JPG,或者转成 WebP。矢量是给图形用的,不是给照片用的。
预设和颜色数
算法被允许用多少种颜色,是对结果影响最大的那根杠杆。预设替你定好:扁平 / logo 给简单标志把颜色压低,精细 给层次更丰富的插画放开一些,海报化 把图压成大块平涂色带,黑白 把一切归成两个色调,给线稿和剪影用。颜色越少,文件越干净越小;颜色越多能留住细腻处,代价是多出的路径和体积。同一张图试两个预设、比一比前后对照预览,是找到平衡最快的办法。
全程本地，什么都不上传
整个转换都在你浏览器里用 imagetracer 引擎跑。图片在你自己机器上从 canvas 里读、在本地描、再作为 SVG 还给你——什么都不上传,没有账号,页面加载完之后断网也能用。对一个你不太想发到别人服务器上的 logo 或内部图形来说,这一点值得。
有一点要澄清,因为"转换"这个词容易让人误会:这是真正的描摹,不是 AI 重画。它跟着你给的像素走,不会凭空造出一个更干净的版本。源图清晰、扁平、颜色少,结果就清晰;源图模糊或带噪点,给你的就是模糊、带噪点的路径。
描完之后
因为输出是一个标准 SVG,由带名字的路径和填充组成,你可以在任何矢量编辑器里接着改——Illustrator、Inkscape、Figma。改一个填充值就给整块区域换色、设精确的品牌色、删掉杂形状,或者调路径。这就是转矢量的意义:图不再是一张定死的图,而是一个归你所有、任意尺寸都能重塑、且不糊的对象。