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.
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, though, it may also be unsuitable as above.
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.
Update: by adding cue marks to my animation, I can anticipate its start and end, thereby avoiding the need to trim. It is also possible to crop while recording with OBS, so I can probably avoid using Avidemux altogether. However, the recording process will still not be automatic.
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.