Inkscape：将动态SVG转换为视频？

Question

我使用Sozi插件为Inkscape创建了一个动画演示。它看起来很棒，但并非所有浏览器都支持SVG动画（例如Chrome根本不喜欢Inkscape / Sozi SVG）。我想将演示转换为视频。一种选择是进行屏幕捕获，但我希望有更好的解决方案。

寻找解决方案时，我也发现了这个答案 - 但逐帧创建SVG并不可行，因为我想保留缩放/滑动动画。

有什么工具可以使用的想法吗？

- anonymous1fsdfds

---

这回答解决了你的问题吗？如何将使用JavaScript动画制作的SVG导出为电影格式？ - Marcel Zúbrik

Answer 1

有一个名为timecut的节点包，它使用Chromium将SVG记录到MP4视频文件中。https://github.com/tungs/timecut

安装

$ cd project
$ npm install timecut

使用说明

$ cd project
$ ./node_modules/timecut/cli.js Animation.svg

这将创建一个名为video.mp4的文件。

timecut有很多选项，如帧率、像素格式等。

- Christian Hujer

Answer 2

1. 将SVG转换为画布(Canvas)

可以使用此工具将SVG转换为画布(Canvas)元素。

2. 记录画布(Canvas)动画

可以使用MediaStreamRecorder（取决于浏览器支持）或Whammy.js创建一个视频文件来记录画布(Canvas)动画。我之前用过Whammy，非常好用。

---

- TarranJones

---

你能提供一个记录SVG内容的代码示例吗？这是我使用RecordRTC尝试的代码：http://codepen.io/rudi8292/pen/yJEAbd - Rudresh Ajgaonkar

Answer 3

你可以尝试使用Synfig Studio，我已经在几个个人动画项目中使用它了。它非常好用，有很好的教程/文档/社区支持。

http://www.synfig.org/cms/

引用： “Synfig Studio是一款免费且开源的2D动画软件，旨在使用矢量和位图艺术作品创建具有工业级强度的电影质量动画的强大解决方案。它消除了逐帧创建动画的需求，使您能够以更少的人力和资源生产更高质量的2D动画。Synfig Studio适用于Windows、Linux和MacOS X。”

希望这能有所帮助。

菲利普

- user4445827

Answer 4

你所问的是不可能的，因为SVG动画是插值的，而主要的视频格式都是基于帧的。如果你想渲染成视频，你必须将离散的帧分开。

如果你期望用户以相同的速度观看视频（而不是减慢速度），选择一个足够高的帧率来平滑显示动画就足够了（比如30 fps）。缺点当然是增加了文件大小。

将动态SVG转换为电影提供了几个拆分和转换的选项。

---

顺便提一下，Chrome确实支持SVG动画。您在最近的版本中尝试过吗？此外，尝试从Inkscape导出文件为“普通SVG”（而不是默认的“Inkscape SVG”），这将剥离可能会混淆浏览器的Inkscape特定元素。

- Mechanical snail