如何将Lottie JSON文件转换为动画SVG以适配Web项目？

CLI 工具方案 #

1. lottie-to-svg-cli #

• 安装：npm install -g lottie-to-svg-cli
• 转换命令：lottie-to-svg 你的动画文件.json 输出文件.svg
• 优势：一步到位转成带SMIL动画的SVG，基本不用后续调整，大部分Lottie里的位移、缩放、透明度动画都能完整保留，上手零成本。

2. lottie-cli #

• 安装：npm install -g lottie-cli
• 转换命令：lottie convert --format svg 你的动画文件.json 输出文件.svg
• 优势：基于lottie-web核心开发，支持批量转换，能保留原动画的关键帧时间线，很适合集成到项目的构建脚本里自动处理。

JavaScript 库方案 #

1. lottie-svg #

• 代码示例（Node环境）：

import { convertLottieToSvg } from 'lottie-svg';
import fs from 'fs';

const lottieJson = JSON.parse(fs.readFileSync('./你的动画文件.json', 'utf8'));
const svgString = await convertLottieToSvg(lottieJson);

fs.writeFileSync('./输出文件.svg', svgString);

• 优势：纯JS库，浏览器和Node环境都能用，转换后的SVG直接内嵌动画，不用额外依赖，适合需要动态生成SVG的场景。

2. lottie-to-svg #

• 代码示例：

const lottieToSvg = require('lottie-to-svg');

lottieToSvg.convert({
  input: './你的动画文件.json',
  output: './输出文件.svg'
}).then(() => {
  console.log('转换完成');
});

• 优势：支持自定义配置，比如调整动画帧率、裁剪动画时长，转换后的SVG兼容性不错，适合需要微调转换结果的情况。

小提示 #

• 要是你的Lottie里有3D变换、复杂表达式动画，可能没法100%转成SMIL动画，建议先拿核心效果测试下。
• 如果导出的SVG在旧浏览器跑不动，可以补个svg-animation-polyfill做兼容，但优先选转换效果好的工具，尽量减少后处理。

内容的提问来源于stack exchange，提问作者sebastian plata