# 在线svg动画编辑器svglow.cn

*Published:* 2026-04-28
*Author:* 飞翔001

svg动画编辑器，让你无需写代码，直接给 SVG 文件添加动画。以下是最快的上手方式：

![](https://www.xarjtc.com/wp-content/uploads/2026/04/80094c6d485cec2.webp)

上传 SVG 文件（拖拽、点击上传或粘贴代码）  
在左侧图层面板点击任意元素选中它  
在右侧动画面板选择动画类型（旋转/缩放/淡入…）  
调整参数（时长、延迟、缓动），预览实时更新  
点击「导出」下载含动画的 SVG 文件

✦ 动画类型  
SVGlow 支持 12 种动画类型：

↻ 旋转 — 绕 X / Y / Z 轴旋转，可设置角度  
⊹ 缩放 — 从 scaleFrom 缩放到 scaleTo  
◑ 淡入淡出 — 控制透明度变化  
↔ 位移 — 沿 X/Y 轴平移  
⊸ 描边跑马灯 — stroke-dashoffset 滚动  
● 闪烁 — 交替显示/隐藏  
◐ 颜色过渡 — fill 或 stroke 颜色渐变  
⧖ 斜切 — skewX/skewY 变形  
⟿ 路径运动 — 沿 SVG path 轨迹移动  
✍ 手绘描边 — stroke-dasharray 自描边效果  
🌀 弹簧物理 — 基于 stiffness/damping/mass 的弹性动画  
✎ 逐字显现 — 文字元素逐字符淡入

◑ 多层动画  
单个元素可以叠加多个动画（如「旋转 + 淡入」「缩放 + 颜色变化」）：

选中元素后，右侧面板顶部显示动画层 Tab（\[↻ 动画1\] \[+\]）  
点击 \[+\] 添加新动画层，每层独立配置参数  
导出时自动合并为 animation: anim1, anim2; CSS

⏱ 时间轴  
时间轴面板让你直观地调整所有元素的动画时序：

顶栏点击「⏱」按钮展开底部时间轴面板  
每行代表一个有动画的元素，彩色色块 = delay + duration  
拖拽色块左边缘 → 改变 delay（开始时间）  
拖拽色块右边缘 → 改变 duration（持续时长）  
点击行选中该元素，右侧面板联动更新

✦ 一键套餐  
动画套餐让你一键为所有元素套用整套动画方案，无需逐个配置：

顶栏点击「✦」按钮打开套餐面板  
选择一套方案：逐个淡入 / 全部弹跳 / 从左飞入 / 心跳律动 / 旋转渐隐  
一键写入所有元素，自动递增 stagger 延迟

⬇ 导出方式  
SVGlow 支持多种导出格式：

SVG — 含 <style> 动画的完整 SVG 文件，可直接嵌入网页  
GIF — 点击「GIF」配置帧率/尺寸后生成（纯前端，gif.js）  
🖼 APNG — 点击「🖼」导出 Animated PNG，比 GIF 支持透明通道，颜色更丰富，纯前端生成无需服务器  
CSS — 点击「{ }」一键复制完整 CSS 动画代码  
Lottie — 点击「🎬」下载 .lottie.json（支持 fade/rotate/scale/translate）  
🎥 WebM 视频 — 点击「🎥」录制为 WebM 视频，可在浏览器/编辑器中直接播放  
分享链接 — 点击「⤴」生成 7 天有效预览链接

✨ AI 功能  
SVGlow 内置 AI 动画助手，让不懂动画的用户也能快速上手：

顶栏点击「✨」展开 AI 面板  
「生成」标签：用自然语言描述效果（如「让太阳慢慢旋转，星星闪烁」）  
「分析」标签：AI 自动识别 SVG 元素语义，建议动画类型，并重命名 path1/g2 等无意义 ID  
预览 AI 建议后点击「应用」一键写入

在线网址：https://svglow.cn/