
Show HN: Termtosvg – Record terminal sessions as SVG animations - nbe
https://github.com/nbedos/termtosvg
======
foob
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-
loadin...](https://intoli.com/blog/designing-the-wayback-machine-loading-
animation/)

[3] - [https://intoli.com/blog/terminal-
recorders/](https://intoli.com/blog/terminal-recorders/)

~~~
nbe
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...](https://github.com/nbedos/termtosvg/blob/master/examples/examples.md)

~~~
bonyt
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.

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

------
fsiefken
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
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-
fdba...](https://hackernoon.com/presenting-your-code-beautifully-fdbab9e6fb68)

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.

~~~
Already__Taken
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
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.

------
andrewla
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
I wonder if you could just use a javascript button to pause the animation and
if that would make the text selectable.

------
chrismorgan
The primary casualty of using SVG animations is IE/Edge support; SMIL is not
currently planned: [https://developer.microsoft.com/en-us/microsoft-
edge/platfor...](https://developer.microsoft.com/en-us/microsoft-
edge/platform/status/svgsmilanimation).

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
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
SMIL is something quite different and much more complex, than "animated PNGs"

~~~
chatmasta
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?

------
okket
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]

~~~
AndrewStephens
I don't see any problems with Safari 11.1.1 on macOSX or on mobile Safari on
my iPhone.

~~~
okket
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.

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

------
b0rsuk
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/te...](https://github.com/nbedos/termtosvg/blob/master/termtosvg/term.py#L215)

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

~~~
4684499
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.

------
dpflan
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
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
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
It really should have a timelinecontrol ..

------
arendtio
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)

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

~~~
hutzlibu
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.

------
abhiminator
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!

------
m3tr0s
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
Have a look here also: [https://github.com/cirocosta/asciinema-
edit](https://github.com/cirocosta/asciinema-edit)

------
Demiurge
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
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)

------
nihil75
Amazing stuff. And in very readable Python!

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

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

~~~
vanderZwan
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
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.

------
jscoder99
Pretty Cool

