Skip to content
This repository has been archived by the owner on Aug 26, 2023. It is now read-only.

SVG support #7

Open
knowBalpreet opened this issue Nov 24, 2018 · 8 comments
Open

SVG support #7

knowBalpreet opened this issue Nov 24, 2018 · 8 comments
Labels
feature New functionality help wanted Extra attention is needed

Comments

@knowBalpreet
Copy link

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

@friday
Copy link
Owner

friday commented Nov 25, 2018

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.

@friday friday added the help wanted Extra attention is needed label Nov 25, 2018
@knowBalpreet
Copy link
Author

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
Copy link
Owner

friday commented Nov 25, 2018

I've given my answer ^

@knowBalpreet
Copy link
Author

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
Copy link
Owner

friday commented Nov 26, 2018

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 friday added improvement Changes to the current behavior feature New functionality and removed improvement Changes to the current behavior labels Nov 26, 2018
@friday
Copy link
Owner

friday commented May 10, 2019

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

@galipmedia
Copy link

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
Copy link
Owner

friday commented Jun 1, 2020

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
feature New functionality help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

3 participants