Constructing Modern UIs with SVG
summary
Claim: SVG can modernize web UIs while keeping code-based workflows, demonstrated with a real React + PhoneGap app shipped on the App Store that is built entirely in SVG. Workflow uses Adobe Illustrator / Sketch / Inkscape to author shapes, combines two or three dozen icons into a symbol sprite served and styled via <use>, and applies mix-blend-mode, clip paths, filter primitives and the animate tag. Stroke-dasharray animations require odd offsets (examples ~420–760%) but the app’s blend-mode and clip-based heart UI work as intended.
AI-written summary · about
chapters (19)
- 0:00Introduction
- 0:54SVG Overview
- 4:26Why Use SVG
- 6:29Types of SVG
- 7:59Creating SVG
- 9:51Generating SVG
- 16:17SVG attributes
- 19:50Blend modes
- 25:02Drawing in SVG
- 29:56Symbols
- 32:58Clipping
- 37:45Filters
- 38:00Filter CSS attribute
- 40:41Filter Effect Displacement Map
- 42:26Gaussian Blur
- 45:57Heart Points
- 47:22Custom Shapes
- 50:59Documentation
- 52:15Conclusion
