marionebl/svg-term-cli

Share terminal sessions via SVG and CSS

Share terminal sessions as razor-sharp animated SVG everywhere

Example generated with svg-term --cast 113643 --out examples/parrot.svg --window --no-cursor --from=4500

svg-term-cli

• 💄 Render asciicast to animated SVG
• 🌐 Share asciicasts everywhere (sans JS)
• 🤖 Style with common color profiles

Install

1. Install asciinema via: https://asciinema.org/docs/installation
2. Install svg-term-cli:

   npm install -g svg-term-cli

Usage

Generate the parrot.svg example from asciicast at https://asciinema.org/a/113643

svg-term --cast=113643 --out examples/parrot.svg --window

Interface

λ svg-term --help

  Share terminal sessions as razor-sharp animated SVG everywhere

  Usage
    $ svg-term [options]

  Options
    --at            timestamp of frame to render in ms [number]
    --cast          asciinema cast id to download [string], required if no stdin provided [string]
    --command       command to record [string]
    --from          lower range of timeline to render in ms [number]
    --height        height in lines [number]
    --help          print this help [boolean]
    --in            json file to use as input [string]
    --no-cursor     disable cursor rendering [boolean]
    --no-optimize   disable svgo optimization [boolean]
    --out           output file, emits to stdout if omitted, [string]
    --padding       distance between text and image bounds, [number]
    --padding-x     distance between text and image bounds on x axis [number]
    --padding-y     distance between text and image bounds on y axis [number]
    --profile       terminal profile file to use, requires --term [string]
    --term          terminal profile format [iterm2, xrdb, xresources, terminator, konsole, terminal, remmina, termite, tilda, xcfe], requires --profile [string]
    --to            upper range of timeline to render in ms [number]
    --width         width in columns [number]
    --window        render with window decorations [boolean]

  Examples
    $ cat rec.json | svg-term
    $ svg-term --cast 113643
    $ svg-term --cast 113643 --out examples/parrot.svg

Rationale

Replace GIF asciicast recordings where you can not use the asciinema player, e.g. README.md files on GitHub and the npm registry.

The image at the top of this README is an example. See how sharp the text looks, even when you zoom in? That’s because it’s an SVG!

Related

• asciinema/asciinema - Terminal session recorder
• derhuerst/asciicast-to-svg - Render frames of Asciicasts as SVGs
• marionebl/svg-term - Render asciicast to animated SVG
• marionebl/term-schemes - Parse and normalize common terminal emulator color schemes

Gallery

• marionebl/commitlint
• marionebl/share-cli
• marionebl/remote-share-cli

License

Copyright 2017. Released under the MIT license.

svg-term-cli's Issues

Feature Request: Pause animation for couple of seconds

Hello,

I would like to pause short animations as the viewer cannot see what is going on in a short loop.

Command

Sleep/Pause in ms:

svg-term --cast xxx --out xxx.svg --pause 500

Example

Merge all frames (aka one static SVG)

