filling svg background with an image

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>

Pretty sure this is a duplicate - https://stackoverflow.com/questions/3796025/fill-svg-path-element-with-a-background-image — Paulie_D, Aug 22 '18 at 16:05

score 2 · Accepted Answer · answered Aug 23 '18 at 11:02

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>

This is great, thanks! Do you know how I would rotate the heart to be the right way? — Abi Saunders, Aug 28 '18 at 11:58
It's a bit tricky because if you rotate the path, you'll end up rotating the image as well. You could also rotate the image the opposite way, but then it is no longer rectangular and won't neatly fill the shape any more. By far the simplest solution is to redo the heart path itself so that it is the orientation you want. — Paul LeBeau, Aug 28 '18 at 18:50

filling svg background with an image

1 Answers1