7 ms·

Show HN: Termtosvg – Record terminal sessions as SVG animations

767 points by nbe 8y ago

okket 8y ago
The example animation looks broken in Safari (including Tech Preview 59), works in Chrome 67 (of course), and in Firefox 61. [Edit: This seems to be a macOS/driver bug affecting only some models]
- cnlwsu 8y ago
  all examples work for safari 11.0.3
- AndrewStephens 8y ago
  I don't see any problems with Safari 11.1.1 on macOSX or on mobile Safari on my iPhone.
  - okket 8y ago
    Right. It works on my 2013 MacBookPro, but the drawing looks incomplete/broken on my 2015 Retina 5k iMac. Both run macOS 10.13.5.
- The_suffocated 8y ago
  It's broken on my 2014 MacBook Air with Safari 11.1.1. Works OK on Firefox and Chrome.
- skykooler 8y ago
  It also doesn't work in the Windows default browser, but I think that's an Edge case.
michaelmior 8y ago
Awesome! It sounds like browser support may currently be an issue, but I really like the idea :)
fsiefken 8y ago
Excellence! The README reads: "I really like the clean look of SVG animations and I also wanted to see how this solution would hold out against other attempts at terminal recording such as asciinema." But how does it compare? Is the size smaller, is it more efficient?
- transitivebs 8y ago
  Animated SVG animations (really just an svg element + animated css) are significantly smaller, more efficient, and crisper than equivalent GIF animations. I wrote about the difference between the two here: https://hackernoon.com/presenting-your-code-beautifully-fdbab9e6fb68 https://hackernoon.com/presenting-your-code-beautifully-fdba... As I explained in the above article, this is already possible with asciinema + svg-term-cli (https://github.com/marionebl/svg-term-cli https://github.com/marionebl/svg-term-cli). The one downside with animated SVGs is that they're not as compatible to be included anywhere as GIFs since they're really just html snippets.
  - cirowrc 8y ago
    Thanks for putting your effort on this! It seems pretty great. Being an `asciinema + svg-term-cli` user myself, what are the arguments for moving to `termtosvg`? Thanks!
  - Already__Taken 8y ago
    You're competing with webm / mp4 not gif though. Editing the HTML attribute to width=2000% is pretty sweet however because it's a vector. I'm guessing if the example wasn't in an image tag I could select the text too?
    - SmallDeadGuy 8y ago
      If you click on the example image to view it in a new tab, you can select the text there. It could be improved, afaict you can only select a single line of text at a time and if you select the current line being typed then the selection is cleared when that line is modified.
nihil75 8y ago
Amazing stuff. And in very readable Python!
deleted 8y ago
[deleted]
andrewla 8y ago
This is great for many of the same reasons that asciinema is great -- smooth animation and selectable text. The resulting svg is orders of magnitude smaller than a gif would be. How hard would it be to add some sort of pause button to aid in selecting from the capture? Also, it appears you can only select when you are viewing the image directly, not when it is embedded via an <img> tag. Is that fixable? I guess maybe an <iframe> might work, but I haven't played with it yet.
- djsumdog 8y ago
  I wonder if you could just use a javascript button to pause the animation and if that would make the text selectable.
