svg renderer

[jaro-io]

overview

it seems like this repo is completely based on the canvas renderer, as it requires a canvas element to function properly. are you planning to integrate the svg renderer as well at some point?

type

• [x] new feature
• [ ] changes to existing features

motivation

i prefer this repo over the player component, because it is not designed as a web component and does not encapsulate its functionality within a custom <dotlottie-player> element, which unfortunately creates multiple issues on my side with my bundler and code splitting.

so this new repo seems to be making all my dreams come true. however, some of my animations are being played back filling the whole viewport, which creates performance issues and low frame rates. the svg renderer would eliminate these issues.

labels

• [x] Add the type: feature request label to this issue.

[theashraf]

Hi @jaro-io

First off, thank you for taking the time to create an issue and share your thoughts on our dotlottie-web.

Regarding your query about integrating an SVG renderer: currently, it's not in our development plan to include this feature. The primary reason is our choice to use thorvg as our rendering engine. Thorvg is a highly efficient, low-level renderer that outputs to a frame buffer, which we then patch directly to the canvas. This approach significantly enhances performance compared to other web-based Lottie players, making our package more performant overall.

Your concern about performance issues and low frame rates, especially when animations fill the entire viewport, is valid. It sounds like these might be related to the lack of fixed width and height set on the canvas. To better understand and address this issue, could you please provide a codesandbox example? This would allow us to investigate more thoroughly and potentially find a workaround within the current framework.

While we understand the appeal of an SVG renderer, our current focus is on leveraging thorvg to its fullest to ensure optimal performance. We'll keep your suggestion in mind for future updates, though!

Thank you

[jaro-io]

thank you so much for this detailed answer @theashraf! 🌻 i tried it with fixed width and height, but it did not improve the frame rate on my side.

unfortunately i can’t share the lottie file as it’s for a client website that is not live yet. so i can’t provide a codesandbox example as of now. i might be able to do so later on.

are you aware of any other dotlottie libraries that are not designed as a web component and use an svg renderer? i could only find this one so far. all the others make use of the custom <dotlottie-player> tag to initialise the module, which unfortunately does not fit my setup.

i would of course love to be able to use dotlottie over the regular lottie files. it’s just amazing how much smaller they are.

all the best! 🍂✨

[theashraf]

@jaro-io If you are using a high screen resolution, it's best to let DotLottie manage the width and height. DotLottie optimizes the size of the canvas drawing area based on the device pixel ratio to prevent blurry animations. However, for this to work effectively, ensure that the canvas element fully occupies the width and height of its container.

<div style="width: 300px; height: 300px">
     <canvas id="dotLottie-canvas" style="width: 100%; height: 100%"></canvas>
</div>

This approach is demonstrated in the following CodeSandbox example: DotLottie Web - Controlling Animation Playback

Regarding the package you mentioned, there is one available - @dotlottie/common. However, be aware that it is not stable, is likely to be deprecated soon, and lacks documentation. It's used internally in both @dotlottie/player-component and @dotlottie/react-player so use it cautiously.

Thank you.

[PulkitBanta]

@theashraf I have an animation that renders correctly with the player from @dotlottie/react-player as it has text but when I try to use @lottiefiles/dotlottie-react the text overflows the container. Is this related to being rendered in svg vs canvas? If yes, is there a way to use @lottiefiles/dotlottie-react and make sure that the animation renders correctly?

Check the example here, Animation Src.