图片转 SVG(位图描摹)
图像所有处理都在浏览器本地完成,数据不上传服务器
把图片拖到这里,或点击选择
也可以按 Ctrl/⌘ + V 粘贴截图
PNG / JPEG / WebP / GIF / BMP / AVIF · 单张不超过 30 MB
把位图描成矢量路径,产物是 SVG,放多大都不糊、还能在 Illustrator 或 Figma 里继续编辑。先说清楚它擅长什么:矢量化不是「把 JPG 换个后缀」,而是在图里找出色块边界再把边界描成多边形。所以图标、标志、线稿、乐谱、地图、印章、二维码这类「颜色少、边界清楚」的图效果很好;照片得到的是一大堆色块 —— 文件可能比原图还大,放大也不会变清楚(细节本来就不在),远看像一幅色块拼贴画。这是这条路线固有的边界,不是实现不好。要判断你的图适不适合,先看它颜色有多少种:几十种以内基本能描好,几万种就属于照片那一类了。
功能
- 彩色描摹与黑白描摹两种方式
- 颜色数可调(2–64):越少越干净,越多越像原图
- 三档精细度,同时调整拟合容差与短路径过滤
- 描摹尺寸可调(长边 400–2000 px)—— 它直接决定产物大小与耗时
- 默认先做一次轻微模糊,压掉 JPEG 与扫描件的噪点(否则会被描成上千个小色块)
- 透明区域按白底处理 —— 否则每一块透明都会被描成一片黑色
- 产物是标准 SVG,可在 Illustrator、Figma、Inkscape 里继续编辑
- 结果卡片上会报出路径条数,那是「像不像原图」最直观的代价指标
- 全部在浏览器本地完成,图片不上传
使用方法
- 把图片拖进来或点击选择
- 选彩色还是黑白
- 颜色数先试 16,太花就往下调、不够像就往上调
- 点生成,下载 SVG
常见问题
- 为什么我的照片描出来是一堆色块?
- 因为照片本来就不适合矢量化。这条路线的做法是找出色块边界再描成多边形,而照片里每个像素的颜色都略有不同 —— 于是要么被合并成几百块(看着像色块拼贴),要么保留几万块(文件比原图还大)。判断标准很简单:看你的图有多少种颜色。图标、标志、线稿只有几十种以内,描出来很干净;照片有几万种,就是上面那个结果。真要矢量化照片得用 AI 风格的模型,那是另一类工具。
- 颜色数调到多少合适?
- 从 16 开始试。往下调(8、4)会让画面更「海报化」、文件更小,适合图标与线稿;往上调(32、64)会更接近原图,但路径数涨得很快,文件也跟着涨。注意它和「精细度」是两个不同的旋钮:颜色数决定用几种颜色,精细度决定边界描得多细、多小的碎块会被丢掉。
- 描摹尺寸是干什么的?
- 它决定描摹前把图缩到多大(长边像素),直接决定耗时与产物体积 —— 因为路径数是跟着像素数涨的。4000 px 的图按 2000 描,路径数大约是 800 描的四倍。默认 800 对多数图标够用;细节很密的线稿(乐谱、地图)可以调到 1200 或 2000,但产物会明显变大。另外它不会放大你的图:比上限小的图按原尺寸描。
- 为什么透明背景的图描出来边上有白边?
- 工具会先把透明区域铺成白色再描摹。原因是描摹算法只看 RGB 通道,而透明像素在数据里是 `rgba(0,0,0,0)` —— 也就是「黑色但不可见」,不铺底的话每一块透明都会被描成一片黑色,产物在浅色背景上是一团黑影。铺白底之后透明变成白色(背景色),与它「看上去」的样子一致。想要透明背景的 SVG,请在导出后用矢量工具删掉那层白色底。
- 图片会被上传吗?
- 不会。解码、描摹与生成全在浏览器内存里完成,页面不发送任何请求,断网也能用。
相关工具
SVG 编辑预览
图像左边写 SVG 代码、右边实时预览,可切换棋盘格/深浅背景看透明度,并自动检查 xmlns、viewBox、外部资源等常见问题。代码不会进页面。
应用图标生成
图像一张图生成 iOS AppIcon、Android mipmap 与自适应图标、macOS 的 .icns。可调圆角与留白,自动铺不透明底色,全部在浏览器本地完成。
favicon 生成
图像把一张图切成网站图标的全套尺寸:favicon.ico(16/32/48 打包)、apple-touch-icon、PWA 的 192 与 512。非正方形图自动居中裁成正方形,不上传。
图片格式转换
图像把图片在 PNG、JPEG、WebP、AVIF、BMP、TIFF 之间互转,质量与尺寸上限可调。PNG 转 JPEG 时先铺背景色,透明区域不会变成黑色。全部在浏览器本地完成。
九宫格切图
图像把一张图按网格切开,用于朋友圈九宫格、长图分页。可选 3×3 等六种网格、每格留白与底色,输出按序号命名便于依次发布。
图片加水印
图像给图片加文字水印:九个位置加平铺,字号按图片比例自动缩放,可调颜色与不透明度。平铺加倾斜是防裁剪的常用做法。全部本地完成。