Show HN: Termtosvg – Record terminal sessions as SVG animations • Hacker News Board

Re: Show HN: Termtosvg – Record terminal sessions as SVG animations

#31

Post by nbe » Tue, Jul 03, 2018, 4:39 PM UTC

foob wrote: post #21

This is pretty awesome. I'm a big fan of both SVG animations and terminal recorders, so this is right up my alley. I previously built a small library called svganimator for creating smooth animations between static SVG images [1], used generated SVG animations to help design the Wayback Machine loading animation [2], and also put together a fairly comprehensive comparison of terminal recording solutions [3]. I'll nee…

OP here. Sadly, SVG file size is not as small as I'd want it to be. The main problem is that a few attributes (x, y and lengthAdjust) have to be repeated on each text tag to position each character at the right place. I can't use CSS for this since those attributes are not styling attributes.

Using SVG definitions efficiently to avoid duplication is also not as easy as I thought it would be.

I have a few ideas on how to reduce file size, this is the next improvement I'm planning to work on.

For the examples shown at [1], file size ranges from 56kB to 252kB, the worst case scenario being lots of single characters with different colors.

[1] https://github.com/nbedos/termtosvg/blob/master/examples/exa...

Re: Show HN: Termtosvg – Record terminal sessions as SVG animations

#32

Post by amelius » Tue, Jul 03, 2018, 4:41 PM UTC

OskarS wrote: post #28

foob wrote: post #21

This is pretty awesome. I'm a big fan of both SVG animations and terminal recorders, so this is right up my alley. I previously built a small library called svganimator for creating smooth animations between static SVG images [1], used generated SVG animations to help design the Wayback Machine loading animation [2], and also put together a fairly comprehensive comparison of terminal recording solutions [3]. I'll nee…

Honestly, if you're recording terminal sessions, it's probably fine to not support Edge. I doubt any significant portion of your audience is going to be using it, and even if they do, they're going to be perfectly understanding when you say "sorry, Edge doesn't support SVG animations, use a different browser". Shitty of Microsoft, though. If they aren't going to support it, it's not going to be widely deployed. I exp…

W3C should have a rule that a web browser which does not intend to support the standard may not call itself a "web browser".

Re: Show HN: Termtosvg – Record terminal sessions as SVG animations

#33

Post by bonyt » Tue, Jul 03, 2018, 5:36 PM UTC

nbe wrote: post #31

foob wrote: post #21

This is pretty awesome. I'm a big fan of both SVG animations and terminal recorders, so this is right up my alley. I previously built a small library called svganimator for creating smooth animations between static SVG images [1], used generated SVG animations to help design the Wayback Machine loading animation [2], and also put together a fairly comprehensive comparison of terminal recording solutions [3]. I'll nee…

OP here. Sadly, SVG file size is not as small as I'd want it to be. The main problem is that a few attributes (x, y and lengthAdjust) have to be repeated on each text tag to position each character at the right place. I can't use CSS for this since those attributes are not styling attributes. Using SVG definitions efficiently to avoid duplication is also not as easy as I thought it would be. I have a few ideas on how…

How about with gzip? I feel like SVG files should compress well. I’d imagine most HTTP servers already just use gzip for these files.

Re: Show HN: Termtosvg – Record terminal sessions as SVG animations

#34

Post by bufferoverflow » Tue, Jul 03, 2018, 5:39 PM UTC

amelius wrote: post #32

OskarS wrote: post #28

Earlier quoted context omitted.

Honestly, if you're recording terminal sessions, it's probably fine to not support Edge. I doubt any significant portion of your audience is going to be using it, and even if they do, they're going to be perfectly understanding when you say "sorry, Edge doesn't support SVG animations, use a different browser". Shitty of Microsoft, though. If they aren't going to support it, it's not going to be widely deployed. I exp…

W3C should have a rule that a web browser which does not intend to support the standard may not call itself a "web browser".

I'm pretty sure no browser supports 100% of SVG spec.

Re: Show HN: Termtosvg – Record terminal sessions as SVG animations

#35

Post by wes-k » Tue, Jul 03, 2018, 5:43 PM UTC

bonyt wrote: post #33

nbe wrote: post #31

Earlier quoted context omitted.

