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.

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).