把位图描边换成可编辑路径 / LineSVG 描摹手绘草稿的导出顺序

文章导读
如果原始素材是手绘照片或截图,想得到能随时改线宽的矢量线稿,真正容易把后续修改锁死的不是阈值高低,而是顺序:先把原图定稿成干净的黑白稿再进描摹;描摹结果尽量保留为中心线描边,而不是转成填充轮廓;导出后打开 SVG 确认线宽写在哪个节点上;最后按粗细分层,把批量调整的余地留出来。任何一步倒过来做,后面想改线宽往往只能重描。
📋 目录
  1. Ⅰ 先把原图处理成高对比的黑白稿再进描摹
  2. Ⅱ 调描摹阈值,观察断线与线条粘连哪个先出现
  3. Ⅲ 选择保留描边还是转成填充路径
  4. Ⅳ 导出 SVG 后打开文件确认线宽属性写在路径上
  5. Ⅴ 按粗细分层再导出一次,方便后续统一调整
A A

如果原始素材是手绘照片或截图,想得到能随时改线宽的矢量线稿,真正容易把后续修改锁死的不是阈值高低,而是顺序:先把原图定稿成干净的黑白稿再进描摹;描摹结果尽量保留为中心线描边,而不是转成填充轮廓;导出后打开 SVG 确认线宽写在哪个节点上;最后按粗细分层,把批量调整的余地留出来。任何一步倒过来做,后面想改线宽往往只能重描。

适用场景:手绘照片、扫描稿、截图要转成可编辑的矢量线稿。操作动作:先做对比度与去噪处理,再调描摹阈值,选择保留描边的输出方式,导出后检查 stroke-width,最后按线宽分层。验证方式:把原图缩到 25% 看灰点是否消失,在导出文件里搜索 stroke-width,改数值刷新页面看线条是否整体变粗。风险边界:线条一旦被转成填充轮廓,线宽就变成几何形状的宽度,批量调粗细需要重描或用偏移路径,代价明显更高;阈值也没有通用数值,要按当前这张原图逐档试。

先把原图处理成高对比的黑白稿再进描摹

直接把手绘照片丢进描摹,最常见的结果是断线和毛刺混在一起:纸张阴影、铅笔擦痕、扫描噪点会被阈值当成线条保留,同时浅色笔画本身的灰度过渡带又被切碎,线条变成一段段虚线。先处理到接近二值(纯黑与纯白)的黑白稿再描摹,边缘会更收拢,同一阈值下主线更容易连起来。

  • 处理前:放大到 200% 看线条边缘,通常有 2–4 像素宽的灰过渡带;缩到 25% 看整图,纸面上常散布着零碎灰点。
  • 处理后:过渡带收窄成一条边,灰点基本消失,剩下的断线只集中在笔画本来就轻的地方。

什么情况下要先手动清理而不是继续调阈值:画面里有网格纸、透视辅助线、擦不干净的铅笔痕、两种以上笔色重叠、扫描摩尔纹或高压缩截图的块噪。这些噪声一旦被阈值化就变成实心线或黑斑,后期在矢量里一条条删比在位图里擦掉慢得多。可以先在原图层上用橡皮或选区把它们去掉,或者把深色主线和浅色辅线拆成两张位图分别描摹。

调描摹阈值,观察断线与线条粘连哪个先出现

阈值的作用是把灰阶判成黑或白,所以它只有两个失败方向:一档太低,浅灰被判成黑,线条变粗、纹理变成噪点、相邻笔画粘在一起;一档太高,只有最深的像素留下,笔画中段开始出现断口。调整过程就是在两种失败之间找一个主线连续的中间值。

把位图描边换成可编辑路径 / LineSVG 描摹手绘草稿的导出顺序
  1. 偏低档:整幅图看着很「实」,但拐角和交叉处的线条粘成一团,纸纹也变成小黑点,这时需要往上调。
  2. 中间档:主线基本连续,只有轻笔画的辅线出现断口。这通常是可用的起点,断口可以手动补,也可以只对局部重描。
  3. 偏高档:主线也开始碎,描摹出来的路径段数反而变多,每一段都要接,编辑量明显上升。

