filling svg background with an image

debugcn Published at Dev

Abi Saunders

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>

Paul LeBeau

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.