SVG, Canvas, and WebGL: The Power, the Beauty, and the Cost

on YouTube ↗26m

" summary

Compares SVG, Canvas 2D, and WebGL with concrete demos and numbers: an SVG benchmark drops to single-digit FPS at 10,000 circles, while WebGL sustains ~60 FPS at 10,000 using Pixi; shows the Pixi bunnymark and a custom benchmark of tweened circles. Explains a Pixi implementation: Pixi sprite map plus a game loop for animated updates, and a layered architecture combining SVG axes with WebGL point rendering and HTML tooltips. Notes tradeoffs, debugging limits, and mentions WebGPU as the next-generation option.

AI-written summary · about

" chapters (14)

1. 0:00Introduction to the topic
2. 1:03The power of visuals
3. 2:30Engineering data workflows
4. 4:23Working with SVG
5. 6:02Benchmarking renderers
6. 7:57Real-world SVG examples
7. 8:50Building charts with D3
8. 10:55Canvas 2D overview
9. 11:51WebGL performance
10. 13:30Benchmarking with Pixi.js
11. 16:02Advanced visual examples
12. 18:00Implementing WebGL with Pixi
13. 19:41Hybrid architecture
14. 20:59Q&A and closing

" related talks

• 33mVisualizations using SVG, Canvas, and WebGL in VueChris Fritz · Vue.js Amsterdam 2019
• 35mVisualizations using SVG, Canvas, and WebGL in VueChris Fritz · Framework Summit 2018
• 43mWebGL 2D Rendering with PixiJSFrancesco Strazzullo · Universal JS Day 2017
• 39mLife of a pixel: A visual explanation of rendering performanceMartin Splitt · RuhrJS 2017
• 43mVisualizations using SVG, Canvas, and WebGL in VueChris Fritz · VueConf TO 2018
• 58mRendering performance from the ground upMartin Splitt · HolyJS 2017 Piter
• 37mTricky JS and WebGL practices to achieve the best performance on mobileAndrei Lesnitsky · The Rolling Scopes Conference 2018
• 38mSVG can do that?!Sarah Drasner · Full Stack Fest 2017