# 图片转 SVG 把 logo、镂空模板或剪影描成曲线

一个形状，一条轮廓。不该有的东西，点一下就好。

> 在浏览器里把黑白图片描成真正的 SVG 轮廓。logo、镂空模板、签名、线稿和剪影都变成能放大到任意尺寸的曲线。描多了的部分，点一下就去掉。什么都不上传。

这是一个浏览器交互工具，地址是 https://abox.tools/zh/image-to-svg/。文件在运行该浏览器的设备上处理。主动分享和可选联网功能都在页面上说明。下文是它的文字说明；使用工具请打开该地址。

## 你的图片**在浏览器里处理**，无须上传处理。

图片由你自己的浏览器从硬盘上读进来，`src/mask.js` 把它压成每像素一位，`src/contour.js` 沿着形状的边缘走一圈，`src/fit.js` 再往上贴曲线，总共六百来行你能读的代码，背后没有引擎，也不用为了跑起来下载任何东西。这个工具没有任何联网功能：不取东西，不发东西，就算真有，这个页面的另一头也没有服务器能接住一张图。

- ✗ 不上传
- ✗ 不注册
- ✗ 没有水印
- ✓ 断网能用
- ✓ 开源

## 不上传怎么把图片描成 SVG

1. **选一张图片。** logo、镂空模板、签名、印章、扫描的图纸、剪影。只要里面有一个清楚的形状，就描得干净；一张房间的照片不行，下面会明说，而不是等到最后给你个意外。文件直接从你的硬盘上读，期间什么都不会发到任何地方。
2. **告诉它形状是什么。** 纸上的图按**明暗**分开，分界值替你算好。一张物件的照片不行——深灰石头上的一尊深红塑像，是深色叠深色，亮度分不开它们。这种要选**主体**：它从图片边缘的一圈带子里学会什么是背景，然后把不是背景的都留下。
3. **看红线，别看设置。** 轮廓画在它来自的那些像素上面，因为只有在那里，这个问题才有答案：一条轮廓对不对，只相对于那些像素，跟别的无关。拖任意一张图，两张一起动；滚滚轮放大到能看清这条线到底在做什么。
4. **不该有的东西，点一下去掉。** 一个斑点、一枚订书钉、一个印章、一行说明、一片阴影。一下点中的是那一整块同色区域而不是一个像素，所以你指的是一个形状；再点一下就回来。点一块被围住的背景，则是把它填上——不该是洞的洞，就是这么补上的。
5. **只在需要时调平滑。** *细节*是简化时线条允许偏离像素多远，除非你另有指定，否则按形状算。*拐角锐度*决定轮廓要拐多大的弯，那个弯才保留为角而不是被磨圆。大多数图片这两项都不用碰。
6. **拿走 SVG。** 一个文件，一条 `<path>`，没有填充规则要操心：外轮廓朝一个方向转，洞朝另一个方向转，所以一个带四十个洞的形状也只是一个元素。Illustrator、Inkscape、Figma、浏览器和切割机都打得开。

## 说得更细的版本