取舍标准建议先保主线连续,允许辅线断。断线可以手动接,或降一档只重描那一片;粘连的线条拆起来更麻烦。不同工具的取值范围不一样(有的是 0–255,有的是 0–1),所以具体的数字没有通用值,这一档只是调试起点,换一张原图需要重新试。调好之后先把这份黑白稿另存下来,再进描摹,后面要换阈值还能退回这一步。

选择保留描边还是转成填充路径

这一步直接决定导出后还能不能改线宽。描摹工具一般有两类输出:一类把笔迹中心抽成一条线,输出为带描边的路径,fill 为空、stroke 有色、stroke-width 有值;另一类沿笔画两侧轮廓描一圈,输出为闭合填充形状,fill 有色而没有描边宽度。两者外观可以接近,编辑方式完全不同。

  • 保留描边:改线宽就是把 stroke-width 的数值换掉,整层线条可以一起变粗变细;线条本身是一条几何路径,节点相对少,后期调形状也方便。
  • 转成填充轮廓:线宽已经变成形状的宽度,想改粗细只能重新描摹、重做偏移路径,或者手工把填充转回描边,节点数量通常也更多。

可验证的判断方式:导出后选中一条线,看属性面板显示的是描边宽度还是填充;或者用文本编辑器打开 SVG,搜索 stroke-width,搜得到说明线宽是可改属性,只看到 fill 一类的填充声明,基本就是轮廓填充。如果工具两种模式都提供,做线稿时优先选中心线描边那种输出。

导出 SVG 后打开文件确认线宽属性写在路径上

导出不是终点,要先确认 SVG 里真的有可改的线宽。下面是一个最小骨架,用来核对几何路径和线宽属性各在什么位置:

把位图描边换成可编辑路径 / LineSVG 描摹手绘草稿的导出顺序
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'>
  <g id='line-main' fill='none' stroke='#111'
     stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
    <path d='M10 100 C 40 20, 90 20, 120 90' />
    <path d='M120 90 L 180 30' />
  </g>
</svg>

路径节点是 d 里的一串坐标,描述线条走向;线宽写在 stroke-width 上。写在 g 节点上会继承给组里所有 path,线条粗细一致时这样写最省事;要单独调某一条,把 stroke-width 放到那条 path 上覆盖组里的值即可。替换数值后保存,浏览器或编辑器刷新就能看到粗细变化。检查点有三个:文件里能搜到 stroke-width;viewBox 存在且比例与原图接近,缺了会导致缩放和坐标错位;如果描摹结果全是 fill 而没有 stroke-width,说明前面选了轮廓填充,需要回到描摹步骤重选输出方式。

按粗细分层再导出一次,方便后续统一调整

描摹输出往往把所有线条塞进一个组里,主线辅线粗细一致,画面看着发平。与其一条条改,不如按粗细和用途分层,再导出一次。

  • 分层依据:按线宽分(主线、辅线、细衬线),或按用途分(轮廓线、内部细节线、阴影排线)。同一层的线宽保持一致,不同层之间拉开差距。
  • 命名方式:给每层一个可读的 id,例如 line-main、line-aux、line-detail,名字里带上默认粗细更好认,如 line-aux-1。避免 layer1、layer2 这类无意义名字,后面调整时要靠猜。

分层后的统一调整顺序:先确认子 path 上没有被本地覆盖的 stroke-width,再改组节点的值,最后刷新回看。检查点可以这样设:把主线组的 stroke-width 从 2 改成 3,如果整层线条一起变粗,说明属性在组上生效;如果只有部分线条变化,说明个别路径带了自己的 stroke-width,需要先把它们统一或去掉。分组时也别把描边层和填充层混在一起,混在一起会导致一次改值只影响其中一部分,和「统一调整」的目标正好相反。