动画 SVG 线稿：一键做逐笔绘制动画
2026/10/30

动画 SVG 线稿：一键做逐笔绘制动画

把线稿做成会自己「画出来」的动画 SVG：选择逐笔绘制、逐个淡入或智能动效，设置时长和顺序，预览后保存，再导出 SVG、MP4 或 GIF。

一张会在屏幕上自己「画出来」的线稿，比静态图更抓眼球。传统做法是手写：打开 SVG，找到每条路径，写 CSS，再一点点调时间。这篇讲清楚动画 SVG 的原理，以及怎样不写代码，直接把 LineSVG 里的线稿做成动画。

快速回答： 在 LineSVG 里生成或打开一张已完成的线稿，点结果工具栏里的「动画」，选一种风格：逐笔绘制、逐个淡入或智能动效。设置时长（1–12 秒）、顺序和是否循环，预览后保存。网页用 SVG，社交平台和邮件导出 MP4 或 GIF。

一张一笔画人像在屏幕上逐笔画出 一笔画人像，逐笔绘制风格，5 秒，循环播放。

动画 SVG 是什么

动画 SVG 就是一个普通的 SVG 文件，只是里面写好了动画规则，通常是 CSS。它没有视频轨道，也没有一帧帧的画面，浏览器读取图形和动画规则后直接播放。这带来三个实际好处：

  • 任何尺寸都清晰。 它依然是矢量图，从小图标放大到整屏头图都不会糊。
  • 文件很小。 一张线稿加上动画，往往只有几 KB 到几十 KB；同样内容做成视频或 GIF，通常大得多。
  • 像图片一样播放。 现代浏览器里，把 SVG 放到网页上就会自动播放，不需要播放器或插件。

「逐笔绘制」的效果靠一个小技巧：每条描边都有长度。先把描边变成一段很长的虚线，空白和线段一样长（stroke-dasharray），再把虚线整体挪开，让画面上只露出空白（stroke-dashoffset）。然后把这个偏移量动画回 0，线条看起来就是沿着路径一笔笔画出来的：

path {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: draw 4s ease forwards;
}
@keyframes draw {
  to { stroke-dashoffset: 0; }
}

手写的话，要给每条路径量长度、设延迟、排顺序。这部分 LineSVG 会替你完成。

为什么逐笔绘制需要可编辑描边

上面的技巧只对描边有效，也就是有一条路径、带线宽设置的线。很多看起来像线稿的 SVG，文件里其实是细长的填充形状：两条边中间涂满颜色。填充形状没有一条可以「走」的路径，所以画不出来，最多只能淡入或缩放出现。两者的区别可以看描边、轮廓还是填充和SVG 是矢量，为什么线宽还是改不了？

所以在做动画之前，输出类型就很关键。LineSVG 的「线条可调」输出的是真正的描边，生成后还能调整线宽、颜色和虚线，这样的线条逐笔绘制效果最干净。如果画面里有少量填充形状（比如实心的眼睛或圆点），逐笔绘制照样可用：描边沿路径画出，填充形状改为淡入。

在 LineSVG 里做动画 SVG

  1. 先做出线稿。 在线稿生成器里输入描述，或在照片转线稿上传照片，也可以试试一笔画，连续线条的人像做成逐笔绘制特别好看。输出类型选「线条可调」。
  2. 先保存修改。 动画使用的是已保存的线稿。如果调过线宽、颜色或虚线，要先保存这个版本，否则改动不会进入动画。
  3. 点「动画」。 任何已完成的线稿，结果工具栏里都有这个按钮。
  4. 选风格。 逐笔绘制、逐个淡入或智能动效（对比见下文）。
  5. 设置时长、顺序和循环。 逐笔绘制和逐个淡入可以在浏览器里实时预览。
  6. 保存动画版本。 保存消耗 10 积分，和生成一次相同。
  7. 导出 为 SVG、MP4 或 GIF。

动画版本不能再次做动画。想换风格或时长，回到原始线稿重新做即可。

一枝植物线稿从上到下逐笔画出 逐笔绘制，从上到下，6 秒，循环播放。

三种动画风格对比

风格效果适合预览费用
逐笔绘制每条描边沿路径显现，像有人用笔在画线稿、一笔画人像、签名、Logo 出场浏览器内免费实时预览保存 10 积分
逐个淡入图形一个接一个出现含填充形状的图、图标、更柔和的出场浏览器内免费实时预览保存 10 积分
智能动效模型读懂画面后加入动作，比如车轮转动、眼睛眨动角色、有活动部件的物体、俏皮的循环动画无免费预览（远程生成）每次 10 积分

使用智能动效时，可以用最多 300 个字符描述想要的动作（比如「猫尾巴慢慢摆动」），也可以留空，让模型自己决定。每次运行智能动效都会得到新的结果。

