An SVG’s Tale

on YouTube ↗23m

" summary

Compares two concrete ways to use SVGs with React: import as a component (easy CSS styling, simple inline DOM access) versus convert to JSX (no extra HTTP requests, enables props/state/event handlers but harder to update). Shows three builds: a model-style slideshow using split SVG parts and react-pose for 400ms path animations; a cassette-tape web app that records and plays via Web Audio API with rotating wheels and working playback; and a customizable kawaii illustration library published to npm.

AI-written summary · about

" chapters (12)

1. 0:00Start
2. 2:32Why is the SVG different?
3. 4:3612 SVG Meets React
4. 6:16Import as React Component
5. 6:32Transform into JSX
6. 7:37Why would you transform an SVG into a component?
7. 10:27Modal/ Slideshow Demo
8. 10:53Modal Slideshow Demo
9. 11:06104 Cassette Tape
10. 14:40Cassette Tape Demo
11. 18:59Face Component
12. 21:14React Kawaii Demo

" related talks

• 25mAn SVG’s TaleElizabet Oliveira · React Amsterdam 2019
• 31mAn SVG’s TaleElizabet Oliveira · <React.NotAConf /> 2019
• 21mSVG illustrations as React ComponentsElizabet Oliveira · React Conf 2018
• 24mSVGs to Make Your Blog Stand OutElizabet Oliveira · React Summit Remote Edition 2021
• 27mAnimating an SVG cat with React.jsElizabet Oliveira · React Live 2019
• 43mAnimating in ReactSarah Drasner · React Rally 2016
• 31mAnimating the Virtual DOMSarah Drasner · ReactEurope 2017
• 25mScalable Vue Graphics for the Modern WebDima Vishnevetsky · Vue.js Amsterdam 2020