[feature request] Generate a screenshot svg + animation svg

[kaushalmodi]

Can termtosvg generate 2 svgs?

1. A screenshot svg with a play button (or something like that) in the center
2. The actual animation svg that is already generated

Rationale 1

When these svg's are embedded in blog posts, we don't want the browser to load the huge svg animation until user clicks on them. By "huge", I mean that the page would be 20KB in total (HTML+CSS), but a small animation svg would be 2MB!

With a "play button screenshot svg", I can have this in my blog post:

[![](https://example.com/link/to/screenshot.svg)](https://example.com/link/to/animation.svg)

This would allow the page loads to be snappy and the animation will be downloaded only when the user clicks on the play-button-screenshot-svg.

Rationale 2

This will also allow svg's to not be always running in a loop (which I don't prefer personally). Many other users might also appreciate this.

[nbedos]

Thanks for the (detailed!) feature request.

There probably should be a way to dump every frame of the animation in SVG format so that you can get a "screenshot", I agree with you on that.

I'm not sure about the "play button" though, but I'll definitely consider it. Overlaying a triangle on an SVG image is quite easy to do by hand, so is it worth adding a way to do this with termtosvg? I get that not everyone wants to spend time fiddling with SVG code and that having a tool that just works is great, but it is a very specific feature.

Maybe we could find a feature that would cover this use case but also many others? Would overlaying a random image on a still capture of the animation be useful? It could be used to overlay an image with the logo of your own app and a play button on top of the first frame of the animation? Of course it means the user provides the SVG image themselves.

[kaushalmodi]

Overlaying a triangle on an SVG image is quite easy to do by hand, so is it worth adding a way to do this with termtosvg?

It was just a suggestion as I am not familiar with svg syntax. If you can suggest an add-on miniscript to do this in a Wiki or even this issue, that would be great!

Would overlaying a random image on a still capture of the animation be useful?

That would be useful. I just wonder how that would deal with arbitrary terminal sizes? If that unnecessary complicates your job just for this one request, you can skip the overlaying portion of this request.

Summary:

• Have termtosvg output a "screenshot" image (probably a random frame from the whole recording?)
• Optionally provide user-instructions to overlay that "screenshot" with play button, or may be user-defined text like "Click this image to see the animation".
• Optionally support overlaying user-provided svg.. though I am not sure how that will work with arbitary terminal sizes.

[felixfbecker]

My use case is much simpler, all I want is a static SVG screenshot of a terminal (that will scale nice vs an ordinary SVG) for the docs of a CLI I am writing. I don't need a play button, nor an animated recording. Is it possible to do that?

[felixfbecker]

It would also be great if that static SVG worked in browsers too that don't support SVG animations (i.e. Edge)

[nbedos]

My use case is much simpler, all I want is a static SVG screenshot of a terminal (that will scale nice vs an ordinary SVG) for the docs of a CLI I am writing. I don't need a play button, nor an animated recording. Is it possible to do that?

The only way I can see this be included in termtosvg is under the form of an option that would dump all the frames of the animations in SVG format into a directory. You would then have to pick the one you want. How does that sound?

[kaushalmodi]

@nbedos

The only way I can see this be included in termtosvg is under the form of an option that would dump all the frames of the animations in SVG format into a directory. You would then have to pick the one you want.

That sounds reasonable.

[davidak]

This would be very useful, including play button.

Rational: I don't want to distract the reader of my README, so play only when one clicks on it. I think this should even be default setting.

[nbedos]

I've implemented a new CLI option to enable rendering of individual frames: 6ea3f67

It works like this:

(.venv) nico ~/termtosvg $ termtosvg -s
Recording started, enter "exit" command or Control-D to end
nico ~/termtosvg $ echo "my super cool recording"
my super cool recording
nico ~/termtosvg $ exit
exit
Rendering ended, SVG frames are located at /tmp/termtosvg_bfezf0lw
(.venv) nico ~/termtosvg $ ls /tmp/termtosvg_bfezf0lw
termtosvg_00000.svg  termtosvg_00013.svg  termtosvg_00026.svg
termtosvg_00001.svg  termtosvg_00014.svg  termtosvg_00027.svg
termtosvg_00002.svg  termtosvg_00015.svg  termtosvg_00028.svg
termtosvg_00003.svg  termtosvg_00016.svg  termtosvg_00029.svg
termtosvg_00004.svg  termtosvg_00017.svg  termtosvg_00030.svg
termtosvg_00005.svg  termtosvg_00018.svg  termtosvg_00031.svg
termtosvg_00006.svg  termtosvg_00019.svg  termtosvg_00032.svg
termtosvg_00007.svg  termtosvg_00020.svg  termtosvg_00033.svg
termtosvg_00008.svg  termtosvg_00021.svg  termtosvg_00034.svg
termtosvg_00009.svg  termtosvg_00022.svg  termtosvg_00035.svg
termtosvg_00010.svg  termtosvg_00023.svg  termtosvg_00036.svg
termtosvg_00011.svg  termtosvg_00024.svg  termtosvg_00037.svg
termtosvg_00012.svg  termtosvg_00025.svg  termtosvg_00038.svg
(.venv) nico ~/termtosvg $

Basically you get all frames of the animation stored in a directory. If you specify the -s flag you only get still frames though, no animated SVG. If you want both an animated SVG and still frames you'll have to do it in three steps:

1. termtosvg record recording.cast
2. termtosvg render recording.cast animation.svg
3. termtosvg render recording.cast still_frames/ -s

I've added a new template with a play button in the middle of the screen: https://github.com/nbedos/termtosvg/blob/6ea3f6790d07ecb0090e5daa38abfc207f279659/termtosvg/data/templates/gjm8_play.svg

So those of you that wanted to add a play button to a screenshot just have to specify the right template with the -t switch : termtosvg -s -t gjm8_play. I'll probably make similar templates for other color schemes.

Let me know what you all think.

[nbedos]

Feature released as part of 0.8.0.

[polyzen]

/tmp > termtosvg render recording.cast -s still_frames/
usage: termtosvg render input_file [output_path] [-m MIN_DURATION]
                 [-M MAX_DURATION] [-s] [-t TEMPLATE] [-h]
termtosvg: error: unrecognized arguments: still_frames/

Edit: Works if you use the positioning shown by the usage information.

[nbedos]

@polyzen Thanks for pointing this out. The usage information is correct, I've edited my comment.