Would be cool to be able to merge the whole cast to one static SVG.
(similar to https://github.com/misc0110/asciicast2vector)

Extract a single frame

Would it be feasible to extract just a single frame as an SVG?

Unknown flag "frame"

The frame flag is missing.

May I also suggest to refactor this great project using commander.js as you reinvented the wheel.

Setup

svg-term: 2.0.3
NodeJS: 8.7.0
NPM: 5.6.0
OS: Ubuntu 17.04

Command

svg-term --cast 113643 --out examples/parrot.svg --frame --no-cursor --from=450

Issue

svg-term: remove unknown flags --frame

cat not echo in example

I may be mistaken but shouldn't the examples from svg-term --help use cat not echo:

Examples
    $ echo rec.json | svg-term

vs

Examples
    $ cat rec.json | svg-term

Incorrect spacing under Windows and MacOS

Hello,

there is strange / incorrect spacing under Windows for Chrome and Firefox caused by the Consolas font.

Core dump after huge hang on relatively small cast

When attempting to convert a relatively small cast demo.cast.txt, I got this:

Stack trace

 svg-term --in demo.cast --out demo.svg --width=104 --height=82

<--- Last few GCs --->

[55408:0x55a83c1e3250]   996781 ms: Mark-sweep 1560.5 (2027.7) -> 1560.4 (1965.7) MB, 1398.6 / 0.3 ms  (+ 0.0 ms in 0 steps since start of marking, biggest step 0.0 ms, walltime since start of marking 1540 ms) last resort GC in old space requested
[55408:0x55a83c1e3250]   998192 ms: Mark-sweep 1560.4 (1965.7) -> 1560.4 (1943.2) MB, 1410.8 / 0.0 ms  last resort GC in old space requested


<--- JS stacktrace --->

==== JS stack trace =========================================

Security context: 0xf3856698fe1 <JSObject>
    0: builtin exit frame: freeze(this=0xf3856698229 <JSFunction Object (sfi = 0xf3856698191)>,0x359fe6bffd31 <Object map = 0x124b4d504989>)

    1: createElement [/usr/lib/node_modules/svg-term-cli/node_modules/react/cjs/react.development.js:~727] [pc=0x3de9c3698345](this=0x194534d27c41 <Object map = 0x83fe79620d9>,type=0x30f593638731 <String[3]: use>,config=0x1773c4e13bc9 <Object map = 0x124b4d...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
 1: node::Abort() [svg-term]
 2: 0x55a83b478011 [svg-term]
 3: v8::Utils::ReportOOMFailure(char const*, bool) [svg-term]
 4: v8::internal::V8::FatalProcessOutOfMemory(char const*, bool) [svg-term]
 5: v8::internal::Factory::NewMap(v8::internal::InstanceType, int, v8::internal::ElementsKind) [svg-term]
 6: v8::internal::Map::RawCopy(v8::internal::Handle<v8::internal::Map>, int) [svg-term]
 7: v8::internal::Map::CopyDropDescriptors(v8::internal::Handle<v8::internal::Map>) [svg-term]
 8: v8::internal::Map::CopyReplaceDescriptors(v8::internal::Handle<v8::internal::Map>, v8::internal::Handle<v8::internal::DescriptorArray>, v8::internal::Handle<v8::internal::LayoutDescriptor>, v8::internal::TransitionFlag, v8::internal::MaybeHandle<v8::internal::Name>, char const*, v8::internal::SimpleTransitionFlag) [svg-term]
 9: v8::internal::Map::Copy(v8::internal::Handle<v8::internal::Map>, char const*) [svg-term]
10: v8::Maybe<bool> v8::internal::JSObject::PreventExtensionsWithTransition<(v8::internal::PropertyAttributes)5>(v8::internal::Handle<v8::internal::JSObject>, v8::internal::Object::ShouldThrow) [svg-term]
11: v8::internal::JSReceiver::SetIntegrityLevel(v8::internal::Handle<v8::internal::JSReceiver>, v8::internal::PropertyAttributes, v8::internal::Object::ShouldThrow) [svg-term]
12: 0x55a83ae2e02f [svg-term]
13: 0x3de9c34196dd
Aborted (core dumped)

Not sure what other diagnostic information I should provide, lmk.

I think I noticed someone else discussing node's memory limits, & that they can be increased, but I assume their default is a reasonable value, & my small cast really shouldn't be hitting that. My PC itself has 64GB.

The following works (taken from readme)

svg-term --cast=113643 --out parrot.svg

extend last frame with --to

--to only seems to shorten but it would make more useful if it could lengthen as well

Last column is partially cut

I had a similar problem as #33, the last column was partially cut and wrapped around to the 0th column.
But in my case, I just ran cat demo.cast | svg-term --out cast.svg.
I solved it by manually editing svg-term's index.js's render function, after loading the cast options I manually incremented the value of width cast.width += 1;.

Animation not playing in IE and Edge

In IE 11 and MS Edge animations are not playing. This is caused by missing support for the css transform property on SVG.

The suggested workaround of using the transform attribute instead is not available to us, as we can't run JavaScript when embedding via <img>.

--

Currently I can't see a solution where we actually play animation for IE/Edge. A fallback to a static frame of the users choosing might be achievable via @supports

Install Instructions Not Working

Running the command from the readme.md results in a failure to install due to permissions.

username@username-MachineName:~$ npm install -g svg-term-cli
npm ERR! code EACCES
npm ERR! syscall mkdir
npm ERR! path /usr/local/lib/node_modules/svg-term-cli
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/svg-term-cli'
npm ERR!  [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/svg-term-cli'] {
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'mkdir',
npm ERR!   path: '/usr/local/lib/node_modules/svg-term-cli'
npm ERR! }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/username/.npm/_logs/2022-12-23T06_34_15_525Z-debug-0.log

The log file around line 930 repeats this same message.
I tried removing the -g flag from the install command, and npm gave me warnings about the package containing known vulnerabilities

added 202 packages, and audited 469 packages in 21s

71 packages are looking for funding
  run `npm fund` for details

10 vulnerabilities (7 high, 3 critical)

To address issues that do not require attention, run:
  npm audit fix

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.

Proceeded to try the parrot example from the readme; I downloaded the parrot.json and ran the commands after it finished installing, and well.

user@user-MachineName:~/Desktop$ svg-term --cast=113643 --out parrot.svg --window
Could not find command-not-found database. Run 'sudo apt update' to populate it.
svg-term: command not found
user@user-MachineName:~/Desktop$ svg-term-cli
Could not find command-not-found database. Run 'sudo apt update' to populate it.
svg-term-cli: command not found
user@user-MachineName:~/Desktop$ 

Optimizations or suggestions?

I currently use this for generating the console example at https://lass.js.org.

It however is pretty slow to render/load the page, despite the < 1 MB SVG file size.

Curious if you had any tips or flags to optimize it better.

Rendering issues with e.g. boxen

There are rendering issues with the output of e.g. the boxen library. Looks like the line height currently is too big.

Fatal error: ineffective mark-compacts near heap limit allocation failed - Javascript heap out of memory

I am trying to convert a rather long (~80 s) cast to svg, but I am hitting a memory issue:

mathieu@xiaomimi-solus ~ $ npx svg-term-cli --cast=336443 --out asciicast-nnn.svg --window
npx: installed 201 in 9.255s

<--- Last few GCs --->

[548208:0x396a570]    92078 ms: Scavenge 1786.8 (2059.9) -> 1775.1 (2062.1) MB, 16.7 / 0.0 ms  (average mu = 0.268, current mu = 0.222) allocation failure 
[548208:0x396a570]    92191 ms: Scavenge 1792.9 (2062.1) -> 1781.2 (2064.4) MB, 18.1 / 0.0 ms  (average mu = 0.268, current mu = 0.222) allocation failure 
[548208:0x396a570]    92296 ms: Scavenge 1799.4 (2064.4) -> 1787.5 (2066.6) MB, 18.4 / 0.0 ms  (average mu = 0.268, current mu = 0.222) allocation failure 


<--- JS stacktrace --->

==== JS stack trace =========================================

   0: ExitFrame [pc: 0x1296b99]
Security context: 0x25bdbbac08a1 <JSObject>
   1: p [0x2485eba27579] [/home/mathieu/.npm/_npx/548208/lib/node_modules/svg-term-cli/node_modules/load-asciicast/index.js:~2044] [pc=0x23eff06629e](this=0x3d169de03061 <JSGlobal Object>,0x3f7693688399 <JSObject>)
   2: /* anonymous */ [0x1c49ead282d1] [/home/mathieu/.npm/_npx/548208/lib/node_modules/svg-term-cli/node_modules/load-asciicast/index.js:~1204] [pc...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

Writing Node.js report to file: report.20200604.131906.548208.0.001.json
Node.js report completed
1: 0x91b658 node::Abort() [svg-term]
2: 0x91caa1 node::OnFatalError(char const*, char const*) [svg-term]
3: 0xa93a32 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [svg-term]
4: 0xa93cee v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [svg-term]
5: 0xc20e35  [svg-term]
6: 0xc33dac v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [svg-term]
7: 0xc34aab v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [svg-term]
8: 0xc36f3c v8::internal::Heap::AllocateRawWithLightRetry(int, v8::internal::AllocationType, v8::internal::AllocationAlignment) [svg-term]
9: 0xc37261 v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationType, v8::internal::AllocationAlignment) [svg-term]
10: 0xbfc9e9 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType) [svg-term]
11: 0xf33f42 v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [svg-term]
12: 0x1296b99  [svg-term]
Aborted

Is the conversion for that kind of long cast totally unrealistic? Would the end file be huge if there are not too many colours in the original cast? What I would like to do is embed the animation in a README page for demo, which is not doable with the base asciinema cast format.

Setting the speed of an asciinema cast SVG?

We're using this utility to create animated SVGs of a terminal recording, as per manubot/manubot#63 and manubot/manubot#64.

Is it possible to change the speed (i.e. increase / decrease framerate) of the SVG export? I am looking for an equivalent of asciinema's speed parameter, e.g. https://asciinema.org/a/205085?speed=2.

SVGs don't render correctly on GitHub

https://github.com/adius/svg-term-bug

This is a strange bug. The images look OK in every program I checked them, but not on GitHub.

I think the problem has either to do with GitHub sanitizing the SVGs (sanitize=true) or that they are loaded in an image tag. Altough the normal and the sanitized SVG code looks OK.

I think I remember that SVGs in images are treated as XML and otherwise as HTML and you're using some weird in code, which might be only allowed in HTML. But on the other hand the images in your projects seem to be OK .... 😩

Node always fatal errors

Trying one of the examples I just get:

svg-term --cast=113643 --out examples/parrot.svg                   
/Users/lukechilds/.config/yarn/global/node_modules/svg-term-cli/lib/cli.js:355
            throw err;
            ^

TypeError: Cannot use 'in' operator to search for 'black' in undefined
    at REQUIRED_COLORS.filter.key (/Users/lukechilds/.config/yarn/global/node_modules/term-schemes/lib/parsers/hyper.js:122:30)
    at Array.filter (<anonymous>)
    at getHyperConfigErrors (/Users/lukechilds/.config/yarn/global/node_modules/term-schemes/lib/parsers/hyper.js:122:10)
    at Object.hyper (/Users/lukechilds/.config/yarn/global/node_modules/term-schemes/lib/parsers/hyper.js:23:22)
    at extractTheme (/Users/lukechilds/.config/yarn/global/node_modules/svg-term-cli/lib/cli.js:292:24)
    at getTheme (/Users/lukechilds/.config/yarn/global/node_modules/svg-term-cli/lib/cli.js:277:11)
    at /Users/lukechilds/.config/yarn/global/node_modules/svg-term-cli/lib/cli.js:147:23
    at Generator.next (<anonymous>)
    at fulfilled (/Users/lukechilds/.config/yarn/global/node_modules/svg-term-cli/lib/cli.js:5:58)
    at <anonymous>

I've tested on 2.0.4, 2.0.3 and 2.1.0-1. All give me the same error.

Simplify recording a command

My most common use-case for this CLI is to record a command with asciinema and pass it to svg-term-cli without saving the recording. Would be nice if that was as simple as using a flag here.

Currently, I have to do:

temp_file=$(mktemp); asciinema rec $temp_file --command="node example.js" --quiet; cat $temp_file | svg-term --out=screenshot.svg

Would be nicer to be able to do:

svg-term --command="node example.js" --out=screenshot.png

svg-term-cli would then just spawn asciinema or tell the user to brew install asciinema if it's not installed.

Animation not playing in MS PowerPoint

Not sure if this is a bug or just not supported in MS PowerPoint. Could be related to #11

When inserting an svg created with svg-term, PowerPoint only show the first frame. Same in presentation mode. PP is also becoming realy slow and unresponsive.

Any ideas? The svg is playing fine in my browser.

Allocation failed - JavaScript heap out of memory

Reproduce

svg-term --cast 47HiIPl0HQxrJ0R0vR9qpxzS4 --window --out animating-my-name.svg

Description

After running this command, my computer was noticeably slow, my mouse was not reponding sometimes. I quickly tried to run htop command in Linux:

After waiting a while, Nodejs logged these lines:

<--- Last few GCs --->

[313356:0x513b270]    89040 ms: Scavenge 1892.2 (2064.9) -> 1879.9 (2064.9) MB, 6.7 / 0.0 ms  (average mu = 0.255, current mu = 0.145) allocation failure 
[313356:0x513b270]    89205 ms: Scavenge 1896.4 (2064.9) -> 1886.5 (2067.6) MB, 24.6 / 0.0 ms  (average mu = 0.255, current mu = 0.145) allocation failure 
[313356:0x513b270]    90199 ms: Mark-sweep 1904.1 (2067.6) -> 1880.2 (2068.9) MB, 878.9 / 0.0 ms  (average mu = 0.299, current mu = 0.342) allocation failure scavenge might not succeed


<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0xa04200 node::Abort() [svg-term]
 2: 0x94e4e9 node::FatalError(char const*, char const*) [svg-term]
 3: 0xb7978e v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [svg-term]
 4: 0xb79b07 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [svg-term]
 5: 0xd34395  [svg-term]
 6: 0xd34f1f  [svg-term]
 7: 0xd42fab v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [svg-term]
 8: 0xd46b6c v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [svg-term]
 9: 0xd1524b v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [svg-term]
10: 0x105b23f v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [svg-term]
11: 0x1401219  [svg-term]

Unnecessary padding at the top

You can see the svg that has been created here which has unnecessary padding at the top. The command used is:

svg-term --cast 193115 --window --width 80 --height 20 --from 100

Can I know how to fix it? Thanks.

Display initial command line prompt

When I run svg-term --command='echo "test"' --at 2000 > test.svg the image only contains:

test

Is there a way to change it so it displays the whole interaction?

$ echo "test"
test

asciicast v2 can't run #Fix

I'm use asciicast v2 from asciinema and download as .cast file but it can't run.

How to solve it? thx!

{ err: 'only asciicast v1 and v2 formats can be opened' }

/usr/local/lib/node_modules/svg-term-cli/lib/cli.js:406
            throw err;
            ^
only asciicast v1 and v2 formats can be opened

Bundle common term schemes

Bundle a selection of common term schemes with svg-term-cli to allow for machine-independent output.

• Seti
• Atom Light
• Atom Dark
• Solarized Light
• Solarized Dark
• Snazzy

How to set list of fonts? Especial need for NERD fonts

tags: nerd font, powerline

Add support for Hyper

Hyper.app exposes itself via TERM_PROGRAM.

❯ echo $TERM_PROGRAM 
Hyper

---

• Term detection
• Profile detection
• Depends on marionebl/term-schemes#1

Support for asciicast 'idle_time_limit'

Asciicast version 2 files have a setting for 'idle_time_limit'. This is meant to compresses time differences bigger than the set amount. It is handy for making clean demos. svg-term-cli is not respecting that field currently.

Use `hasOwnProperty` instead of `in`

https://stackoverflow.com/questions/13632999/if-key-in-object-or-ifobject-hasownpropertykey

How can i get get did of excess whitespace?

Consider the following asciinema. svg-term --cast=269490 --out test.svg. The output includes a huge whitespace. How can I get rid of this?

Spice: Embed fonts, window titles, right-sided window icons

I recently discovered this while working on my current project freyr-js.
Great work, well done.

I've tried out a number of other options that all had one problem or the other.
Until I found this.

• asciicast2gif floods my memory and takes over 10 minutes to compile.
• terminalizer sometimes doesn't render properly even though it does a better job at staying in check in terms of memory.

These two, because they're GIFs rely on either spawning a headless chromium instance (through electron/puppeteer) or phantomjs, and then merging the frames whether by piping into gifsicle or gif-encoder.

This takes a better approach and can end up with better results, depending on the use-case.
I decided to extend the output SVG from this and embed into it.

Check it out: https://github.com/miraclx/svgembed

Errors should be logged to `stderr` and not `stdout`

svg-term-cli/src/cli.ts

Lines 492 to 500 in 2b27a6d

	fn(cli).catch(err => {
	console.log({err});
	setTimeout(() => {
	if (typeof err.help === "function") {
	console.log(err.help());
	console.log("\n", chalk.red(err.message));
	process.exit(1);
	}
	throw err;

`--from`, `--to` and `--at` using milliseconds is confusing

No matter what values I enter I always just get the initial view and nothing happens.

Adding drop shadow under the window

Hi,

First of all, thanks for this very useful tool!

I tried to add some drop shadow under the window, and got a pretty nice result. However, some characters are a bit out of offset and messy, as illustrated in this screenshot:

I guess character offsets need to be adjusted for the drop shadow, and I'm not sure it's something that can be done easily just by messing with the SVG? In any case, it would be a nice option to have in svg-term.

Here's what I did to get this drop-shadow. Note the addition of viewBox in <svg>, the <defs> node and filter="url(#dropshadow)" on the first <rect>.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="840" height="602.75"  viewBox="-70 -40 980 702.75">
<defs>
  <filter id="dropshadow" height="130%">
    <feGaussianBlur in="SourceAlpha" stdDeviation="20"/> 
    <feOffset dx="2" dy="12" result="offsetblur"/>
    <feComponentTransfer>
      <feFuncA type="linear" slope="0.9"/>
    </feComponentTransfer>
    <feMerge> 
      <feMergeNode/>
      <feMergeNode in="SourceGraphic"/> 
    </feMerge>
  </filter>
</defs>
<rect width="840" height="602.75" rx="5" ry="5" class="a" filter="url(#dropshadow)" />
...

Any pointer would be much appreciated!

Error: Invalid character crash on my aciinema recording

On the latest release, I'm getting a crash when I try to use this on my recording. This reproduces using --cast and using --in.

▻ svg-term --cast=Psv7iVedvswxtGMo4AE8F2AkH 
{
  err: Error: Invalid character (in string:  at index 0
      at XMLStringifier.module.exports.XMLStringifier.assertLegalChar (/usr/local/lib/node_modules/svg-term-cli/node_modules/xmlbuilder/lib/XMLStringifier.js:153:15)
      at XMLStringifier.assertLegalChar (/usr/local/lib/node_modules/svg-term-cli/node_modules/xmlbuilder/lib/XMLStringifier.js:4:59)
      at XMLStringifier.module.exports.XMLStringifier.eleText (/usr/local/lib/node_modules/svg-term-cli/node_modules/xmlbuilder/lib/XMLStringifier.js:33:19)
      at new XMLText (/usr/local/lib/node_modules/svg-term-cli/node_modules/xmlbuilder/lib/XMLText.js:17:35)
      at XMLElement.module.exports.XMLNode.text (/usr/local/lib/node_modules/svg-term-cli/node_modules/xmlbuilder/lib/XMLNode.js:165:15)
      at XMLElement.module.exports.XMLNode.txt (/usr/local/lib/node_modules/svg-term-cli/node_modules/xmlbuilder/lib/XMLNode.js:365:19)
      at walk_obj (/usr/local/lib/node_modules/svg-term-cli/node_modules/plist/lib/build.js:127:30)
      at walk_obj (/usr/local/lib/node_modules/svg-term-cli/node_modules/plist/lib/build.js:110:9)
      at walk_obj (/usr/local/lib/node_modules/svg-term-cli/node_modules/plist/lib/build.js:110:9)
      at Object.build (/usr/local/lib/node_modules/svg-term-cli/node_modules/plist/lib/build.js:75:3)
}
/usr/local/lib/node_modules/svg-term-cli/lib/cli.js:406
            throw err;
            ^

Error: Invalid character (in string:  at index 0
    at XMLStringifier.module.exports.XMLStringifier.assertLegalChar (/usr/local/lib/node_modules/svg-term-cli/node_modules/xmlbuilder/lib/XMLStringifier.js:153:15)
    at XMLStringifier.assertLegalChar (/usr/local/lib/node_modules/svg-term-cli/node_modules/xmlbuilder/lib/XMLStringifier.js:4:59)
    at XMLStringifier.module.exports.XMLStringifier.eleText (/usr/local/lib/node_modules/svg-term-cli/node_modules/xmlbuilder/lib/XMLStringifier.js:33:19)
    at new XMLText (/usr/local/lib/node_modules/svg-term-cli/node_modules/xmlbuilder/lib/XMLText.js:17:35)
    at XMLElement.module.exports.XMLNode.text (/usr/local/lib/node_modules/svg-term-cli/node_modules/xmlbuilder/lib/XMLNode.js:165:15)
    at XMLElement.module.exports.XMLNode.txt (/usr/local/lib/node_modules/svg-term-cli/node_modules/xmlbuilder/lib/XMLNode.js:365:19)
    at walk_obj (/usr/local/lib/node_modules/svg-term-cli/node_modules/plist/lib/build.js:127:30)
    at walk_obj (/usr/local/lib/node_modules/svg-term-cli/node_modules/plist/lib/build.js:110:9)
    at walk_obj (/usr/local/lib/node_modules/svg-term-cli/node_modules/plist/lib/build.js:110:9)
    at Object.build (/usr/local/lib/node_modules/svg-term-cli/node_modules/plist/lib/build.js:75:3)
1 ↩

Rendering issues with output

See https://github.com/GoogleChromeLabs/jsvu/blob/be49b12f5393cb2681a4cdac73ad48d9245f3dac/README.md#jsvu- — any idea what’s going wrong here?

The relevant commit is GoogleChromeLabs/jsvu@be49b12 and the command used to create the SVG is:

svg-term --cast=rfS1M5ynKm1hGaBqJYJj0mGCi --frame --at=43250 --out=screenshot.svg

Comment colour not showing

Hi, me again :)

In my shell (zsh) I have comments enabled. These show up light grey in my terminal, however svg-term outputs them as dark black. Seems like it's just falling back to the default SVG fill colourI because it can't detect it. Is there a way to fix this?

Currently manually adding fill="#645240" to the root SVG element to resolve the problem.

featreq: term: kitty

Add support for kitty term

Node is freezing

Hello,

svg-term works perfect on my machine with the given 113643 example cast.

There seems to be an issue with new formats. I had to download my new cast in the version 1 syntax as svg-term told me that only version 1 and version 2 syntax are supported.

Watch cast: https://asciinema.org/a/znqFxSzM9CmIJINrmn2IzPX5g
Download JSON: https://asciinema.org/a/znqFxSzM9CmIJINrmn2IzPX5g.cast?dl=true

Setup

svg-term: 2.0.3
NodeJS: 8.7.0
NPM: 5.6.0
OS: Ubuntu 17.04

Command

svg-term --in 156579.json --out 156579.svg

svg-term --cast znqFxSzM9CmIJINrmn2IzPX5g --out 156579.svg

Issue

The terminal and sometimes my whole machine is freezing - there is no way to cancle it using CTRL+C. No output is being processed.

term and profile seems not work.

I want to change the look and feel of the generated svg.
I executed the following command

svg-term --cast=udUD5QeJ5dBk0dF8fQsiyyppy --out quickstart1.svg --window

and

svg-term --cast=udUD5QeJ5dBk0dF8fQsiyyppy --out quickstart2.svg --window --term iterm2 --profile  "Afterglow.itermcolors"

The Afterglow.itermcolors profile was download from https://github.com/mbadolato/iTerm2-Color-Schemes/tree/master/schemes, but the generated two files are the same.

I read the readme, but could not find how to use term and profile options.

asciicast v2 compatibility

Hey @marionebl ! Great job with this project 👍

I'll be releasing asciinema 2.0 in the coming days, which uses new asciicast v2 file format, and was wondering if anything needs to be implemented to support it in svg-term-cli (I couldn't locate the actual code which reads the asciicast here). There are already many recordings on asciinema.org in v2 format made using develop branch of asciinema.

Let me know if you need any help!

Preserving aspect ratio

I have multiple issues, but all center around preserving the aspect ratio when I convert an asciicast file to an .svg.

I have been experimenting with the flags but I'm not sure what solves this problem.

I use gnome-terminal on Ubuntu 16.04. I would like to get output where the width : height ratio is 16 : 9. I've found that the closest cols/rows setting to this is 94 cols and 28 rows given the default font and font-size in gnome-terminal, so accordingly I add --width=94 and --height=28 to the command.

The full command I'm using is:

svg-term --in=htop --out=htop.svg --term=terminal --profile=profile4svgterm.dconf --no-optimize --width=94 --height=28

Unfortunately, the .svg output is rendered with a different aspect ratio.

Here's gnome-terminal running asciinema play htop:

And then the .svg output as displayed by chromium-browser:

It's probably hard to perceive at first glance, but the .svg output slightly taller and therefore has a different aspect ratio. Also, the characters on the right hand side are slightly cut off, but that probably also happens because of the different ratio.

As I understand, the terminal profile I specify is ignored by svg-term, or I am not specifying it correctly.
As of Ubuntu 16.04 the terminal profile is part of dconf, ie. it's not a stand-alone file somewhere in the home directory of the user, but part of a database and can be exported. Here's the file (profile4svgterm.dconf) I get after exporting from dconf.

[/]
foreground-color='rgb(0,255,0)'
visible-name='profile4svgterm'
default-size-columns=94
default-size-rows=28
use-system-font=false
use-theme-colors=false
font='Monospace 12'
use-theme-transparency=false
background-color='rgb(0,0,0)'

I am not sure svg-term understands this file and would like to know what format works the best.

Another, unrelated issue I have noticed that sometimes the .svg output is a file with 0 bytes and therefore the command has to be repeated to get a non-empty output.

Here's a gist with the input and output files.

---

UPDATE: After doing some troubleshooting, I've found that If I specify a non existing file for --profile, svg-term does not complain about the invalid path/file.

Incorrect display on FF 66a with "Minimum font size" set

Hey,

Following up on this. Here's what I get when I display a term SVG in Firefox 66 (nightly), on macOS :

The image is animated alright, but font size and spacing and everything seems broken. Same svg is displayed nicely on the same machine with a blink-based browser or an old FF-56.

I tried to turn off every ad-blocking and tracker-blocking and content-blocking addon and it's still the same.

--profile breaks with absolute paths

svg-term-cli/src/cli.ts

Line 200 in ac94227

const missing = !fs.existsSync(path.join(process.cwd(), cli.flags.profile));

fs.exists is an antipattern and should not be used. Just try to load the file and if it doesn't work, handle the error.

Details at http://devdocs.io/node~8_lts/fs#fs_fs_exists_path_callback

fs.open('myfile', 'wx', (err, fd) => {
  if (err) {
    if (err.code === 'EEXIST') {
      console.error('myfile already exists');
      return;
    }

    throw err;
  }

  writeMyData(fd);
});

But the bigger problem is that you don't normalize the paths => Absolute file paths lead to an error.

You just have to wrap the passed argument with a path.resolve

$ node
> path.resolve('./like/what')
'/Users/adrian/Projects/like/what'
> path.resolve('/like/what')
'/like/what'
>

No fiddling with process.cwd() necessary

Last line of terminal cast goes off-screen

Here is an example:

made with this command:

svg-term --cast lArG86KKfUePxjImN9bGx6x5B --out preview.svg --no-cursor --width 80 --height 20 --window

As you can see the last line with prompt and user input only shows after it comes up.

Repository: mihael-stormrage/backend-project-lvl1

Usage: better docs

I don't fully understand how this would work and I think the project deserves a better documentation.

What is --cast? I'm not sure what to do with it (you mention an ID but no info around that. even a link to asciicast is missing). Only after reading into asciicast and understanding the upload option was I able to understand that this is not what I'm looking for.

svg-term --cast 113643

Suggestion

Maybe you can add better examples for common use cases. It will make this library easier to use. It might just be me but I think local recordings are more common since I see no need to upload this to any external service.

The following line would have saved me some time:

svg-term --in my.cast --out my.svg

I know it's hidden in the options but that's not the focus of the readme.md (the Usage section is)

For people who easily get lost in bigger chunks of text it would help to at least add it here:

Examples
    $ cat rec.json | svg-term
    $ svg-term --cast 113643
    $ svg-term --cast 113643 --out examples/parrot.svg

I can create a PR for this if you want.

Run the SVG through SVGO

To reduce the size. I can do this myself too, but would be better if it was built-in as most users would not think about doing this. I think it should be done here as it's too opinionated to do it in the programmatic API in svg-term.

Dependency of vulnerable css-select is causing dependabot issues in other projects

causing problems in create-react-app (react-scripts)
facebook/create-react-app#12132

caused by a moderate vulnerability:

nth-check  <2.0.1
Severity: moderate
Inefficient Regular Expression Complexity in nth-check - https://github.com/advisories/GHSA-rp65-9cf3-cjxr
fix available via `npm audit fix`
node_modules/nth-check
  css-select  <=3.1.0
  Depends on vulnerable versions of nth-check
  node_modules/css-select
    svgo  0.4.2 - 1.3.2
    Depends on vulnerable versions of css-select
    Depends on vulnerable versions of js-yaml
    node_modules/svgo

Window icons too large for small terminals

[cli.js:273] TypeError: Path must be a string

$ npx -p svg-term-cli svg-term --cast=rfS1M5ynKm1hGaBqJYJj0mGCi --out --frame demo.svg
~/.npm/_npx/4272/lib/node_modules/svg-term-cli/lib/cli.js:273
            throw err;
            ^

TypeError: Path must be a string. Received true
    at assertPath (path.js:28:11)
    at resolve (path.js:1186:7)
    at resolvePath (~/.npm/_npx/4272/lib/node_modules/svg-term-cli/node_modules/@marionebl/sander/dist/sander.cjs.js:14:22)
    at normaliseArguments$2 (~/.npm/_npx/4272/lib/node_modules/svg-term-cli/node_modules/@marionebl/sander/dist/sander.cjs.js:363:47)
    at Object.writeFile (~/.npm/_npx/4272/lib/node_modules/svg-term-cli/node_modules/@marionebl/sander/dist/sander.cjs.js:368:13)
    at ~/.npm/_npx/4272/lib/node_modules/svg-term-cli/lib/cli.js:106:20
    at Generator.next (<anonymous>)
    at fulfilled (~/.npm/_npx/4272/lib/node_modules/svg-term-cli/lib/cli.js:5:58)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

how to apply theme??

robot Style with common color profiles