图片

B 站UP主做一个量子计算主题，需要几个原理示意图动画——粒子叠加态、量子纠缠、测量坍缩。总长大概两分钟。

我的第一反应开 AE。建合成、配动画、调缓动，一个分镜二十多分钟起步。第二反应手写 SVG SMIL——写  标签，调 viewBox，算坐标变换矩阵。弄到第三个分镜放弃了，因为每个分镜都要重新算坐标系，而 animateTransform 的旋转中心还要考虑矩阵乘法顺序。

然后试了 SVGAnimate.ai。输入一段话，直接吐 SVG 源码。浏览器渲染，满意导出。

不是说 AI 生成 SVG 这件事有多新鲜——新鲜的是输出的代码能跑、动画流畅、坐标系统没崩、缓存预热后生成速度在 30-40 秒级别。这篇文章拆一下它是怎么做到的，以及做到什么程度。

为什么这篇不讨论"AI生成视频"

Sora、Runway 那套扩散模型的本质逻辑是像素级生成——从高斯噪声逐步还原图像分布。这决定了几个结构性问题：

  • 帧级颗粒度

    ：输出是 MP4，你改不了中间帧，只能重新生成

  • 不可解释性

    ：模型学到的视觉记忆分布在 latent space 中，无法按需求精确控制某个对象的运动参数

  • 成本结构固定

    ：生成 5 秒和生成 30 秒的 token 消耗量级不同，但单位时间成本下不来

SVG 生成走的是另一条路线——代码生成。输出的不是像素，是声明式指令： 配合  描述"3 秒内从 A 点移到 B 点"。浏览器就是渲染器。

这两条路线的优劣对比很清楚：

维度

像素生成（Sora/Runway）

代码生成（SVGAnimate）

输出粒度

帧

声明式标签

可编辑性

无（需重生成）

有（源码级）

单帧精度

像素级（照片级逼真）

矢量级（无限缩放）

体积

MB 级/分钟

KB 级（单文件）

可解释性

低（黑箱）

高（源码可见）

场景上限

任何视觉场景

几何元素（点线面体）

SVGAnimate 选的技术交集就是"放弃逼真，追求精确"。这个选择决定了它的适用边界，也决定了它做不了的事。

生成管线的四层架构

从输入 prompt 到输出可播放动画，实际走了四层处理：

用户 prompt
  → ① Prompt Enrichment（提示词富化）
    → ② Style Template Injection（风格模板注入）
      → ③ Gemini 3.1 Pro（代码生成）
        → ④ 浏览器渲染 + 捕获导出

每一层解决的具体问题比表面看起来复杂。

① Prompt Enrichment

这是最容易被低估的模块。Gemini 3.1 Pro 虽然可以理解自然语言，但一个项目中最专业的需求是"生成长度 200 帧的脉冲序列，粒子直径 6px，弹性系数 0.6，碰撞检测阈值 4px"——这种 prompt 用户不可能会写，系统也不可能靠模型自己去猜。

Prompt Enrichment 做的事是把模糊的自然语言输入补全为结构化参数。核心逻辑是两段式：

  1. 实体/动作分类

    ：解析用户输入中的主体（颗粒、线图、流程图）和动作（扩散、旋转、生长），匹配预设的参数模板

  2. 参数注入

    ：从模板中读取对应的动画参数集——粒子数量（通常是 20-200 的幂次范围）、运动速度区间（秒单位）、缓动曲线类型（ease-in-out 还是 cubic-bezier）、配色方案（从色板映射）、坐标范围（基于 viewBox 量级）

注意，这套系统对用户输入有一个最低要求：必须包含 Subject + Action + Detail 三元组。缺 Detail（持续时间、缓动、颜色的十六进制值等精确参数），系统不会自己"猜测"——它会选择空模板直接原样输入给 LLM，结果是质量方差极大。

这也是为什么 Gallery 里部分作品质量明显不及格——用户在 prompt 里说了"做个好看的图表动画"但没给任何技术参数，Enrichment 模块输出质量不足以弥补。

② Style Template Injection

控制审美一致性的手段。

