What are the differences between the web HTML, SVG, and Canvas rendered?

 


The lottie-player is a web player that allows you to choose how your animation is rendered on the page. You can choose to render it using HTML, SVG, or canvas.

SVG
By default, the lottie-player renders using SVG, which means all the animation components are added to the SVG DOM element and are visible when you view the source code of the web page.

Canvas
If you would like to render using Canvas 2dContext, you just need to add the attribute renderer="canvas" to the <lottie-player> DOM element

HTML
For the HTML, the HTML 'rendering' is actually the same asSVG rendering, but with the various SVG components that go into the SVG element being each wrapped in a <div>. The reason is so that some CSS that apply to <div>'s can be used to bring additional modifications to the animation. However, it adds even more DOM elements and reduces performance. The same exact SVG components used in pure SVG rendering are still what renders the animation in this case too. In other words, there is no difference between SVG rendering and HTML 'rendering' other than wrapping SVG components in styleable <div>'s.



What are the differences between the web HTML, SVG, and Canvas rendered?

Technically, lottie-player only renders either in an SVG (HTML or SVG DOM element) or a Canvas element.

When using SVG to render animations, all the SVG content is added to the SVG DOM element and can be seen when viewing the source code of the web page. On the other hand, when using canvas to render animations, the animation content is drawn onto the canvas surface, leaving the HTML DOM untouched and uncluttered.


SVG does support more of the Lottie features, however, the drawback of SVG is that the changes made to the HTML DOM incurs performance penalties.This is why Canvas is more performant, even though lottie-player only renders to Canvas in 2dContext (less features supported).

 

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request

Comments

0 comments

Article is closed for comments.