friday / lottie-node

Export lottie animations in Node.js
MIT License
56 stars 11 forks source link

SVG support #7

Open knowBalpreet opened 6 years ago

knowBalpreet commented 6 years ago

Seeing the recent updates in node-canvas and jsdom. Can you make lottie animations in svg work?

friday commented 6 years ago

I don't know if node-canvas v2 can be used for this. They did add support for things we could perhaps use. Perhaps we could read the svg elements innerHTML after goToAndStop() and use that with node-canvas or canvg.

I don't know enough about Lotties SVG renderer or even SVG to know if it's even realistic. With canvas you don't change the actual "dom" of the canvas element. I won't be exploring this myself, but will keep the issue open. PR's are welcome.

knowBalpreet commented 6 years ago

I think based on recent advancements. if we just update the dependencies and before doing canvas.toBuffer() we can just write SVG instance on canvas context using drawImagemethod, then we can achieve it. Problem is this needs to happen in jsdom. And I am not sure on how to do it? Can you please look into it? This will add SVG support to your library

friday commented 6 years ago

I've given my answer ^

knowBalpreet commented 5 years ago

Hi @friday, I am getting TypeError: a.getComputedTextLength is not a function on using lottie animation with textlayer. Is there any workaround this? Other than presetting the value in jsdom?

friday commented 5 years ago

Please create a new issue, since that doesn't look directly related to this feature suggestion. I just added issue templates to make this easier. Are you trying to render an animation with text exported with glyphs for all the characters in your text? Are you using the latest version (v1.0.0)?

friday commented 5 years ago

puppeteer-lottie, an alternative to lottie-node was just published. It uses puppeteer and Chrome headless rather than Node.js and supports SVG.

galipmedia commented 4 years ago

I love puppeteer-lottie because everything just works, but its very slow. Your implementation is about 20 times faster in my tests and I have a requirement for speed. However anything slightly complicated seems to render a blank png. I started looking into the possibility of using svgdom https://github.com/svgdotjs/svgdom do you think this could be swapped out for canvas?

friday commented 4 years ago

@galipmedia Feel free to try. I don't have time for it myself unfortunately.