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 keyframe statements only. Not with SMIL, which is animation commands embedded in the SVG itself, as SVG elements. And not with JavaScript. It's pure SVG/CSS that I'm talking about.

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 . In an earlier version of this answer, I mentioned my difficulties installing it. These are now irrelevant, because discussion with other users showed that it isn't intended for SVG/CSS. It's only for JavaScript-controlled animations generated with the SceneJS software. So it's of no further interest to this question.

  • 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 .

    This looks like a JavaScript program that one slips into the HTML containing the SVG. Probaby the same principle as the two below. As with those, I don't know what quality it would deliver in practice, and whether it would work with SVG/CSS.

  • 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?

  • Finally, there's a discussion at https://stackoverflow.com/questions/50436280/convert-svg-animation-to-webm-or-mov , spanning May 2018 to September 2018. There's some JavaScript code posted by Sphinxxx which looks as though it might work, using a similar principle to Noah's.

    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.

  • 1
    Great research. I would have suggested the OBS approach, too. I doubt there's anything better. A hardware solution like a HDMI frame grabber will certainly record the animation smoother (like true 60fps). But still you'll have cropping and trimming. Nov 21, 2020 at 14:07
  • Forgive my ignorance, but how do I use a frame grabber? Is it something I buy at my local PCWorld and plug in then continue as before, or is there more to it? Nov 21, 2020 at 16:46
  • I don't know exactly yet. I also just learnt about it. Basically I would say you provide HDMI input to the box, plug the output to your monitor and it records via USB. amazon.de/dp/B08DR3JGBJ There are certainly more expensive solutions, not using USB but PCIe instead. Nov 21, 2020 at 16:56
  • Thinking back to the history of this question, I remembered that making the animation smoother was one reason I wanted to run the conversion in my web browser. The browser sees all the timing information in my CSS. If running in realtime and saving frames is too difficult (e.g. hits garbage-collection-induced slowdowns), the browser can wait. It doesn't matter, as long as it compensates by adjusting the timing of the frames it saves. Surely? Nov 21, 2020 at 16:58
  • Yes, in theory the web browser could just render into a file instead of the screen. Technically that would certainly be possible. Even easier, since the browser does not have to meet the timings at that time. Nov 21, 2020 at 17:00


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.