SVG 矢量导入——把设计稿直接变成动效素材

为什么要导入 SVG

Lottie Creator 自带的形状工具（矩形、椭圆、星形、钢笔路径）对于简单形状够用，但对于复杂图标、插画、Logo 等，手工在浏览器里绘制成本太高。SVG 导入功能让你可以在 Figma / Illustrator / Sketch 里把设计稿导出为 SVG，然后直接拖进 Creator，保留所有路径细节，再在 Creator 里给各个路径加动画。

导入方式

方式一：拖拽

直接把 .svg 文件拖到 Creator 画布区域，自动解析生成形状图层。

方式二：粘贴

从 Figma / Illustrator 选中矢量元素后按 Ctrl+C，回到 Creator 里 Ctrl+V 粘贴——SVG 直接变成形状图层出现在画布上。

方式三：左侧面板导入

左侧面板有专门的 SVG 导入按钮，点击后选择本地文件。

导入后能做什么

导入的 SVG 会被拆解为独立的形状子图层（group），你可以：

• 给每个子图层分别加关键帧动画（位移、缩放、旋转、不透明度）。
• 把 SVG 路径作为 Clip Path（裁切路径）使用。
• 用 SVG 的路径数据生成 Trim Paths（修剪路径）动画效果——描边动画、路径绘制动画。
• 修改填充色、描边颜色——Creator 会把 SVG 里的颜色值保留在形状属性里。

注意事项

• 文字转轮廓：如果 SVG 里有 <text> 元素，导入前最好在源文件里转成轮廓（Outline），否则 Creator 可能无法正确解析。
• 渐变兼容性：简单线性渐变可以导入，复杂的渐变可能需要手动调整。
• 滤镜效果丢失：SVG filter（模糊、阴影等）导入后会丢失——这些效果在 Lottie 里不支持，需要换思路实现。
• 路径数量：太复杂的 SVG（上百条路径）导入后文件体积会很大。在源工具里尽量简化路径。

典型用法

在 Figma 里做好一个图标或插画 → 复制 → 粘贴进 Creator → 给各个路径组加淡入、修剪路径、位移动画 → 导出 JSON。整个流程从设计到动效，在两个工具间切换、不经过任何中间文件。