Hacker News new | ask | show | jobs
by transitivebs 2910 days 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-fdba...

As I explained in the above article, this is already possible with asciinema + 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.

3 comments

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?

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.
video codecs are not the right tool for this job. Consider subpixel-AA for fonts, partially transparent backgrounds, 4:4:4 instead of 4:2:0 and the ability to zoom as you mentioned.

Block artifacts are really annoying when you try to read something on screen recordings.

And svg texts can be made selectable when not loaded as images, so you could copy straight from the recording.

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!

Asciinema is not gif. The text be zoomed in and is still super crisp and you can select the text.