下面是同一枝植物换成逐个淡入，方便对比：

同一枝植物线稿从左到右逐个图形淡入 逐个淡入，从左到右，4 秒，循环播放。

逐笔绘制像是有人在现场画；逐个淡入更像画面被一块块拼起来。

让动画好看的几个设置

时长（1–12 秒，默认 4 秒）。 按线条多少来定。简单的图标或签名 2–3 秒最好看；细节多的人像或植物需要 5–8 秒，否则线条一闪而过，看不清过程。用作网站头图时宁短勿长，访客应该很快看到完整画面。

顺序。 决定哪些线条先出现：

  • 从左到右：适合横向的画面、类似文字的笔画和风景。
  • 从上到下：适合纵向的主体，比如植物、站立的人物，或从发际线画到下巴的脸。
  • 文件顺序：按文件里路径的先后。对一笔画来说，通常就是沿着线条原本的走向。
  • 先长后短：长线条先出现，主要形状会先于小细节出场。

在预览里多试两种顺序，留下看起来最自然的那个。

循环。 头图、侧栏插画这类一直停留在屏幕上的装饰，适合打开循环。循环播放时，画完会在完整画面上稍作停留再重新开始，让人有时间看清整张图。一次性的出场，比如页面顶部的 Logo，就关掉循环。

重复保存。 同一张线稿用相同的逐笔绘制或逐个淡入设置再次保存，LineSVG 会直接返回之前的版本，不会重复扣积分。改了设置则会生成新版本。

动画 SVG 用在哪里

  • 网站首屏。 一段简短的逐笔绘制插画，带来动感，又不用加载沉重的视频。
  • Logo 出场。 线条 Logo 在页面加载时画出一次，关闭循环。
  • 博客、作品集和产品页。 在功能介绍旁放一个小小的动画插图或图标。
  • 邮件。 这里要小心：很多邮件客户端不执行 SVG 里的 CSS 动画，有些甚至不显示 SVG。邮件请导出 GIF。
  • 社交媒体。 社交平台要的是视频，发帖和快拍请导出 MP4。

导出：SVG、MP4 还是 GIF

动画版本可以导出为 SVG，也可以直接在浏览器里导出 MP4 和 GIF。

  • SVG：网站首选。任何尺寸都清晰、加载轻、自动播放，像普通图片一样插入，或直接内联到页面里。
  • MP4：适合社交媒体、演示文稿和视频剪辑软件。MP4 编码需要浏览器支持，Chrome、Edge 或 Safari 可以；其他浏览器请改导出 GIF。
  • GIF：几乎哪里都能播放，包括邮件和聊天软件。代价是体积和画质：GIF 比 SVG 大，而且最多 256 色，黑色线稿没问题，细腻的彩色作品就不太理想。

常见问题

能给现有的 SVG 做动画吗？

动画功能针对保存在 LineSVG 里的作品。上传的 .svg 文件会在「编辑 SVG」里打开，描述一处修改并保存后（10 积分），它就成了可以做动画的 LineSVG 作品。也可以把作品导出成 PNG、JPG 或 WebP，先用照片转线稿转一遍。想要最干净的逐笔绘制效果，尽量用真正的描边（线条可调）；填充形状会改为淡入。

动画 SVG 比 GIF 好吗？

在网站上，通常是的。动画 SVG 任何尺寸都清晰，体积往往也比同内容的 GIF 小得多。邮件等不播放 SVG 动画的场合，GIF 更稳妥，所以 LineSVG 两种都能导出。

动画 SVG 在所有浏览器里都能播放吗？

当前主流浏览器，包括桌面和手机上的 Chrome、Edge、Firefox 和 Safari，都支持 SVG 里的 CSS 动画。主要的例外是邮件客户端，那里请用 GIF。

做动画之前能改线稿的样子吗？

可以。「线条可调」输出可以调整线宽、颜色和虚线。改完记得先保存，因为动画使用的是已保存的线稿。

要多少钱？

保存一个动画版本消耗 10 积分，和生成一次相同。逐笔绘制和逐个淡入可以免费实时预览，同一张线稿用相同设置再次保存不会重复扣费。智能动效没有免费预览，每次运行 10 积分。新账号赠送 10 个欢迎积分，够生成一次。具体套餐见价格页。

做你的第一张动画线稿

先选一张描边清晰的线稿。用一笔画做的人像，或在线稿生成器里生成的简单植物，都很适合第一次尝试。点「动画」，分别预览逐笔绘制和逐个淡入，挑一个最自然的顺序，保存。然后网站用 SVG，其他地方导出 GIF 或 MP4。

全部文章

更多文章