<svg viewBox="-1 -1 162 92" xmlns="http://www.w3.org/2000/svg">
<defs>
<path
id="smiley"
d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
</defs>
<rect x="0" y="0" width="20" height="10">
<title>xMidYMid meet</title>
</rect>
<svg
viewBox="0 0 100 100"
width="20"
height="10"
preserveAspectRatio="xMidYMid meet"
x="0"
y="0">
<use href="#smiley" />
</svg>
<rect x="25" y="0" width="20" height="10">
<title>xMinYMid meet</title>
</rect>
<svg
viewBox="0 0 100 100"
width="20"
height="10"
preserveAspectRatio="xMinYMid meet"
x="25"
y="0">
<use href="#smiley" />
</svg>
<rect x="50" y="0" width="20" height="10">
<title>xMaxYMid meet</title>
</rect>
<svg
viewBox="0 0 100 100"
width="20"
height="10"
preserveAspectRatio="xMaxYMid meet"
x="50"
y="0">
<use href="#smiley" />
</svg>
<rect x="0" y="15" width="20" height="10">
<title>xMidYMin slice</title>
</rect>
<svg
viewBox="0 0 100 100"
width="20"
height="10"
preserveAspectRatio="xMidYMin slice"
x="0"
y="15">
<use href="#smiley" />
</svg>
<rect x="25" y="15" width="20" height="10">
<title>xMidYMid slice</title>
</rect>
<svg
viewBox="0 0 100 100"
width="20"
height="10"
preserveAspectRatio="xMidYMid slice"
x="25"
y="15">
<use href="#smiley" />
</svg>
<rect x="50" y="15" width="20" height="10">
<title>xMidYMax slice</title>
</rect>
<svg
viewBox="0 0 100 100"
width="20"
height="10"
preserveAspectRatio="xMidYMax slice"
x="50"
y="15">
<use href="#smiley" />
</svg>
<rect x="75" y="0" width="10" height="25">
<title>xMidYMin meet</title>
</rect>
<svg
viewBox="0 0 100 100"
width="10"
height="25"
preserveAspectRatio="xMidYMin meet"
x="75"
y="0">
<use href="#smiley" />
</svg>
<rect x="90" y="0" width="10" height="25">
<title>xMidYMid meet</title>
</rect>
<svg
viewBox="0 0 100 100"
width="10"
height="25"
preserveAspectRatio="xMidYMid meet"
x="90"
y="0">
<use href="#smiley" />
</svg>
<rect x="105" y="0" width="10" height="25">
<title>xMidYMax meet</title>
</rect>
<svg
viewBox="0 0 100 100"
width="10"
height="25"
preserveAspectRatio="xMidYMax meet"
x="105"
y="0">
<use href="#smiley" />
</svg>
<rect x="120" y="0" width="10" height="25">
<title>xMinYMid slice</title>
</rect>
<svg
viewBox="0 0 100 100"
width="10"
height="25"
preserveAspectRatio="xMinYMid slice"
x="120"
y="0">
<use href="#smiley" />
</svg>
<rect x="135" y="0" width="10" height="25">
<title>xMidYMid slice</title>
</rect>
<svg
viewBox="0 0 100 100"
width="10"
height="25"
preserveAspectRatio="xMidYMid slice"
x="135"
y="0">
<use href="#smiley" />
</svg>
<rect x="150" y="0" width="10" height="25">
<title>xMaxYMid slice</title>
</rect>
<svg
viewBox="0 0 100 100"
width="10"
height="25"
preserveAspectRatio="xMaxYMid slice"
x="150"
y="0">
<use href="#smiley" />
</svg>
<rect x="0" y="30" width="160" height="60">
<title>none</title>
</rect>
<svg
viewBox="0 0 100 100"
width="160"
height="60"
preserveAspectRatio="none"
x="0"
y="30">
<use href="#smiley" />
</svg>
</svg>
path {
fill: yellow;
stroke: black;
stroke-width: 8px;
stroke-linecap: round;
stroke-linejoin: round;
pointer-events: none;
}
rect:hover,
rect:active {
outline: 1px solid red;
}