SVG → Lottie:粘贴静态图,自动补动画,导出可运行 JSON

动画即数据那页说清了 Lottie 的本质——把关键帧这套「时间→值」的 IR 序列化成 JSON,交给运行时渲染器逐帧插值。本页把这个结论做成可运行的工具: 左边粘贴一张静态 SVG,选一个入场 / idle 预设自动补上关键帧,即时生成一份真正的 Lottie JSON, 右边交给工业渲染器 lottie-web 当场播放,并可复制 / 下载导出。

这页刻意走出系列其余各页坚持的手写 @vega/anim——目的正是产出一份工业格式的真实产物, 把 descriptor(我们手写解释器播放)与 CSS 之外的动画做法(lottie-web 播一份手写 JSON)之间缺的实战环节补齐: SVG → 补关键帧 → 序列化 → 工业渲染器播放。

粘贴 SVG · 选预设 · 生成

解析时把 SVG 的每个顶层元素拆成一个 Lottie 图层:circle / ellipse / rect / line / polygon 与只含 M/L/H/V/C/S/Q/T/Z 的 path 直接转成原生矢量 shape layer(el / rc / sh + fl / st); 遇到椭圆弧 A、渐变 / 滤镜、带 transform 的元素或 <g> 整组, 则把那一块降级为内嵌 SVG 的 image layer(ty:2)回退——任意 SVG 都能播,只是它不再逐形状矢量。

静态 SVG(可编辑)

lottie-web 现场播放

—

— 正在加载 lottie-web …(CDN)—

导出:这份 JSON 就是整段动画的全部

生成的不是截图、不是视频,而是一份矢量的关键帧数据。改任意一个数即改动画,任意分辨率不糊; 因为它编译成一条可被纯函数采样的时间轴,lottie-web 的 setSpeed / goToAndStop 变速与 seek 全部免费(右上播放台即在调它们)。

—

生成的 Lottie 动画数据 animationData

字段对照:从 SVG 推出了什么

生成的 Lottie 字段,逐项对得上 SVG 的来源与「我们补了什么」:

Lottie 字段	含义	从 SVG / 预设推出
`w` / `h` / `fr` / `op`	画布尺寸 / 帧率 / 总帧数	`viewBox` 定 w/h;fr / op 由滑块给
`layers[].ty`	图层类型	可矢量化元素 → `4` (shape);回退元素 → `2` (image)
`shapes` 的 `el` / `rc` / `sh`	椭圆 / 矩形 / 任意路径	`<circle>`·`<rect>`·`<path>` 几何;path 段转 bezier 顶点
`fl` / `st` 的 `c`	填充 / 描边色	`fill` / `stroke` 解析成 `[r,g,b,a]` (0–1)
`ks` 的 `a` / `p`	锚点 / 位置	元素 `getBBox()` 形心 —— 保证缩放 / 旋转绕中心
`ks` 的 `o/p/s/r` 关键帧	透明度 / 位移 / 缩放 / 旋转轨	预设按层号 + stagger 自动填 `{t,s,e,i,o}`
`tm` (trim path)	路径自绘	Draw 预设:`e` 0→100,= dashoffset 自绘的 Lottie 等价物

「SVG → Lottie」的实质是补关键帧,不是无损格式转换。静态 SVG 只有形状,没有时间维度;Lottie = 形状 + 关键帧动画轨。所以转换器里真正「无中生有」的是动画(本页那几个预设),形状部分只是把几何从一种矢量表示搬到另一种。这也是为什么「让 LLM 把 SVG 转 Lottie」现实可行:Lottie 是纯数据,补关键帧本质是生成结构化 JSON。

能力边界(明示,不静默):本页转换器只覆盖常见 icon 的子集。椭圆弧 A、渐变 / 滤镜、带 transform 的元素与 <g> 整组都走 image 回退——它们仍能播,但不再是逐形状矢量 (缩放 / 旋转以画布中心而非元素形心为轴)。工业级转换(After Effects + Bodymovin、Lottielab)处理面要全得多。

每条轨的值怎么插见插值,逐段快慢见缓动, 多轨多层排到一条轴见关键帧与编排;手写解释器播同类数据见动画即数据,真实工业流程见CSS 之外的动画做法。