我希望人们将 SVG 视为一种适合绘制事物的矢量格式。虽然还有 更多内容需要了解，但这里还有一个：SVG 非常适合进行合成。您可以在 SVG 中非常具体的坐标处绘制事物，虽然它们可以缩放，但往往会保持原位。虽然 SVG 是一种矢量格式，但您可以 将光栅图像放置在其上。这是我最喜欢 Cassie 的 “滑动图像网格” 文章的一部分。滑动部分很酷，但合成部分更酷。
<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>您需要在 Chrome、Edge 或 Firefox 中查看此内容
不要错过 Cassie 解释 preserveAspectRatio 的交互式示例。这通常是我在 <svg> 本身上考虑的事情，但在这里在 <image> 元素本身上得到了很好的应用。它就像一个更强大的 object-fit 和 object-position。