Some svg animations play in GitHub README others do not

Question

I have been checking out some terminal to svg recorders like termtosvg written in Python and svg-term-cli in Typescript.

I installed termtosvg and recorded a small terminal session to keep in my README as a demo. However github doesn't render it. Strangely it renders all the svg animations that termtosvg has.

svg-term-cli is using Rawgit to render, but I don't want to use it as it will be taken down.

I made a small repository for testing purposes here. I downloaded one svg from termtosvg, one from svg-term-cli and one of my own and put it in docs folder in the repo. And linked to them from my README.md.

Issue

The svg animation from svg-term-cli renders in README however the other two don't.

NOTE:

• Inside docs folder I can clearly see Github rendering the animated svgs.
• I'd like to use termtosvg and not svg-term-cli.

Why is this happening? How do I make README render my animated svg.

Answer 1

I had a chat with the creators of termtosvg and found out that termtosvg uses animation tags which GitHub considers as scripts thereby removing them. That's why we see just a black screen and no animation when we try to link svgs output by termtosvg.

svg-term-cli and the shark animation on the other hand uses CSS to achieve the same thing which GitHub doesn't seem to have an issue with. That's why they get rendered.

Possible workarounds:

1. Using github.io to host the images and link that to README as that seems to work.

2. Using Rawgit. But keeping in mind that it will be taken down soon.