SVG Lessons I Learned The Hard Way
summary
Practical takeaways: presentation attributes override inherited styles so SVG sprites with presentation fills break CSS targeting unless attributes use inherit or CSS variables (currentColor works cross‑browser); use element creates a shadow DOM clone, so styling must leak via CSS variables or be applied on the <use>; creating a circular menu using <object> caches but links open inside the object unless xlink:show/target points to _parent; fill="none" disables pointer events (use fill="transparent" or pointer-events); wrap inline JS/CSS in CDATA; use getBBox not getBoundingClientRect for SVG geometry.
AI-written summary · about
chapters (24)
- 0:00Intro
- 5:07Presentation Attributes
- 10:14Override Presentation Attributes
- 11:37Using CSS Variables
- 15:01SVG Embedding
- 16:56Circular Menu Generator
- 17:56Solution
- 18:28Namespace
- 19:06Path Area
- 20:37Tiny Area
- 21:10Pointer Events
- 21:35Fill Transparent
- 22:02CSS JavaScript
- 22:51CSS JavaScript Error
- 23:37C Data Block
- 24:55Viewbox Attribute
- 26:19Coordinate System
- 27:44Viewport
- 36:42Bounding Rectangle
- 37:40GetBoundingBox
- 38:27Relative Positioning
- 40:02Position and Dimensions
- 40:23Example
- 41:54Extra Tip
related talks
39mBuilding Better Interfaces With SVG
52mCSS and SVG — The Dynamic Duo!
59mThe web design cheat code: Using SVG to bridge CSS’ gaps
29mStyling and Animating Scalable Vector Graphics with CSS
31mSurprise and delight: CSS + SVG
30mDown the SVG Rabbit Hole
27mLet's modify our SVGs with CSS
45mUnlocking SVG’s Superpowers