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

[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 :)

[fla]

What about embedding a mini ECMAScript player and apply values to the DOM on the fly ?

[nbe]

I'd rather stick to plain SVG for the animation part, in case ECMAScript is stripped from the SVG for security reasons. ECMAScript might be worth adding for additional features though (play/pause, progress bar, frame seeking...)

[ramses0]

Why not `zip blah.zip blah.html` and do it all as a single html doc?

http://pieroxy.net/blog/pages/lz-string/index.html

https://github.com/pieroxy/lz-string/blob/master/libs/lz-str...

~5kb gets you an lz-decoder, and you should be able to pull a bunch of trickery with blobs and compressed strings to get somewhere?

[kirjavascript]

it's actually possible to reduce duplication in this case with the <g> element, see this example;

https://jsfiddle.net/2kc6tqy1/2/