Skip to content
This repository has been archived by the owner on Jun 16, 2020. It is now read-only.

Maybe there is something wrong with the output of termtosvg #86

Closed
armsp opened this issue Dec 10, 2018 · 7 comments
Closed

Maybe there is something wrong with the output of termtosvg #86

armsp opened this issue Dec 10, 2018 · 7 comments
Labels
bug Something isn't working
Milestone

Comments

@armsp
Copy link

armsp commented Dec 10, 2018

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
Copy link
Author

armsp commented Dec 10, 2018

Corresponding SO post, just in case.

@nnist
Copy link
Contributor

nnist commented Dec 10, 2018

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
Copy link
Owner

nbedos commented Dec 10, 2018

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 armsp changed the title Maybe there are something wrong with the output of termtosvg Maybe there is something wrong with the output of termtosvg Dec 11, 2018
@armsp
Copy link
Author

armsp commented Dec 11, 2018

@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
Copy link
Owner

nbedos commented Dec 11, 2018

@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
Copy link
Owner

nbedos commented Jun 16, 2019

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 added a commit that referenced this issue Jun 30, 2019
Switch from SMIL animations to CSS or WAAPI animations
This should address #75, #86, #94 and #95
@nbedos nbedos added this to the 0.9.0 milestone Jun 30, 2019
@nbedos nbedos added the bug Something isn't working label Jun 30, 2019
@nbedos
Copy link
Owner

nbedos commented Jul 6, 2019

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants