Ich hoffe, die Leute denken bei SVG an ein Vektorformat, das gut zum Zeichnen von Dingen geeignet ist. Es gibt viel mehr zu wissen, aber hier ist noch etwas: SVG eignet sich gut für die Komposition. Sie zeichnen Dinge an sehr spezifischen Koordinaten in SVG und, obwohl sie skalierbar sind, bleiben sie in der Regel dort, wo sie sind. Und obwohl SVG ein Vektorformat ist, können Sie Rasterbilder darauf platzieren. Das ist mein Lieblingsteil von Cassies Beitrag „Swipey image grids“. Der wischbare Teil ist cool, aber die Komposition ist noch cooler.
<svg viewBox="0 0 100 100">
<rect x="30" y="0" width="70" height="50" fill="blue"/>
<rect x="60" y="60" width="40" height="40" fill="green"/>
<rect x="0" y="30" width="50" height="70" fill="pink"/>
<image x="30" y="0" width="70" height="50" href="https://place-puppy.com/300x300"/>
<image x="60" y="60" width="40" height="40" href="https://place-puppy.com/700x300"/>
<image x="0" y="30" width="50" height="70" href="https://place-puppy.com/800x500"/>
</svg>Sie müssen dies in Chrome, Edge oder Firefox ausprobieren
Verpassen Sie nicht Cassies interaktive Beispiele zur Erklärung von preserveAspectRatio. Das ist etwas, das ich normalerweise am <svg> selbst denke, das aber hier auf den <image>-Elementen selbst mit großer Wirkung eingesetzt wird. Es ist wie ein leistungsfähigeres object-fit und object-position.