如何把JPG转成SVG或把PNG转成SVG

要把JPG转成SVG（或PNG转SVG），需要对图片进行描摹。软件会找出颜色之间的边缘，并把它们重新绘制成矢量形状。浏览器描摹工具一步就能完成，免费的Inkscape编辑器则通过“路径”>“描摹位图”来完成。描摹适合标志、图标和线稿，不适合照片。

把图片转成SVG时会发生什么

JPG、PNG和SVG保存图片的方式完全不同。JPG或PNG是由彩色像素组成的网格。SVG则用文字描述形状：“从这里到那里画一条曲线，填充深蓝色。”两者之间没有直接的对应关系，所以转换工具必须自己找出形状在哪里。

这个过程叫作描摹或矢量化。软件会把相近的颜色归为一组，沿着每组的轮廓走一遍，再把轮廓平滑成曲线。结果是用路径拼出来的、和原图近似的图像。如果只有几种平涂颜色、边缘清晰，结果可以和原图几乎一模一样，并能缩放到任意大小。如果有渐变、纹理和精细细节，软件就不得不大幅简化。

小心那些跳过描摹的转换工具。有些工具只是把JPG或PNG包进一个SVG文件就算完事。文件扩展名是.svg，但里面还是同样的像素，放大后照样模糊。如果切割机、刺绣软件或激光雕刻机拒收你的“SVG”，很可能就是这个原因。检查方法是用文本编辑器打开文件。如果你看到一长段以下面内容开头的代码： data:image/png;base64 或 data:image/jpeg;base64 ，而且很少有 path 元素，说明它根本没有被描摹过。

哪些图片适合转SVG（哪些不适合）

适合的图片：

• 只有几种平涂颜色的标志。
• 图标和简单插画。
• 黑白线稿、印章和剪贴画。
• 以适当大小扫描的签名和手写字。
• 粗体、干净字体的文字。

不适合的图片：

• 人物、风景或产品的照片。
• 带有柔和阴影、渐变或模糊的图片。
• 边缘本来就发虚的小尺寸低分辨率文件。
• 压缩严重、边缘有明显压缩痕迹的JPG。

照片描摹成SVG后，看起来就像一张由平涂色块组成的海报。文件甚至可能比原图还大，因为里面有成千上万个小形状。照片请保留JPG或WebP等位图格式。

JPG还是PNG：哪个更适合做源图？

能选的话，选PNG。JPG压缩会在锐利的边缘周围留下淡淡的污迹和波纹，描摹工具会把它们变成凸起和零星的斑点。同一个标志的PNG边缘干净，往往还有透明背景，描摹效果好得多。如果手上只有JPG，就找尽可能大的版本，先清理一下（见下面的技巧）。我们的PNG文件指南解释了这个格式为什么能保持边缘完整。

如何在浏览器中把PNG转成SVG

PNG转SVG工具使用开源的ImageTracer库来描摹PNG和JPG图片。它完全在浏览器里运行，所以你正在处理的标志不会上传到任何地方。

1. 打开工具，添加你的PNG或JPG。
2. 运行描摹，查看预览。
3. 如果边缘有锯齿或零星斑点太多，就准备一张更干净或更大的源图，重新描摹。
4. 下载SVG。
5. 在使用之前，先在浏览器中打开SVG并放大，检查曲线。

也要看看文件大小。干净的标志通常生成的SVG很小。如果下载的文件比源图大很多，说明描摹工具找到了大量小形状，这表明源图噪点太多或细节太复杂。

对干净的标志或图标来说，这是最快的办法。对于复杂的设计，请预期要在矢量编辑器中对结果做一些整理。

确定结果之前，先想想SVG要用在哪里。网站上的标志只要在屏幕上看起来没问题就行，小瑕疵通常无所谓。切割机和刻字机会严格沿着每条路径走，所以零星的斑点会变成细小的切口，应该删掉。如果要印刷，检查描摹出来的颜色是否是你想要的准确色值，因为描摹工具会把相近的颜色平均到一起。

如何在Inkscape里把JPG转成SVG

Inkscape是一款免费、开源的矢量编辑器，支持Windows、Mac和Linux。它的描摹功能可控性更强。它自己的手册也提醒，不要指望得到和原图完全一致的复制品，这其实也是对描摹的一个公允总结。

1. 打开Inkscape，导入JPG或PNG（“文件”>“导入”，或直接拖到画布上）。
2. 选中图像。
3. 选择路径 > 描摹位图，或按Shift+Alt+B。
4. 选择一种模式。亮度截止会生成单色剪影，适合黑色标志和签名。中心线描摹会把细线条变成单线，适合手写字。多次扫描会把多种颜色描摹成各自独立的图层。
5. 点击应用。描摹出的路径会放在原图的上方。
6. 把结果拖到一旁进行比较，然后删除原来的位图。
7. 用文件 > 另存为保存，并选择SVG格式。

“多次扫描”能给出更多颜色细节，但会产生许多相互重叠的对象，需要清理。先从较少的颜色开始，需要时再增加。

如何得到更干净的描摹结果

质量大部分来自输入的图像。花几分钟做准备，差别会很大。

• 从你能找到的最大、最清晰的版本开始。每条边缘上的像素越多，曲线越平滑。
• 用裁剪工具裁掉标志以外的一切，免得零星的痕迹也变成形状。
• 去除或拉平背景。纯白或透明的背景，比有纹理的背景描摹效果好得多。
• 减少颜色。对于单色标志，先用黑白照片工具把它转成黑白并提高对比度，能帮助描摹工具找到干净的边缘。
• 不要用太小的源图。100像素宽的标志边缘信息太少，曲线在任何尺寸下都会显得坑坑洼洼。

描摹后，放大查看转角和小字。描摹工具往往会把尖角磨圆，把挨得很近的字母粘在一起。如果出现这种情况，换一张更大的源图，或者手动修正这些地方。

什么时候该重新绘制，而不是描摹

如果标志很重要，比如要用在招牌或T恤上的公司品牌，描摹结果只是一个起点。设计师可以以描摹结果为参考，在矢量编辑器里重新绘制，得到干净、精简、颜色准确的路径。

在做这些之前，先问问标志的制作者要原始矢量文件。设计师给的AI、EPS、PDF或SVG文件，永远比描摹结果好。如果你只需要某个特定尺寸的清晰图片，一张高分辨率PNG可能就够用，根本不用转换。

反过来转换就简单多了，因为SVG可以渲染成任意像素尺寸。打开SVG文件并保存为PNG或JPG的指南介绍了具体方法。

常见问题