"专业感"、"科技感"、"卡通风"这些抽象描述对 LLM 来说是信息熵极低的——同一个"现代简约"在模型眼里可能和第 50 个训练样本中的"蓝色调"混合在一起输出。

Style Template 做的不是给 LLM 加 system prompt 说"请保持专业风格"——它注入的是具体的样式约束：色板（主色/辅色/背景色的十六进制值）、动画节奏（缓动曲线的默认类型）、构图倾向（居中/左右/分层）、字体权重。

实测下来，同一个 prompt 配不同模板输出确实不同。这不是 LLM 的风格迁移能力，是 injection 层在 prompt 文本中显式写入了色彩和动画参数，让骨架提示词的 entropy 大幅降低。

③ Gemini 3.1 Pro 生成

生成层使用 Gemini 3.1 Pro。模型的职责是从增强后的 prompt 中生成浏览器可执行的 SVG/HTML 代码。

从 Gallery 中提取的代码特征来看，生成的代码中使用了六种动画引擎/库——每个引擎的选型对应不同的动画品类：

动画品类

引擎/技术

选型原因

基础移动/缩放/旋转

SMIL (, )

浏览器原生支持，零依赖

复杂补间（时间线控制）

GSAP 3.12.2

缓动曲线更丰富，TimelineLite 支持链式编排

3D 文字/场景

Three.js

WebGL 渲染，6 个自由度变换

地理/数据可视化

D3.js 7 + TopoJSON

地图投影、数据绑定、Enter/Update/Exit 模式

粒子特效

Confetti.js

高性能 canvas 粒子

图标

Lucide

开源 SVG 图标库，支持按需引入

选择这么多依赖不是技术含量低——是在有限的生成约束下给不同品类选最合适的渲染方案。比如数据可视化用 D3.js 是因为它内置了地理投影（Albers/等角/Mercator）和数据绑定算法，如果用 SMIL 原生实现同样的效果，生成的代码量会爆炸而且在浏览器端的 reflow 成本不可控。

④ 捕获与导出

输出层支持三个前端格式：GIF、MP4、HTML。

GIF 是浏览器端录帧合成；MP4 有两种导出路径：一种是服务端渲染后编码，另一种是 Direct recording（浏览器直接录制）——这是 2026 年 4 月推出的修复方案，解决的是预览和导出不一致的问题。Direct recording 绕过代码解析层，直接在浏览器中对 Canvas/SVG 做屏幕捕获，用 MediaRecorder API 输出 WebM 然后转封装 MP4。这意味着导出的每一帧都和你在浏览器里看到的一模一样——代价是导出时间 = 视频时长 × 1.0~1.3x。

HTML 格式是直接输出自包含的源代码文件。CSS 内联、JS 通过 CDN 引用（GSAP/Three.js/D3.js 从 cdnjs 或 jsdelivr 拉取）、字体通过 @font-face 嵌入或 font-display: swap 配置。这个格式的细节在下一节细说。

生成的代码长什么样

从 Gallery 中的编程教育示例来看，生成的代码结构大致是：

<!DOCTYPE html>
<html>
<head>
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<linkhref="/assets/fonts/AlimamaShuHeiTi-Bold.woff2"rel="stylesheet">
</head>
<body>
<svgviewBox="0 0 800 600">
<!-- SMIL animateTransform -->
<circlecx="100"cy="300"r="8"fill="#3498db">
<animateTransformattributeName="transform"
type="translate"
values="0,0; 200,0; 200,-150; 0,-150; 0,0"
keyTimes="0; 0.25; 0.5; 0.75; 1"
dur="4s"
repeatCount="indefinite"/>
</circle>
<!-- CSS animation -->
<rectclass="bar"x="50"y="400"width="40"height="0">
<animateattributeName="height"values="0; 200; 0"dur="2s"repeatCount="indefinite"/>
</rect>
</svg>
<script>
// GSAP timeline
const tl = gsap.timeline({repeat: -1});
    tl.to(".bar", {height: 200, duration: 1, ease: "power2.out"})
      .to(".bar", {height: 0, duration: 1, ease: "power2.in"});
</script>
</body>
</html>

