How to share terminal demos as razor-sharp animated SVG

Author

Wasim Lorgat

Published

December 15, 2022

  1. Install asciinema and svg-term-cli.

  2. Record with asciinema:

    asciinema rec demo.cast

    This records the session in the asciicast v2 plaintext file format (newline-delimited JSON with an initial header object followed by a timestamped event stream of stdin and stdout).

  3. Convert the .cast file to .svg with svg-term-cli:

    svg-term --in demo.cast --out demo.svg --window --width 80 --height 22 --no-optimize
    • You probably want to play around with width and height
    • window adds a fake OS window around the terminal session
    • I found that no-optimize fixed some weird font rendering issues on my macOS – not sure why

Here’s an example I created for my blog post Build a text editor with Python and curses: