Inkscape:动画SVG到视频？

Question

我用Inkscape 的Sozi插件创建了一个动画演示文稿.它看起来很棒,但并非所有浏览器都支持SVG动画(例如,Chrome根本不喜欢Inkscape/Sozi SVG).我想将演示文稿转换为视频.一种选择是进行屏幕捕获,但我希望有更好的东西.

环顾四周,我也遇到了这个答案 - 但是逐帧创建SVG并不是真的可行,因为我想保留缩放/滑动动画.

有什么工具可以使用吗？

Answer 1

1.将SVG转换为Canvas

可以使用此工具将SVG转换为canvas元素

2.录制画布动画

可以使用MediaStreamRecorder(取决于浏览器支持)或Whammy.js的画布动画创建视频文件.我曾经使用过whammy,它就像一个魅力.

Answer 2

有一个名为的节点包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 有很多选项，如帧速率、像素格式等。

Answer 3

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

如果您希望用户以相同的速度观看视频（而不是放慢速度），那么选择足够高的帧速率以流畅地显示动画（例如 30 fps）就足够了。缺点当然是增加了文件大小。

将动画 SVG 转换为电影提供了多种分割和转换选项。

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