几个值得注意的技术点：

  • 混合使用 SMIL 和 GSAP

    ：基础几何运动（位移、旋转、缩放）用 SMIL 的 ，嵌套时间线和复杂缓动用 GSAP。判断依据：SMIL 的 keyTimes/keySplines 模型本质上是时间到值的映射表，适合线性/分段运动；GSAP 的 ease 函数支持二次缓动等复杂曲线并自带时间线编排能力——后者的参数控粒度远超 SMIL。

  • 坐标系选择

    ：viewBox 固定为 800×600，所有元素索引在这个空间内。没有出现用 hack 式 overflow 或在 svg 外定位元素的情况。这意味着 LLM 的几何推理在训练数据覆盖范围内是可靠的。

  • CDN 依赖管理

    ：外部库通过 CDN 硬编码版本号加载。如果 cdnjs 挂了输出也挂了。这不算架构缺陷——自包含设计没地方存放 node_modules，CDN 是唯一合理的选择——但意味着离线场景受限。

HTML Video 格式：不是视频，是个页面

2026 年 4 月引入的 HTML Video 输出格式。名字有误导性——它不是视频格式，是一个自包含的、可回放动画的 HTML 文件。

传统动画的输出逻辑：渲染合成 → 编码器压缩 → 二进制文件。拿到 MP4 后想改——重渲染。改一次重跑一次。

HTML Video 的输出逻辑：生成代码 → 自包含 HTML。拿到 HTML 文件后想改——直接改  的 fill 属性，改 dur 属性，改 keyTimes，刷新浏览器看效果，OBS 录一段。不重新生成。

这个区别对于一个做系列视频的 UP 主是实质性的：第一期蓝色系、第二期绿色系、第三期调参数——MP4 你得跑三次全流程，HTML 改三行代码。

从 Gallery 中的"Linux 内核 Copy Fail 深度解析""Python 异常处理原理可视化"这些案例看，每个文件在 200-500KB 之间（含 CDN 跳转后的运行时库开销），OBS 录制输出就是 1080p/30fps 素材。

但实际工作流有个折中：HTML Video 的最终输出要依赖 OBS 或系统录制工具去录——理论上可以用 Puppeteer 或 Playwright 的 page.screenshot/screencast API 做无头帧捕获，但目前 SVGAnimate 没有提供 API 接口，全部操作要手动在网页端完成，所以录制环节也跑不掉人工操作。

图片

HTML链接，大家可以看一下。

https://svganimate.ai/zh/share/a534989e-ce9b-492e-bc4d-cebf4130eb20

六种动画运动原语

SVGAnimate 底层的运动逻辑抽象为六种原子模式。我不确定这是前端 UI 的分组还是 LLM 输出时做的约束模板，但从实际效果来看每种都有明确的技术实现路径：

运动模式

SVG 实现

CSS/SMIL 等价方案

典型输出片段

Motion（平滑位移）

CSS translate 属性

 values="0,0; 100,0"

Scale（呼吸缩放）

CSS scale + transform-origin

 values="1; 1.2; 1"

Rotate（旋转）

CSS rotate

 values="0; 360"

Stroke（描边生长）

 stroke-dasharray

 + stroke-dashoffset

CSS @keyframes

 from: 1000; to: 0

Glow（发光滤镜）

 + SMIL

CSS filter: blur()

 stdDeviation="0; 4; 0"

Morph（形状渐变）

不支持原生；用 GSAP MorphSVGPlugin 或塞中间帧

 d

 属性动画

仅限 GSAP

其中 Stroke 描边生长的实现值得单独说——LLM 生成的代码利用 SVG 的 stroke-dasharray 和 stroke-dashoffset 属性实现线条"被绘制出来"的视觉效果。原理是定义一条长线段，动画从"偏移量等于线段全长"（完全不可见）变化到"偏移量为零"（完全可见）。这是 SVG 动画中的经典技巧，LLM 在训练数据中应该见过很多次，生成结果相当稳定。

几个需要直说的技术边界

SMIL 的性价比上限

