Making SVG and Canvas Graphics in Angular
summary
Explains concrete rules for using SVG in Angular — use the SVG namespace, bind attributes via setAttribute not DOM properties, and prefer attribute selectors for components — and when canvas is better: drawing 50,000 points performs fine on canvas but would overload SVG. Shows canvas components that draw on lifecycle hooks and run a frame loop with requestAnimationFrame outside NgZone. Mentions CSS/ng-animate limits for SVG morphs and using GreenSock as a pragmatic JS fallback.
AI-written summary · about
chapters (18)
- 0:00Intro
- 2:17SVG: Markup For Shapes
- 5:23SVG & Data Binding
- 6:58Extracting SVG Components
- 7:50Rethinking Component Selectors
- 9:08Canvas: Imperative Pixel Drawing
- 9:30Canvas: Immediate Mode
- 11:32Canvas Components
- 12:20Drawing Changing Data
- 13:45Animating SVG With SMIL
- 14:18Animating SVG with CSS
- 14:45CSS Animations
- 15:58Angular Animations
- 16:21Shape Morphing
- 18:18Checklist: SVG Animations
- 19:25requestAnimation Frame Loop
- 20:28Canvas Animation
- 22:28Escape From The Angular Zone