dpflan 8y ago
What're people using tools like this for? I see the usage surely when demonstrating something in the terminal - and many times used for showcasing projects and tools. Are you using the recordings for other purposes, like to document work and share progress with your team + manager for instance for work you're doing during a sprint (good for demo'ing things at the end of the sprint too).
- joombaga 8y ago
  It's good for right-way vs wrong-way demonstrations. If I just copy the text out of my terminal and say "this is how we used to do it; this is how we should do it/will do it now" and paste it in a jira ticket, not many people will take the time to read and understand. Gifs are more accessible I guess.
  - nomel 8y ago
    Maybe it's just me, but I can't stand having to wait to watch someone slowly type something when all I want to to is know the command or understand what some output should look like. Similarly, I've never seen this sort of thing used professionally, just on blogs and project demos.
    - hutzlibu 8y ago
      It really should have a timelinecontrol ..
- mikekchar 8y ago
  I did an experiment a couple of years ago where I wanted to see if I could write code 1 pomodoro a day. I recorded myself in asciinema. It's basically several 25 minute pomodoros of me implementing Core Wars (a VM for machine language programs that battle against each other) in Ruby. I hadn't written Ruby in a while and I was more interested in playing experimenting with a TODO list for being efficient with such a small amount of code per day, so the code is not really fantastic. However, if you are interested I did about 60 pomodoros, I think: https://mikekchar.github.io/core-wars-kata/ https://mikekchar.github.io/core-wars-kata/ It's a super old version of asciinema (I haven't bothered to update it). Also, I recommend increasing the playback speed using the '>' key a couple of times so you don't have to suffer from my pathetically slow typing.
chrismorgan 8y ago
The primary casualty of using SVG animations is IE/Edge support; SMIL is not currently planned: https://developer.microsoft.com/en-us/microsoft-edge/platform/status/svgsmilanimation https://developer.microsoft.com/en-us/microsoft-edge/platfor.... It would be good to adjust the failure mode so that if SMIL is not supported then at least a meaningful frame (probably the last, though scrolling makes it difficult to decide!) is shown, rather than just a blank rectangle.
- swebs 8y ago
  Jesus, it's 2018 and they still can't even figure out how to implement animated PNGs? Real browsers had this 10 years ago. What the hell is wrong with Microsoft? Are they really just so incompetent, or is there a more insidious business reason why they don't want more animated formats on the web?
  - hutzlibu 8y ago
    SMIL is something quite different and much more complex, than "animated PNGs"
    - swebs 8y ago
      I know. I just saw APNG when scrolling down in that list and was surprised to see it still not figured out.
    - chatmasta 8y ago
      Is complexity a reasonable excuse for one of the world’s largest corporations to forego a feature in their flagship browser that every other browser has implemented?
  - chrismorgan 8y ago
    Firefox had (and pioneered) APNG ten years ago. Safari added APNG support four years ago. Chrome only got APNG just over a year ago.
abhiminator 8y ago
The example recording renders super smoothly in FF v61.0 and Chrome v67.0, but stutters in Safari running on an OS-X 'High Sierra' machine. That said, I'm absolutely loving this as the file size and the memory footprint of this SVG is super-small relative to what a .gif of the same content would be. Great work!
foob 8y ago
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 need to update the comparisons to include termtosvg, I can't wait to try it out and see what the file sizes look like. As others have mentioned, the major issue with SVG animations is that Microsoft doesn't plan to ever include support for them in Edge. This means that you either need to create fallbacks specifically for Microsoft browsers, or to disregard that portion of the market on your website. It's a real shame because SVG/SMIL allows you to create high quality animations which require a fraction of the bandwidth that would be necessary for comparable GIF or video files. [1] - https://github.com/sangaline/svganimator https://github.com/sangaline/svganimator [2] - https://intoli.com/blog/designing-the-wayback-machine-loading-animation/ https://intoli.com/blog/designing-the-wayback-machine-loadin... [3] - https://intoli.com/blog/terminal-recorders/ https://intoli.com/blog/terminal-recorders/
- d_ 8y ago
  > the major issue with SVG animations is that Microsoft doesn't plan to ever include support for them in Edge. And here I thought the Edge team left behind the mistakes of IE.
  - WorldMaker 8y ago
    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/platform/status/svgsmilanimation/?q=svg https://developer.microsoft.com/en-us/microsoft-edge/platfor...
    - laurent123456 8y ago
      It's in there under "SVG+SMIL Animation" but the status is "Not currently planned". Here[0] they say that they consider the feature deprecated. [0] https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/5254111/ https://developer.microsoft.com/en-us/microsoft-edge/platfor...
arendtio 8y ago
A few weeks ago I tried to convert one of my asciinema recordings to a SVG with svg-term-cli [1], but the result had big problems with some browsers, so I took the more mainstream gif approach again. Anybody tried termtosvg with different browsers yet? [1]: https://github.com/marionebl/svg-term-cli https://github.com/marionebl/svg-term-cli
dethos 8y ago
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".
- nbe 8y ago
  Yes, there is no dependency on a specific player. The output is an SVG animation so you can modify it as you want. For example you could add a last frame with the logo of your project. Not being able to pause the animation is annoying, I will probably add some way to it with ECMAScript in the future.
- 4684499 8y ago
  I think standalone is the most outstanding advantage. Many recordings of terminal are using asciiema or youtube, those links in a github readme.md file is a static screenshot instead of animated one, you have to click the link to watch the animation. You can view the animation without javascript enabled, and it's media type is image, you don't even need to convert it to base64 to use it. It's like gif but relatively smaller and with more colors, and it's Scalable Vector.
Demiurge 8y ago
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
- nbe 8y ago
  Thanks! I will look into the virtualenv problem, but if you can spare the time could you please open an issue and include the exact steps to reproduce the error? https://github.com/nbedos/termtosvg/issues/new https://github.com/nbedos/termtosvg/issues/new
b0rsuk 8y ago
I'm very impressed - it combines two of my favourite technologies, Python and SVG. Three, in fact - including terminal. I will be watching it and tinkering with it. It's written in modern Python and well documented. However, some functions are a bit monolithic: https://github.com/nbedos/termtosvg/blob/master/termtosvg/term.py#L215 https://github.com/nbedos/termtosvg/blob/master/termtosvg/te...
dc443 8y ago
This is super awesome, but will there ever be an ability to pause/rewind/scrub?
- vanderZwan 8y ago
  Well, the animation is inherent to the SVG, so either browsers would need to support that, or some kind of JavaScript library is needed to extract that (probably giving Edge animation support while it's at it)
eltoozero 8y ago
If only ffmpeg->mp4 instead of svg... I had just thrown together a typescript bash script to record IRC with timing for later playback and sync with a podcast, the trick is the rendering step: in theory it could be done on a canvas with native ffmpeg drawtext, but the invocation is super gnarly.
77pt77 8y ago
SVG is one of those technologies that never really caught on, even though it would have made life much easier for everyone.
- hutzlibu 8y ago
  If the standard would have been clear and simple - then maybe yes. But in my opinion it was and still is, a huge mess. It somewhat works now, but ... it is a subset, that works. But it is not evil intention(nor the fault of Adobe or now Microsoft), that the love for SVG is not the greatest.
- canada_dry 8y ago
  cough https://d3js.org/ https://d3js.org/
Pawamoy 8y ago
Sadly, I will not replace asciinema+svg-term-cli by termtosvg, because termtosvg takes the terminal size into account when recording, not when rendering. It means that I have to resize my terminal before recording, and that I will not be able to resize it differently for rendering. So if lines are wrapped, I cannot change the width to de-wrap them in the resulting SVG. Asciinema does not care about your terminal size when recording. In fact you can even reduce it or hide it (if you automate the input). Then you render it with svg-term-cli with the width you feel it is best.
m3tr0s 8y ago
You could differentiate more from asciinema by building editing tools around the recording (like cutting or embedding the recording in stock frames like in https://shotsnapp.com https://shotsnapp.com)
- m3tr0s 8y ago
  Have a look here also: https://github.com/cirocosta/asciinema-edit https://github.com/cirocosta/asciinema-edit
jscoder99 8y ago
Pretty Cool

767 points by nbe 8y ago

The example animation looks broken in Safari (including Tech Preview 59), works in Chrome 67 (of course), and in Firefox 61. [Edit: This seems to be a macOS/driver bug affecting only some models]

cnlwsu 8y ago
all examples work for safari 11.0.3
AndrewStephens 8y ago
I don't see any problems with Safari 11.1.1 on macOSX or on mobile Safari on my iPhone.
- okket 8y ago
  Right. It works on my 2013 MacBookPro, but the drawing looks incomplete/broken on my 2015 Retina 5k iMac. Both run macOS 10.13.5.
The_suffocated 8y ago
It's broken on my 2014 MacBook Air with Safari 11.1.1. Works OK on Firefox and Chrome.
skykooler 8y ago
It also doesn't work in the Windows default browser, but I think that's an Edge case.

michaelmior 8y ago

Awesome! It sounds like browser support may currently be an issue, but I really like the idea :)

fsiefken 8y ago

Excellence! The README reads: "I really like the clean look of SVG animations and I also wanted to see how this solution would hold out against other attempts at terminal recording such as asciinema." But how does it compare? Is the size smaller, is it more efficient?

transitivebs 8y ago
Animated SVG animations (really just an svg element + animated css) are significantly smaller, more efficient, and crisper than equivalent GIF animations. I wrote about the difference between the two here: https://hackernoon.com/presenting-your-code-beautifully-fdbab9e6fb68 https://hackernoon.com/presenting-your-code-beautifully-fdba... As I explained in the above article, this is already possible with asciinema + svg-term-cli (https://github.com/marionebl/svg-term-cli https://github.com/marionebl/svg-term-cli). The one downside with animated SVGs is that they're not as compatible to be included anywhere as GIFs since they're really just html snippets.
- cirowrc 8y ago
  Thanks for putting your effort on this! It seems pretty great. Being an `asciinema + svg-term-cli` user myself, what are the arguments for moving to `termtosvg`? Thanks!
- Already__Taken 8y ago
  You're competing with webm / mp4 not gif though. Editing the HTML attribute to width=2000% is pretty sweet however because it's a vector. I'm guessing if the example wasn't in an image tag I could select the text too?
  - SmallDeadGuy 8y ago
    If you click on the example image to view it in a new tab, you can select the text there. It could be improved, afaict you can only select a single line of text at a time and if you select the current line being typed then the selection is cleared when that line is modified.

nihil75 8y ago

Amazing stuff. And in very readable Python!

deleted 8y ago

[deleted]

andrewla 8y ago

This is great for many of the same reasons that asciinema is great -- smooth animation and selectable text. The resulting svg is orders of magnitude smaller than a gif would be. How hard would it be to add some sort of pause button to aid in selecting from the capture? Also, it appears you can only select when you are viewing the image directly, not when it is embedded via an <img> tag. Is that fixable? I guess maybe an <iframe> might work, but I haven't played with it yet.

djsumdog 8y ago
I wonder if you could just use a javascript button to pause the animation and if that would make the text selectable.

dpflan 8y ago

What're people using tools like this for? I see the usage surely when demonstrating something in the terminal - and many times used for showcasing projects and tools. Are you using the recordings for other purposes, like to document work and share progress with your team + manager for instance for work you're doing during a sprint (good for demo'ing things at the end of the sprint too).

joombaga 8y ago
It's good for right-way vs wrong-way demonstrations. If I just copy the text out of my terminal and say "this is how we used to do it; this is how we should do it/will do it now" and paste it in a jira ticket, not many people will take the time to read and understand. Gifs are more accessible I guess.
- nomel 8y ago
  Maybe it's just me, but I can't stand having to wait to watch someone slowly type something when all I want to to is know the command or understand what some output should look like. Similarly, I've never seen this sort of thing used professionally, just on blogs and project demos.
  - hutzlibu 8y ago
    It really should have a timelinecontrol ..
mikekchar 8y ago
I did an experiment a couple of years ago where I wanted to see if I could write code 1 pomodoro a day. I recorded myself in asciinema. It's basically several 25 minute pomodoros of me implementing Core Wars (a VM for machine language programs that battle against each other) in Ruby. I hadn't written Ruby in a while and I was more interested in playing experimenting with a TODO list for being efficient with such a small amount of code per day, so the code is not really fantastic. However, if you are interested I did about 60 pomodoros, I think: https://mikekchar.github.io/core-wars-kata/ https://mikekchar.github.io/core-wars-kata/ It's a super old version of asciinema (I haven't bothered to update it). Also, I recommend increasing the playback speed using the '>' key a couple of times so you don't have to suffer from my pathetically slow typing.

chrismorgan 8y ago

The primary casualty of using SVG animations is IE/Edge support; SMIL is not currently planned: https://developer.microsoft.com/en-us/microsoft-edge/platform/status/svgsmilanimation https://developer.microsoft.com/en-us/microsoft-edge/platfor.... It would be good to adjust the failure mode so that if SMIL is not supported then at least a meaningful frame (probably the last, though scrolling makes it difficult to decide!) is shown, rather than just a blank rectangle.

swebs 8y ago
Jesus, it's 2018 and they still can't even figure out how to implement animated PNGs? Real browsers had this 10 years ago. What the hell is wrong with Microsoft? Are they really just so incompetent, or is there a more insidious business reason why they don't want more animated formats on the web?
- hutzlibu 8y ago
  SMIL is something quite different and much more complex, than "animated PNGs"
  - swebs 8y ago
    I know. I just saw APNG when scrolling down in that list and was surprised to see it still not figured out.
  - chatmasta 8y ago
    Is complexity a reasonable excuse for one of the world’s largest corporations to forego a feature in their flagship browser that every other browser has implemented?
- chrismorgan 8y ago
  Firefox had (and pioneered) APNG ten years ago. Safari added APNG support four years ago. Chrome only got APNG just over a year ago.

abhiminator 8y ago

The example recording renders super smoothly in FF v61.0 and Chrome v67.0, but stutters in Safari running on an OS-X 'High Sierra' machine. That said, I'm absolutely loving this as the file size and the memory footprint of this SVG is super-small relative to what a .gif of the same content would be. Great work!

foob 8y ago

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 need to update the comparisons to include termtosvg, I can't wait to try it out and see what the file sizes look like. As others have mentioned, the major issue with SVG animations is that Microsoft doesn't plan to ever include support for them in Edge. This means that you either need to create fallbacks specifically for Microsoft browsers, or to disregard that portion of the market on your website. It's a real shame because SVG/SMIL allows you to create high quality animations which require a fraction of the bandwidth that would be necessary for comparable GIF or video files. [1] - https://github.com/sangaline/svganimator https://github.com/sangaline/svganimator [2] - https://intoli.com/blog/designing-the-wayback-machine-loading-animation/ https://intoli.com/blog/designing-the-wayback-machine-loadin... [3] - https://intoli.com/blog/terminal-recorders/ https://intoli.com/blog/terminal-recorders/

d_ 8y ago
> the major issue with SVG animations is that Microsoft doesn't plan to ever include support for them in Edge. And here I thought the Edge team left behind the mistakes of IE.
- WorldMaker 8y ago
  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/platform/status/svgsmilanimation/?q=svg https://developer.microsoft.com/en-us/microsoft-edge/platfor...
  - laurent123456 8y ago
    It's in there under "SVG+SMIL Animation" but the status is "Not currently planned". Here[0] they say that they consider the feature deprecated. [0] https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/5254111/ https://developer.microsoft.com/en-us/microsoft-edge/platfor...

arendtio 8y ago

A few weeks ago I tried to convert one of my asciinema recordings to a SVG with svg-term-cli [1], but the result had big problems with some browsers, so I took the more mainstream gif approach again. Anybody tried termtosvg with different browsers yet? [1]: https://github.com/marionebl/svg-term-cli https://github.com/marionebl/svg-term-cli

dethos 8y ago

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".

nbe 8y ago
Yes, there is no dependency on a specific player. The output is an SVG animation so you can modify it as you want. For example you could add a last frame with the logo of your project. Not being able to pause the animation is annoying, I will probably add some way to it with ECMAScript in the future.
4684499 8y ago
I think standalone is the most outstanding advantage. Many recordings of terminal are using asciiema or youtube, those links in a github readme.md file is a static screenshot instead of animated one, you have to click the link to watch the animation. You can view the animation without javascript enabled, and it's media type is image, you don't even need to convert it to base64 to use it. It's like gif but relatively smaller and with more colors, and it's Scalable Vector.

Demiurge 8y ago

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

nbe 8y ago
Thanks! I will look into the virtualenv problem, but if you can spare the time could you please open an issue and include the exact steps to reproduce the error? https://github.com/nbedos/termtosvg/issues/new https://github.com/nbedos/termtosvg/issues/new

b0rsuk 8y ago

I'm very impressed - it combines two of my favourite technologies, Python and SVG. Three, in fact - including terminal. I will be watching it and tinkering with it. It's written in modern Python and well documented. However, some functions are a bit monolithic: https://github.com/nbedos/termtosvg/blob/master/termtosvg/term.py#L215 https://github.com/nbedos/termtosvg/blob/master/termtosvg/te...

dc443 8y ago

This is super awesome, but will there ever be an ability to pause/rewind/scrub?

vanderZwan 8y ago
Well, the animation is inherent to the SVG, so either browsers would need to support that, or some kind of JavaScript library is needed to extract that (probably giving Edge animation support while it's at it)

eltoozero 8y ago

If only ffmpeg->mp4 instead of svg... I had just thrown together a typescript bash script to record IRC with timing for later playback and sync with a podcast, the trick is the rendering step: in theory it could be done on a canvas with native ffmpeg drawtext, but the invocation is super gnarly.

77pt77 8y ago

SVG is one of those technologies that never really caught on, even though it would have made life much easier for everyone.

hutzlibu 8y ago
If the standard would have been clear and simple - then maybe yes. But in my opinion it was and still is, a huge mess. It somewhat works now, but ... it is a subset, that works. But it is not evil intention(nor the fault of Adobe or now Microsoft), that the love for SVG is not the greatest.
canada_dry 8y ago
cough https://d3js.org/ https://d3js.org/

Pawamoy 8y ago

Sadly, I will not replace asciinema+svg-term-cli by termtosvg, because termtosvg takes the terminal size into account when recording, not when rendering. It means that I have to resize my terminal before recording, and that I will not be able to resize it differently for rendering. So if lines are wrapped, I cannot change the width to de-wrap them in the resulting SVG. Asciinema does not care about your terminal size when recording. In fact you can even reduce it or hide it (if you automate the input). Then you render it with svg-term-cli with the width you feel it is best.

m3tr0s 8y ago

You could differentiate more from asciinema by building editing tools around the recording (like cutting or embedding the recording in stock frames like in https://shotsnapp.com https://shotsnapp.com)

m3tr0s 8y ago
Have a look here also: https://github.com/cirocosta/asciinema-edit https://github.com/cirocosta/asciinema-edit

jscoder99 8y ago

Pretty Cool