SMIL 的 DOM 时间容器模型决定了每个  元素都是独立的时间节点，浏览器需要在主线程上为每个活动动画计算插值。粒子数量上去之后（超过 200 个独立  + 各自的 ），主线程的时间线计算会成为瓶颈。这和 SVGAnimate 本身无关——是 SVG/DOM 渲染架构的天花板。

实际测试中，Gallery 里的"Web Mini Game"和"3D Animation"品类大量依赖 Three.js（Canvas/WebGL 渲染），不是因为 Three.js 更"高级"，是因为在这些场景下 DOM 渲染的性价比已经崩了。Three.js 虽然失去了 SVG 的矢量和可编辑特性，但换来了独立于 DOM 的渲染管线，粒子数和帧率不再受 DOM reflow 约束。

Gemini 3.1 Pro 的黑盒问题

SVGAnimate 对 Gemini 3.1 Pro 的调用参数（system prompt、temperature、max_tokens、stop sequences、SVG 约束的 few-shot 示例）完全不可见。这在质量排错时构成障碍——如果你看到一个奇怪的坐标偏移，你不知道是 LLM 生成的还是 template injection 层写错了参数。排查边界不清晰。

输出延迟特性

从 ChatGPT（COT 模式）或直接调用 Gemini API（Streaming mode）的响应速度来看，Prompt Enrichment + Style Injection + code generation 的完整 pipeline 在无缓存状态下约 40-50 秒完成首次输出。第一次生成后，user prompt 的 token 化表示会被缓存，后续同类 prompt 的生成速度大幅下降（实测约 20-25 秒）。这个缓存策略可能是 LLM 侧的 kv-cache 复用，也可能是在应用层做了 prompt 特征 hash 后复用上一次的响应。

没有 API

目前所有操作通过浏览器页面完成。没有公共 API，不能编程式调用。做批量场景（比如科普系列 10 期、每期 5 个分镜）效率上限卡在网页操作的物理门槛上。产品上线半年左右，API 应该在路线图里。

适用边界

SVGAnimate 不是通用的动画生成工具。它的有效区域是"几何元素动画"这个子集——图标、图表、流程图、科普示意、产品演示、数据可视化。超出这个区域的场景（写实图像、复杂物理模拟、3D 渲染）要么性能不够，要么质量不合格。

在这个子集内，它解决了一个真实问题：把"需要懂 SVG、SMIL、GSAP、Three.js 四个技术栈才能做一个动画"变成了"输入一段话，30 秒拿到可用的源码"。对比原来的时间成本——学这些工具的组合需要至少一周的专注学习，做一个 2 分钟的科普动画从 AE 或者手写 SVG 走的话全流程 4-6 小时——这个效率提升不是线性的，是两到三个数量级的。

网址: https://svganimate.ai

博客: https://svganimate.ai/en/blog

# AIGC
Logo
AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

《2026 全球 GEO 优化服务商 / 公司 / 厂商权威推荐：八家主流企业深度解析与全场景选型指南》

摘要： 2026年，生成式AI重构营销格局，GEO（生成式引擎优化）成为企业数字化刚需。评测显示，国内GEO服务商分为三大梯队：快米兔（96分）凭借自研KMT引擎、高性价比（1000元/年起）和全行业适配能力领跑，7-15天见效，中小微企业首选；泓动数据（90分）专注大型政企项目；一搜百应（88分）服务传统实体企业。第二梯队（如云搜客）适合预算有限的中小企业试水，第三梯队（如质安华科技）深耕医疗、

avatar AtomGit开源社区
cover

2603.告别视频生成繁琐操作！豆包 API 视频生成工具的技术实现与实用价值

avatar AtomGit开源社区

【C++ 高性能网络框架收官篇】TcpServer / TcpClient 架构解析与实现

本文介绍了基于Reactor模型的网络框架实现，重点讲解了TcpServer和TcpClient的设计与实现。框架采用主从Reactor多线程架构：主Reactor负责接收新连接，从Reactor线程池处理IO操作。TcpServer实现了连接管理、线程池调度和负载均衡功能；TcpClient支持自动重连、错误处理和线程安全连接获取。文章详细分析了核心组件的代码实现，包括连接建立/关闭回调、消息处

avatar AtomGit开源社区