I'm trying to convert the output from SVG/CSS animations to video so that I can, for example, show it on YouTube to colleagues whose browsers can't handle the original. By SVG/CSS animation, I mean the kind of thing described in Heydon Pickering's https://www.smashingmagazine.com/2015/09/creating-cel-animations-with-svg/ . That is, SVGs animated using CSS
I've found a number of possibilities, which I'll list below. However, all turned out to be unsatisfactory for one reason or another. This question has been asked — not quite in the same words — before on various StackExchange sites, but as some time has passed, I reckon it's worth trying again, and this time with a review of some of the answers.
I'm a programmer, and in fact am programming the animation engine whose output I want to video-ise. So if absolutely need be, I can adapt existing programs. However, I'd much prefer a tool that I can just run without having to modify.
I'm now going to list the possibilities I explored, in rough order of apparent ease of use, easiest first. These include both tools and programs.
The website https://sendeyo.com/onlineconverter/en/svg/mp4 , mentioned by tmach's comment Nov 20 '19 at https://stackoverflow.com/questions/58938653/convert-svg-animation-to-image-sequence .
This says it will convert an uploaded SVG to one of several formats, including MP4. However, when I tried it on two SVG/CSS files, it gave me static images for both. Moreover, it asked for the animation duration. It ought to be able to work this out from the CSS properties, so I wonder whether it's not analysing the CSS correctly. Even if it did work, upload and download delays are likely to make it inconvenient.
The npm package @scenejs/render, recommended by mattumotu Sep 23 '20 in an answer at https://superuser.com/questions/434649/how-to-take-a-css-animation-from-a-browser-and-export-a-gif-of-it . This can be downloaded from https://www.npmjs.com/package/@scenejs/render .
I had a long and horrible struggle to get this working on Windows. It doesn't work if you just follow the documentation, which implies you simply install-and-go. See https://stackoverflow.com/questions/64928747/how-where-do-i-find-out-how-to-solve-npm-installation-problems .
However, I did get it to run as far as outputting its version number. The SVG-to-video command crashed, though, as I reported on the software's site at https://github.com/daybrush/scenejs-render/issues . As another user reported the same bug on 1st April 2020, and the author, "daybrush", hasn't replied to that since 2nd April, I don't hold out much hope of a fix.
XeoGL. According to the tweet at https://twitter.com/xeolabs/status/993745427911585792 , this is based on lessons learnt from @scenejs. I've asked them whether they have an equivalent of @scenejs/render, but I've not heard back yet. If they have, it would probably be as easy to use as that was supposed to be.
Various tools for recording the screen as a video. These have been recommended by numerous users, and I shan't summarise. The best I've found is OBS Studio, https://obsproject.com/ , followed by Avidemux, http://avidemux.sourceforge.net/ .
I used OBS Studio to record the screen, and Avidemux to crop it, and also to trim unwanted frames from the start and end. This was necessary because I found it hard to synchronise OBS with the start and end of my animation, so had to record some way in advance and behind.
Advantages are that at least it works. The videos will run on YouTube. Disadvantages are that even with a recording frame-rate of 50fps on OBS, they're a bit jerky. Moreover, recording has to be done manually, and so do cropping and trimming. I want to avoid that.
Various tools for recording the screen as an animated GIF and saving that as a video. The most convenient that I found, in that it "just works", was ScreenToGif, https://www.screentogif.com/ .
This is very easy to record with, and to trim frames and crop in. And you can save directly as a video. The recording quality doesn't seem to be quite as good as with OBS, being jerkier, but it's easier and quicker to use. The disadvantages are the quality, and that it's manual.
Now I'm getting into programming territory, as the remaining tools I mention would need at least some extra work doing. The first is the SVG-to-animated-PNG converter at http://littlesvr.ca/apng/svg2png/ , recommended by kartikmohta's comment Sep 29 '09 at https://superuser.com/questions/48532/convert-animated-svg-to-movie .
One would need to put the individual PNGs together into a video, but I suppose that would be fairly easy. However, the website no longer works. Of the downloads mentioned in the first paragraph, one is password-protected, one is corrupt according to my browser, and one gives an error 404. I've emailed the author but had no reply yet.
Whammy, https://github.com/antimatter15/whammy , by Kevin Kwok. This was recommended by markE's comment Aug 22 '16 at https://stackoverflow.com/questions/39087817/how-to-render-a-mp4-movie-from-html-animation .
Noah Veltman at https://bl.ocks.org/veltman/ff864215009174bc5d164ec3533125c2 demonstrates "SVG animation to video". His site was recommended by Tiger Zhao May 14 '19 at https://stackoverflow.com/questions/48197849/export-svg-animations-to-gif-webm-or-videos-format .
Noah says on his page "Converting an SVG animation to a video with the MediaRecorder API and a hidden canvas. Drawing frames from img elements can introduce an extra delay, so this version generates all the frames upfront and then renders them in a loop with
requestAnimationFrame()". I don't know enough to comment on this. Would it work with SVG/CSS? Would collecting all the frames upfront overload the browser? Would you get strobing, "beating", or other artefacts?
My problem with trying to modify anything like that is that I don't have the time. Apart from that, experience of real-time and parallel programming tells me that one can get race conditions and other bugs, and (again) unwanted visual effects such as beating. In addition, I might have to be careful about overloading the browser's memory and about the speed of video encoding. So I feel this is definitely something an expert should undertake.