OP here. Sadly, SVG file size is not as small as I'd want it to be. The main problem is that a few attributes (x, y and lengthAdjust) have to be repeated on each text tag to position each character at the right place. I can't use CSS for this since those attributes are not styling attributes. Using SVG definitions efficiently to avoid duplication is also not as easy as I thought it would be. I have a few ideas on how…

How about with gzip? I feel like SVG files should compress well. I’d imagine most HTTP servers already just use gzip for these files.

Was curious myself. 252K -> 17K. Yes it compresses well :)

Re: Show HN: Termtosvg – Record terminal sessions as SVG animations

#36

Post by WorldMaker » Tue, Jul 03, 2018, 5:45 PM UTC

foob wrote: post #27

WorldMaker wrote: post #24

Earlier quoted context omitted.

Edge doesn't have an infinite budget, and they say they've tried to prioritize based on how common the standards are found used in the wild and how active the requests on UserVoice are. Doesn't look like there is even currently a tracked UserVoice for it: https://developer.microsoft.com/en-us/microsoft-edge/platfor...

It is on UserVoice [1], and it has over two thousand votes there. They've marked that as "sorry, no plans," and they've marked previous issues as "by design" [2]. They use Chrome announcing plans to deprecate SVG animations as their primary justification, but Chrome backtracked on those plans after realizing that there were important use cases that mattered to the community [3]. > In the 15 months since we announced…

It is fascinating the interplay between the Chrome team, and WHATWG on SMIL. It's one of those W3C standards from the W3C's "XML all the things" years that you can tell browser teams aren't entirely thrilled with. Quick searches seem to indicate that WHATWG's overall take seems to be that all SVG animation support would be better in CSS Animation and that they'd also prefer to punt SMIL.

> It's also a bit circular to "prioritize based on how common the standards are found used in the wild" when they're single-handedly responsible for preventing developers from using SVG animations "in the wild" in the first place.

It certainly is a chicken-and-egg bootstrapping problem. Though the increasing prevalence of "Works Best in Chrome"/"Works Only in Chrome" dominance may suggest that Edge is still in a position to follow the trends than attempt to lead them on ancient W3C standards like SMIL.

Re: Show HN: Termtosvg – Record terminal sessions as SVG animations

#37

Post by fla » Tue, Jul 03, 2018, 5:48 PM UTC

nbe wrote: post #31

foob wrote: post #21

This is pretty awesome. I'm a big fan of both SVG animations and terminal recorders, so this is right up my alley. I previously built a small library called svganimator for creating smooth animations between static SVG images [1], used generated SVG animations to help design the Wayback Machine loading animation [2], and also put together a fairly comprehensive comparison of terminal recording solutions [3]. I'll nee…

OP here. Sadly, SVG file size is not as small as I'd want it to be. The main problem is that a few attributes (x, y and lengthAdjust) have to be repeated on each text tag to position each character at the right place. I can't use CSS for this since those attributes are not styling attributes. Using SVG definitions efficiently to avoid duplication is also not as easy as I thought it would be. I have a few ideas on how…

What about embedding a mini ECMAScript player and apply values to the DOM on the fly ?

Re: Show HN: Termtosvg – Record terminal sessions as SVG animations

#38

Post by dethos » Tue, Jul 03, 2018, 5:49 PM UTC

Cool. It is not very clear from the description so I will ask:

What are the advantages over "asciinema"?

At the moment I only see that it does not require a specific player (javascript for the web), on the other hand it seems you are not able to pause the "execution".

Re: Show HN: Termtosvg – Record terminal sessions as SVG animations

#39

Post by Demiurge » Tue, Jul 03, 2018, 5:52 PM UTC

This is extremely cool, and will be useful.

One bug I noticed is that it seems to break virtualenv which is made with --system-site-packages its not finding the modules

Re: Show HN: Termtosvg – Record terminal sessions as SVG animations

#40

Post by fullstackchris » Tue, Jul 03, 2018, 6:10 PM UTC

bufferoverflow wrote: post #34

amelius wrote: post #32

Earlier quoted context omitted.

W3C should have a rule that a web browser which does not intend to support the standard may not call itself a "web browser".

I'm pretty sure no browser supports 100% of SVG spec.

Facts like these always drives me crazy... these companies (namely Microsoft, but I guess Google/Mozilla as well a bit) have huge teams and resources, and can't build a browser that follows specs that have been hammered out only after years of work.