[怎么把图片描成 SVG](https://abox.tools/zh/guides/trace-an-image-into-an-svg/): 在浏览器里把 logo、镂空模板、签名或剪影变成真正的矢量轮廓。哪些图片描得好，哪些永远描不好，以及怎么改掉描图器弄错的地方。

## 工具箱里还有

- [身高对比图](https://abox.tools/zh/compare-heights/): 把身高打进去，把图带走。为了画它，不会往外送任何东西。
- [商家资料预览](https://abox.tools/zh/business-profile-preview/): 把内容打进去，它就变成 Google 会画的那张卡片。为了画它，不会往外送任何东西。
- [图片压缩](https://abox.tools/zh/compress-image/): 说个大小，剩下的它来算。
- [图片缩放](https://abox.tools/zh/resize-image/): 说个尺寸，拉个框，挑个格式。

## 常见问题

### 我的图片会被上传到哪里吗？

不会。文件由你自己的浏览器在你自己的硬件上读取，由本站发出的几百行 JavaScript 描边，再作为下载交还给你。这个工具没有任何联网功能——从不取东西，也从不发东西——页面的 `Content-Security-Policy` 把它允许联的地址全列了出来，没有一个是本站的。

### 它能把我的照片变成 SVG 吗？

变不出有用的东西，而且页面会直接告诉你，而不是等你下载完才发现。描图会把每一块颜色相近的区域都变成一个独立的形状，所以一张照片回来时是几千个叠在一起的色块，文件比 JPEG 大好多倍，打开慢，还不像那张照片。描得好的，是里面有一个*形状*的图片：logo、镂空模板、签名、线稿、剪影。如果是只拍了一样东西的照片，*主体*这个设置会把它抠成一整块实心剪影——那是另一回事，而且真的有用。

### 找形状的两种方法有什么区别？

问的问题不一样。**明暗**问的是每个像素是否比某个值更暗，这对纸上的墨迹再合适不过，而在主体和背景一样暗的时候毫无用处。**主体**问的是背景是什么——它从图片边缘的一圈带子里学，拿每个像素跟它比，留下不是背景的最大一块。这在一张物件照片配上大致均匀的背景时管用；在裁得太紧、主体从三边出画的图片上会失败，因为它学习用的边缘本身就是主体。遇到这种情况，你可以自己把背景指给它。

### 为什么描出来的形状有洞，或者细的部分丢了？

因为图片变成每像素一位的那一刻就已经是这样了。打开*描图器拿到的*看看：小于十二像素左右，字母的内空已经糊上，竖笔已经粘在一起，没有哪种描图能找回一个不存在的洞。补救在上游——挪一挪阈值，或者从更大的扫描开始。在*主体*模式下，*补上不超过*会封住小洞，*整个填实*会把背景从图片边缘够不到的洞全部填上。

### 它弄错的地方能改吗？

能，第三步基本上就是做这个的。点任何不该出现在图里的东西，它就消失；再点一下，它就回来。一下点中的是那一整块同色区域，所以一下去掉的是整个斑点或整个印章，而不是一个像素。点一块被围住的背景则是把它填上。改动和阈值分开保存，之后再拖滑块也不会把它们丢掉。

### SVG 会有多大？

如果是形状，比图片小：描出来的剪影通常一到五千字节，logo 再多几千。页面会在下载旁边告诉你确切数字。如果是照片，会大得吓人——这是这个工具不适合那个文件最明确的信号——超过一千个左右的独立形状，页面就会停止绘制并明说。

### 能描彩色的吗？

不能。这个工具做的是单色的一个形状，只有这种情况出来的才是一张图，而不是一张劣质复印件。彩色描图意味着先量化成几种颜色，再把每种颜色当作一个图层单独描，结果会让大多数提出这个要求的人失望。要颜色的话，在这里描出形状，再到你的绘图软件里上色。

### 拿到 SVG 之后能做什么？

放大到任意尺寸而不发虚、改一个属性就换颜色、做动画、打印，或者送去切割机、激光机。它是一条没有填充规则可弄错的 `<path>`，所以 Illustrator、Inkscape、Figma、浏览器和大多数 CNC 软件读出来都一样。

### 图片大小有上限吗？

上限是你机器的，不是我们的。一页 300 dpi 扫描的 A4——大约九百万像素——不到一秒就描完。更大的图片也能用，只是更慢，而且活儿是在你自己的处理器上做的，不是排在哪个队列里。

### 免费吗？需要账号吗？

免费，没有账号、没有登录、没有试用期、没有水印。文件的数量和大小也没有限制，因为没有服务器替它们买单——活儿在你自己的机器上做。网站上有广告，靠广告维持；广告拿不到任何关于你文件的信息。

### 断网能用吗？

能。把页面加载一次，然后断开网络，它照样能用。这也是证明什么都没上传最简单的办法：一个要把你的图片送出去描的工具，拔掉网线那一刻就会停。

## 这条隐私承诺怎么核实

- **处理在这个浏览器里完成。** 本工具在浏览器里处理输入和结果，处理代码不把它们上传去处理。Content-Security-Policy 限制可用资源和连接目的地，但已允许的主机仍可接收请求。策略不检查载荷，不能单独证明什么都没有发出。请把具体操作的请求与源码核对，或断网完成该本地操作。
- **这里没有任何东西会去联网取数据。** 整个 `src/` 里，一个 `fetch`、一个 `XMLHttpRequest`、一个 `sendBeacon` 都找不到。整个工具就是对一张图片的像素做算术：一个阈值，沿着找到的形状的边缘走一圈，再贴几段曲线。
- **没有引擎要下载。** 描图通常是别人的程序在做的事，放到网页上就意味着第一下点击之前先要下来好几兆编译过的代码。这里没有这回事。整个工具就是几百行从本站发出的普通 JavaScript，这也是页面一打开就能用、不用等的原因。
- **Google 加载了什么，又拿不到什么。** 广告脚本和统计脚本来自 Google，捐助按钮来自 Buy Me a Coffee。关于你图片的信息，一条都没给它们。读图、取阈值、描边的每一行代码都从本站发出，也都摆在仓库里。
- **断网照样能用。** 断开网络，这个工具跟原来一模一样，因为它本来就没有联网这一步。这是最省事的一条证明。

**你可以自己核对。**上面这些不用你信。这个页面是仓库里的模板和配置生成出来的，构建脚本你能读，也能自己跑一遍，跑出来的结果就提交在 `dist` 分支上。拿实际发给你的内容，跟你自己从源码构建出来的结果对一遍就知道了： https://github.com/A-Box-of-Tools/website

最值得先读的几个文件：`config/site.toml` 里是 Content-Security-Policy，`src/mask.js` 里是一张图怎么变成每像素一位，`src/contour.js` 里是沿形状边缘走的那一圈，`src/fit.js` 里是楼梯怎么变成曲线，`src/subject.js` 里是没有明暗可分的时候怎么把背景算出来。