The [svg] of .svg
summary
Shows concrete recipes: use viewBox plus preserveAspectRatio="slice" to reproduce CSS object-fit/position and crop user uploads entirely in SVG, working back to IE9; wrap SVG in a container and use the padding-top hack to make those crops responsive; embed raster with an <image> and apply an SVG luminance mask to get PNG-like transparency while serving a JPEG; use <object>, <use>, <switch> and foreignObject patterns to keep text selectable and cacheable as on the Smashing redesign.
AI-written summary · about
chapters (18)
- 0:00Start
- 2:21Svg Superpowers
- 2:42Differentiate between the Svg View Box and the Svg View Port
- 3:21The Viewport of the Svg
- 3:46Coordinate System
- 5:14The Svg View Box
- 8:48Background Images
- 9:18The Preserve Aspect Ratio Attribute
- 11:22Cropping and Preserving Aspect Ratio of Non Svg Images
- 12:06Object Position
- 17:39Maintaining Aspect Ratio and Css
- 19:28The Padding Hack
- 22:15Preserve Aspect Ratio
- 23:29Svg Masks
- 28:29Seven Ways To Embed Svg Is on a Page
- 32:14Svg Document Structure Specification
- 32:42Switch Element
- 33:30Foreign Object
