工具：Adobe Illustrator（简称Ai）
有Ai软件基础的同学看下教程自己就能操作，不懂Ai的同学，这部分可以直接交给设计师同事。
第1步：导入图片并锁定
打开 Ai，点击左上角菜单栏「文件」-「打开」，导入一张完整的图片。（这张图片是指线条轨迹覆盖的整个画面，导入后以它为背景绘制线条。）
接着点击菜单栏「窗口」-「图层」，打开图层窗口。因为稍后我们要给图片绘制线条，为了防止描绘过程中图片偏移，如下所示，我们先将该图片在图层中锁定。
第2步：用钢笔给绘制线条
在左侧工具栏选择「钢笔」工具，设置描边颜色、粗细，不填充。在图片上选择一个起始点，开始给画面绘制线条。
注意，在 Ai 里给线条设置的颜色、粗细、起点和终点，决定着最终排版中轨迹的颜色、粗细、起点和终点。
另外因为排版时图片拼接原因，最终图文中轨迹终点停留的位置可能略低于在Ai中绘制的位置。如果最后预览图文时觉得影响效果，可以在Ai中把轨迹终点向上绘制一些再导出轨迹长度和代码。
第3步：查看线条轨迹长度
线条轨迹绘制完毕后，点击选中线条。
接着点击菜单栏「窗口」-「文档信息」，在「文档信息」面板点击右上角的三条杠，选择「对象」。这时就会看到路径的长度，也就是线条轨迹的长度。注意单位为像素（px）。
把这个长度记录下来备用，或者直接填写在编辑器「轨迹长度」的输入框中。
第4步：导出线条轨迹的SVG代码
点击菜单栏「文件」-「存储为」，在弹出的窗口中选择格式为「SVG(svg)」，接着点击「存储」。
在出现的窗口中点击「更多选项」，然后把图像位置设置为「链接」，CSS属性设置为「演示文稿属性」后，点击「SVG代码」。
此时会看到代码中有一个几乎全是数字的<path>标签，这个就是我们需要的线条轨迹代码啦。
完整复制这段<path>标签代码保存到一个txt文档中备用，或者直接粘贴在编辑器「轨迹代码」的输入框中。
