6 ms·

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 eac

by nbe 8y ago

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/examples.md https://github.com/nbedos/termtosvg/blob/master/examples/exa...

bonyt 8y ago
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 8y ago
  Was curious myself. 252K -> 17K. Yes it compresses well :)
  - deleted 8y ago
    [deleted]
fla 8y ago
What about embedding a mini ECMAScript player and apply values to the DOM on the fly ?
- nbe 8y ago
  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 8y ago
    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 http://pieroxy.net/blog/pages/lz-string/index.html https://github.com/pieroxy/lz-string/blob/master/libs/lz-string.min.js 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 8y ago
it's actually possible to reduce duplication in this case with the <g> element, see this example; https://jsfiddle.net/2kc6tqy1/2/ https://jsfiddle.net/2kc6tqy1/2/

by nbe 8y ago

bonyt 8y ago

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 8y ago
Was curious myself. 252K -> 17K. Yes it compresses well :)
- deleted 8y ago
  [deleted]

fla 8y ago

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

nbe 8y ago
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 8y ago
  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 http://pieroxy.net/blog/pages/lz-string/index.html https://github.com/pieroxy/lz-string/blob/master/libs/lz-string.min.js 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 8y ago

it's actually possible to reduce duplication in this case with the <g> element, see this example; https://jsfiddle.net/2kc6tqy1/2/ https://jsfiddle.net/2kc6tqy1/2/