Cuadrículas de imágenes deslizables

Espero que la gente piense en SVG como un formato vectorial bueno para dibujar cosas. Hay mucho más que saber, pero aquí hay uno más: SVG es bueno para la composición. Dibuja cosas en coordenadas muy específicas en SVG y, si bien pueden escalar, tendencia a quedarse quieto. Y aunque SVG es un formato vectorial, puedes colocarle imágenes rasterizadas. Esa es mi parte favorita de la publicación de Cassie “Cuadrículas de imágenes deslizables”. La parte deslizante es genial, pero la composición es aún más genial.

svg viewBox="0 0 100 100"  rect x="30" y="0" fill="blue"/  rect x="60" y="60" fill="green"/  rect x="0" y="30" fill="pink"/  image x="30" y="0" href="https://place-puppy.com/300x300"/  image x="60" y="60" href="https://place-puppy.com/700x300"/  image x="0" y="30" href="https://place-puppy.com/800x500"//svg

Tendrás que comprobar esto en Chrome, Edge o Firefox:

No te pierdas los ejemplos interactivos de Cassie que explican preserveAspectRatio. Eso es algo en lo que normalmente pienso en svgsí mismo, pero aquí se usa con gran efecto en los imagemismos elementos. Es como un más poderoso object-fity object-position.