Maybe there is something wrong with the output of termtosvg

[armsp]

I am not sure if this is the correct place to ask this, but my experiments led me to believe that there are some issues with the svg output by termtosvg.
Why?
The svgs output by termtosvg don't seem to be rendered by GitHub, whereas other random online svgs and by another tool svg-term-cli seem to work well with GitHub.
Test
I created this repository that showcases this well enough. svgs are inside docs folder and README.md tries to show them. All the svgs except your own svg that I downloded from your README as well as one that I made using your tool fail to render whereas others work.
I tried all the ways I think -

• Relative path
• Github url
• Raw github url with sanitization ?sanitize=true

Any idea why this might be happening ?

[armsp]

Corresponding SO post, just in case.

[nnist]

Issue #61 may be linked to this. When I tried to embed term2svg SVGs into readmes or issues on GitHub it would not work unless it was hosted elsewhere, like https://rawgit.com or https://github.io. I thought it was just some GitHub specific thing.

However, it seems the parrot and shark SVGs work fine in your repo, so it may be caused by termtosvg output after all.
The raw working SVGs and the raw termtosvg SVGs will have to be compared, maybe some tag is used which GitHub doesn't like and thus refuses to render.

[nbedos]

I am not sure if this is the correct place to ask this

It's the best place for this :) Thanks for reporting the issue.

I did some tests and it turns out GitHub sanitizes all relative links to SVG files in README.md by generating a full URL for each file that ends with ?sanitize=true. The sanitized files are missing every animate element which is why animations are broken.

A workaround for this is to link to the full URL of the SVG file hosted on GitHub pages (see README.md for an example).

svg-term-cli uses CSS keyframes to animate the terminal screen by translating lines in and out of the viewable part of the image. GitHub seems to tolerate that kind of animation so I'll consider switching to it.

I too thought it was just GitHub that required SVGs to be hosted elsewhere.

[armsp]

@nbedos @nnist I was close. I didn't realize that animation tag came under scripts because while researching about why this was happening I came to know that GitHub removes scripts, but when I searched for script tags in raw content I never found them. So i gave up and reluctantly thought of letting you know because the tool is amazing but having a very important use case stripped away from it drastically reduces the amount of people who would want to use it.
So now what are your plans?
Would you keep it as it is or switch over to CSS?
What would be the consequences of this switch?
Would there be any trade-offs?

[nbedos]

@armsp

What would be the consequences of this switch?
Would there be any trade-offs?

I don't know yet, I'll have to do some testing.

[nbedos]

It's been a while but I've finally found some time to work on this.

I changed termtosvg so that animations work roughly like those generated by svg-term-cli. These should bring the following improvements:

• Relative links to an SVG animation in markdown files on GitHub should now work
• Animations use way less CPU

I've only found one regression which is that using Firefox, when zooming on an animation, some lines jump up and down by one pixel between two frames. I cannot reproduce this issue with Chromium.

You can see here a README including a relative link to an animation : https://github.com/nbedos/termtosvg/blob/feature/css_animation/README.md

Updated examples are located here : https://github.com/nbedos/termtosvg/tree/feature/css_animation/docs/examples

I have to do a few more tests but it looks good so far.

[nbedos]

termtosvg now allows defining animations using either CSS or the Web Animations API.
CSS animations have a better compatibility with GitHub and should be used most of the time.
Animations defined via the Web Animations API are easier to control using JavaScript and should be prefered when interactivity is desired.

The choice to use CSS or WAAPI is done by template creators (see https://github.com/nbedos/termtosvg/blob/develop/man/termtosvg-templates.md)

This has been has been included in release 0.9.0