Large & Complex SVG Performance (vs Canvas) ?

Hi everyone!

I'm planning on making a Christmas project which would require many elements being animated on a fullscreen illustration. So imagine 100-200+ little animations moving repeatedly on a fullscreen page, along with music running. You could think of Google's SantaTracker as an example.

I dabbled with canvas for a bit, but animating proved to be a lot more complex than with simple SVG and Greensock (which is what I am used to using). I attempted to bring in SVGs in Paper.JS as well, to merge the gap between SVGs and canvas, but I kept running into difficulty exporting SVG paths to be animated. --> If you have experience with SVG in Paper.JS, I'd love to hear about your experiences! I didn't really like canvas to start with anyway... (I'm just not familiar with it enough).

So I'm thinking of sticking to pure inline SVG and Greensock animation, since I like the simplicity yet high quality vector aspect of them. The issue is I have kept hearing of SVG performance issues due to the DOM (where canvas performs much better in comparison).

I have done tests with heavier illustrations imported from Illustrator, where 100+ elements are animated and looped; other than using a lot CPU, performance on desktops/laptops seemed fine (macbooks and such); there was a bit of lag on mobile devices, but subtle enough to be able to get away with it. I tried a Nexus 6P which is probably a good phone though...

I ran tests on several websites (with Google's PageSpeed's tool notably). It scored between 50-60%, which isn't ideal.

Since I am new to development, and know little about performance testing, I wanted to ask for your thoughts on what I should maybe look out for and for best practices. Or if you have any advice on how to go about this.

I have though of importing static components as PNGs or JPEGs instead of SVG, would that help with the performance or would it do the opposite? Think background elements for example.

I have thought of using the <use> tag to duplicate existing SVG code to lighten inline SVG-load. But I have read that doing that actually is detrimental to performance. Has anyone had that experience?

Looking forward to hearing your thoughts.

Thanks!!