My first tech talk I did comparing SVG, HTML Canvas, and WebGL. January 2019. I forgot to record my screen (hence the cut in frames), and had sound quality issues due to FPS difference on camera mic / laptop mic.
0:00 - Intro (feel free to skip - nothing of value added here)
5:18 - SVG
36:01 - HTML Canvas
49:00 - WebGL
1:12:10 - Other Animation Effects
1:16:00 - Summary (most important slides!)
SLIDES:
slides.com/vincentntang/compa...
SVG MADE:
www.figma.com/file/Goab8MeAgE...
SVG INTO CODEPEN:
codepen.io/vincentntang/pen/E...
TL:DR;
When comparing SVG, HTML Canvas, and WebGL - ask yourself if you need it. Check for edge cases first. WebGL is used in many 3D type of applications that need GPU and shader support. HTML Canvas is great for one off physics demo (see code train).
SVG is the most versatile of the lot, used in data visualization and diagramming tools. It's good for practically any case scenario, since you can treat it as a normal HTML element inline (styling, event listeners, etc).
Social:
codepen.io/vincentntang
linkedin.com/in/vincentntang
vincentntang
github.com/vincentntang
P.S.
Quality might not be that great, I forgot to record my screen during presentation, sound quality didn't come out that well.