filling svg background with an image - html

Question

I have created a svg heart with an image as a pattern inside. I am trying to make it so the image fits the whole heart but I am not having much luck.
Any help would be great and hugely appreciated.
svg {
width: 300px;
border: 1px solid grey;
margin: 1em auto;
display: block;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 315 345">
<!-- START SVG RULES -->
<defs>
<!-- DEFINE IMAGE INSIDE PATTERN -->
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://images.pexels.com/photos/325185/pexels-photo-325185.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
x="0" y="0" width="100" height="100" />
</pattern>
<!-- SVG SHAPE CREATION -->
<g id="heart">
<path d="M0 200 v-200 h200
a100,100 90 0,1 0,200
a100,100 90 0,1 -200,0
z" />
</g>
</defs>
<use xlink:href="#heart" class="outline" fill="url(#img1)" />
</svg>

Answer 1

The simplest solution is to use patternContentUnits="objectBoundingBox" and set the image width and height to "1".
Then to make the image fill the pattern, set preserveAspectRatio="xMidYMid slice". This is equivalent to the CSS's background-size: cover
svg {
width: 300px;
border: 1px solid grey;
margin: 1em auto;
display: block;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 315 345">
<!-- START SVG RULES -->
<defs>
<!-- DEFINE IMAGE INSIDE PATTERN -->
<pattern id="img1" patternContentUnits="objectBoundingBox" width="100%" height="100%">
<image xlink:href="https://images.pexels.com/photos/325185/pexels-photo-325185.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
x="0" y="0" width="1" height="1" preserveAspectRatio="xMidYMid slice" />
</pattern>
<!-- SVG SHAPE CREATION -->
<g id="heart">
<path
d="M0 200 v-200 h200
a100,100 90 0,1 0,200
a100,100 90 0,1 -200,0
z" />
</g>
</defs>
<use xlink:href="#heart" class="outline" fill="url(#img1)" />
</svg>