Continued from this post, wherein I animate some SVG

After creating the SVG animation I want to export the SVG file as a video file, preferrably mp4 or webm. lenra-io/svg-recorder works, but only with Chrome. I don't know why the img tag with the SVG URL cannot be fetched as animated bitmap with Firefox, maybe this is to prevent canvas / browser fingerprinting.

The result is OKish:

The original SVG as comparison:

Quality

The default export quality is low, at 1MB for x frames in 20s.

Bumping the video bitrate in the HTML file improves the quality a lot:

videoBitRate: 25000000

Ugly parts

There still are some bits that I don't like. Exporting a 1080p or 4K mp4 does not work on my machine in realtime (Linux, Nvidia RTX 2080, Nvidia drivers version 550). The animation stutters and when I try to export 20 seconds, I get less than that in the exported frames. The alternative here seems to manually set the time offset for each frame and then capture it, instead of relying on the capture being fast enough. On the other hand, trying this on Windows, RTX 4090, with the default driver version yields better results, so I'll simply do the final exports from there.