【问题标题】：Inkscape: animated SVG to video?Inkscape：动画 SVG 到视频？
【发布时间】：2011-12-10 17:53:45
【问题描述】：

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

环顾四周，我也遇到了this answer - 但逐帧创建 SVG 并不可行，因为我想保留缩放/滑动动画。

对使用什么工具有任何想法吗？

【问题讨论】：

这能回答你的问题吗？ How to export SVG animated with javascript to movie format?

标签： video svg inkscape

【解决方案1】：

1。将 SVG 转换为画布

可以使用this tool 将SVG 转换为画布元素

2。录制画布动画

可以从使用 MediaStreamRecorder（取决于浏览器支持）或 Whammy.js 的画布动画创建视频文件。我以前用过 whammy，它就像一个魅力。

【讨论】：

您能否提供一个示例代码笔，说明您是如何录制 svg 内容的？这是我正在尝试使用 recordRTC codepen.io/rudi8292/pen/yJEAbd

【解决方案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 有很多选项，比如帧率、像素格式等。

【讨论】：

【解决方案3】：

你可以试试 synfig studio，我已经在几个个人动画项目中使用了它。我真的很好，有很好的教程/文档/社区。p>

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

引用： “Synfig Studio 是一款免费的开源 2D 动画软件，设计为强大的工业级解决方案，用于使用矢量和位图艺术品创建电影质量的动画。它消除了逐帧创建动画的需要，允许您制作以更少的人员和资源获得更高质量的 2D 动画。Synfig Studio 可用于 Windows、Linux 和 MacOS X。"

希望对你有帮助

菲利普

【讨论】：

【解决方案4】：

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

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

Convert animated SVG to movie 提供了多种拆分和转换选项。

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

【讨论】：