SVG’s Hidden Talent: Composing Raster Images
SVG often gets pigeonholed as a vector format for drawing shapes, but it deserves more credit than that. The format is also remarkably good at composition. While elements drawn in SVG can scale, they are positioned at precise coordinates, and—despite being a vector format—you can embed raster images on it. That combination is the standout idea in Cassie’s “Swipey image grids” post: the swipe gesture is fun, but the underlying layout power is the real payoff.
The examples require Chrome, Edge, or Firefox to view. Cassie’s interactive demos are particularly valuable for explaining preserveAspectRatio, a property usually associated with the root <svg> element. Here, it gets applied directly to the <image> elements with great effect, acting like a more flexible alternative to CSS’s object-fit and object-position.
