Inkscape：将 SVG 动画转为视频？
我使用 Inkscape 的 Sozi 插件创建了一个动画演示文稿。它看起来很棒，但是，并非所有浏览器都支持 SVG 动画（例如 Chrome 根本不喜欢 Inkscape/Sozi SVG）。 我想将演示文稿转换为视频。一种选择是进行屏幕截图，但我希望有更好的东西。
环顾四周，我也遇到了 这个答案 - 但创建逐帧 SVG 并不是确实可行，因为我想保留缩放/滑动动画。
关于使用什么工具有什么想法吗？
i created an animated presentation with the Sozi plugin for Inkscape. It looks great, however, not all browsers support SVG animations (Chrome for instance does not like the Inkscape/Sozi SVGs at all).
I would like to convert the presentation to a video. One option would be to do a screen capture, but I am hoping for something better.
Looking around, I also came across this answer - but creating frame by frame SVGs is not really feasible, as I would like to keep the zooming/sliding animations.
Any ideas of what tool to use?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
有一个名为
timecut的节点包，它使用 Chromium 将 SVG 录制到 MP4 视频文件中。 https://github.com/tungs/timecut安装
用法
这将创建一个名为
video.txt 的文件。 mp4。timecut有很多选项，例如帧速率、像素格式等。There is a node package called
timecutwhich uses Chromium to record an SVG into an MP4 video file. https://github.com/tungs/timecutInstallation
Usage
This creates a file named
video.mp4.timecuthas quite a number of options, like frame rate, pixel format, etc.1. 将 SVG 转换为 Canvas
可以使用此工具将 SVG 转换为 canvas 元素
2记录画布动画
可以使用 MediaStreamRecorder（取决于浏览器支持）或使用 Whammy.js。
我以前用过whammy，效果非常好。
1. Convert SVG to Canvas
SVG can be converted onto a canvas element using this tool
2. Record Canvas Animation
A video file can be created from a canvas animation that using MediaStreamRecorder(depending on browser support) or with Whammy.js.
I have used whammy before, It worked like a charm.
您可以尝试 synfig studio，我已经将它用于几个个人动画项目。我真的很好，有很好的辅导/文档/社区。
http://www.synfig.org/cms/
引用：
“Synfig Studio 是一款免费开源 2D 动画软件，旨在作为强大的工业强度解决方案，用于使用矢量和位图图稿创建电影质量的动画。它消除了逐帧创建动画的需要，使您可以制作Synfig Studio 可用于 Windows、Linux 和 MacOS X，并以更少的人员和资源实现更高质量的 2D 动画。”
希望这对
菲利普有帮助
You may try synfig studio, I've been using it for several personal animation projects. I'ts really nice, with good tutos / documentation / community.
http://www.synfig.org/cms/
quote :
"Synfig Studio is a free and open-source 2D animation software, designed as powerful industrial-strength solution for creating film-quality animation using a vector and bitmap artwork. It eliminates the need to create animation frame-by frame, allowing you to produce 2D animation of a higher quality with fewer people and resources. Synfig Studio is available for Windows, Linux and MacOS X."
hope this helps
Philippe
你问的是不可能的，因为SVG动画是插值的，而主要的视频格式都是基于帧的。如果您想渲染为视频，您必须分离出离散帧。
如果您希望用户以相同的速度观看视频（而不是放慢速度），那么选择足够高的帧速率以流畅地显示动画（例如 30 fps）就足够了。缺点当然是增加了文件大小。
将动画 SVG 转换为电影 提供了多个用于分割和转换的选项。
顺便说一句，Chrome 确实支持 SVG 动画。您在最近的版本中尝试过吗？另外，尝试将文件从 Inkscape 导出为“普通 SVG”（而不是默认的“Inkscape SVG”），这会删除可能会混淆浏览器的 Inkscape 特定元素。
What you ask is impossible, because SVG animation is interpolated, whereas the major video formats are all frame-based. If you want to render to video, you have to separate out discrete frames.
If you expect your users will view the video at the same speed (as opposed to slowing it down), it is good enough to pick a frame-rate high enough to display the animation smoothly (say 30 fps). The disadvantage is of course increased file size.
Convert animated SVG to movie provides several options for splitting and converting.
Incidentally, Chrome does support SVG animation. Have you tried it in a recent version? Also, try exporting your file from Inkscape as a "plain SVG" (instead of the default "Inkscape SVG"), which strips Inkscape-specific elements that could potentially confuse browsers.