图片转 SVG:如何得到 Illustrator 里真正可编辑的描边线稿

一位负责说明书排版的设计师收到一批产品线稿。客户只有一个要求:所有线条加粗一点,免得报纸级的印刷把图印糊。文件是 SVG,这本该是三十秒的活——全选,把描边粗细调大,收工。可第一个文件在 Illustrator 里打开后,根本没有可调的描边:每条"线"其实都是一个细长的填充图形,两条平行的轮廓边中间填了黑色。想改线宽,只能一条条手动偏移路径,三十秒的活变成了一下午。

如果你搜过"图片转 SVG",拿到过这样的文件,问题不在 Illustrator,也不在你,而在 SVG 被描摹的方式。

为什么有些 SVG 到了 Illustrator 里还是难编辑

"SVG"只说明了容器格式,不保证里面的内容怎么构成。大多数免费的图片转 SVG 工具——包括 Illustrator 自带的图像描摹默认设置——的原理是找出深色区域的边缘,再用填充路径把每块区域包起来。Adobe 的图像描摹官方文档描述的正是这件事:位图变成矢量形状。对 Logo、剪影、激光切割来说,这是正确答案。

但对技术线稿来说是错误答案。画出来的一条线,经过轮廓描摹,会变成一个填了黑色的细长多边形。缩放没问题,打印也没问题——可技术图纸上最常见的需求"改线宽",却不再是一个可编辑的属性。Illustrator 社区里反复出现"为什么描摹出来的是线条外轮廓,而不是沿线条中心的路径"这类提问,原因就在这里。

说明书、IFU、组装指南真正需要的是描边式 SVG:每条可见的线都是一条 fill: none、带 stroke-width 的路径,沿着笔画的中心线走。这样线宽就只是一个数字,Illustrator 里一次编辑即可全局调整。

填充轮廓 vs 描边中心线,一张表看懂

Illustrator 的图像描摹里确实有"中心线"描边模式,但它针对简单的等宽图形调校,遇到真实的产品图容易把曲线描碎、把相邻的线粘连。更可靠的路线是在生成阶段就产出描边式 SVG,而不是描摹之后再修。

工作流一——简单图形:直接生成 SVG

如果图形相对简单——一件工具、一块操作面板、一张手势示意图、一个单体产品视图——直接用文字描述它,把 SVG 作为原生输出格式生成。ManualFig 会把提示词交给描边原生的 SVG 模型,路径从出生起就是中心线式的描边,而不是事后描摹出来的。

下面这盏台灯就是选择 SVG 输出模式后,由这段提示词直接生成的:

这个文件(下载 SVG,4.3 KB)内部共 38 个元素——28 条路径、7 个圆、2 条直线、1 条折线——每一个都是 fill: none 加描边。整幅图实际只用了一档线宽(1000×750 的 viewBox 下为 2.5),在 Illustrator 里打开就是一组干净、均匀的描边。

工作流二——复杂图形:先生成图片,再转换成 SVG

直接生成 SVG 有复杂度上限。机械细节多、内部结构密、比例要求高的图,还是先用光栅图更容易画准——模型可以自由发挥。这类图走两步:先生成(或上传)光栅线稿,把内容彻底改对,再转成 SVG。

这是我们先生成的光栅台灯(普通 PNG 线稿):

这是同一张图在 ManualFig 里一键转换成 SVG 后的结果:

转换后的文件(下载 SVG,3.8 KB)共 33 个元素。线稿部分——支臂、铰链、底座的椭圆——都是描边式,线宽集中定义在 6 个 CSS 类里,Illustrator 里既可以按类也可以按选区重新调整。另有 2 个元素是填充图形:实心的箭头尖。这一点值得说清楚:

这就是当前技术的诚实现状。箭头尖这类本来就该实心的记号,保持填充反而正确;关键是图面本身——那些你以后要改粗细的线——以描边形式到手。

同一盏台灯,两条路径,差异在哪

把上面两个文件都下载下来,在 Illustrator 里并排打开——选择和改样式时的手感差异,比任何截图都有说服力。

在 Illustrator 里统一调整描边宽度

拿到描边式 SVG 之后,开头那个"全体加粗"的活确实只要三十秒:

1. 在 Illustrator 中打开 SVG(要编辑就用"打开",不要用"置入")。
2. 选择 → 全部,在控制栏或描边面板里输入新的描边粗细——所有带描边的路径同时更新。
3. 想局部调整,用选择 → 相同 → 描边粗细,把同一档线宽(比如主轮廓和铰链细节)单独抓出来分别处理。
4. 缩放前确认**"缩放描边和效果"**(首选项 → 常规)的勾选状态,让线宽是"有意跟着缩放"还是"有意保持不变",而不是碰运气。

转换出来的文件把线宽收敛在少数几个类里,所以第 3 步特别好用:上面那盏台灯的 6 档线宽,用起来就像 6 层命名好的线条层级。

转换前需要先去背景吗

就转换而言,白底或纯色背景能让描摹器明确图形边界,所以 ManualFig 生成的线稿图直接转就很干净。如果要转的是背景杂乱的照片或截图,先把它转成线稿(参见照片转线稿指南),不要直接矢量化照片——把摄影的明暗直接矢量化,得到的正是本文想帮你避开的那锅"填充区域大杂烩"。

最终交付选 PNG 还是 SVG

一句话版本:图只在一个地方、一个尺寸出现,用 PNG;会在两个以上尺寸出现,或下游有人要改样式,用 SVG。详细的判断标准见产品线稿使用指南。同时要出印刷版和网页版的说明书,把描边式 SVG 当原本存档最稳妥:降级成 PNG 只是一次导出,而线宽永远只差一次编辑。

用你自己的图试试

本文的两盏台灯都出自同一个工具,没有任何手工清理:

1. 打开 ManualFig,用文字描述你的图——或上传一张现有图片。
2. 直接生成就把输出模式切到 SVG;先生成了图片,就在结果上点转换为 SVG。
3. 把导出的 SVG 在 Illustrator 里打开,按需要重新调整描边。

图简单,就直接生成 SVG;要细节,就先把图片改对再转换。两条路,线条到手时都是线条——而不是伪装成线条的轮廓。

相关工具：带图说明书生成器、照片转说明书线稿。