There are multiple ways to insert an image into any SVG shape:
- One method is using clipPath
- Another option is to use mask
- Alternatively, you can use a pattern
When inserting an image using any of these methods, it's important to consider the shape of the template.
For symmetrical shapes, the original image should have the same aspect ratio to fit properly.
For example, if the shape is a circle or regular polygon, images with matching width and height should be chosen.
Using mask
A square image was selected for this example
https://i.sstatic.net/UsGg5.jpg
.body {
padding: 2rem;
background-color:#1f1b33;
}
svg {
width: 25%;
height:25%;
}
image {
width:100%;
height:100%;
mask:url(#msk1);
}
<div class="body">
<svg viewBox="0 0 121.375 125.397" preserveAspectRatio="xMinYMin meet">
<defs>
<mask id="msk1">
<rect width="100%" height="100%" fill="black" />
<rect
id="within"
data-name="Retângulo 365"
x="10" y="10"
width="97"
height="97"
rx="37"
fill="white"
stroke="#d5d5d5"
stroke-width="4"
/>
</mask>
</defs>
<rect width="100%" height="100%" fill="#1f1b33" />
<g
id="blank"
transform="translate(-1460.94 -927.887)"
>
<path
id="wrapper"
data-name="Caminho 2257"
d="M80.617,78.013C67.787,91.6,11.606,90.985-8.689,69.872s-20.527-73.915,0-90.659S66.834-47.3,87.13-26.188,93.447,64.424,80.617,78.013Z"
transform="translate(1484.938 966.119)"
fill="#fff"
opacity="0.2"
/>
</g>
<rect
id="within"
data-name="Retângulo 365"
x="10" y="10"
width="97"
height="97"
rx="37"
fill="none"
stroke="black"
stroke-width="2"
/>
<image xlink:href="https://i.sstatic.net/UsGg5.jpg" x="0" y="0"/>
</svg>
</div>
2. Animation of image rotation when hovering
CSS rules are utilized to create a rotation effect on images
#img {
transform-origin:125px 125px;
-webkit-transition: -webkit-transform 1s ease-in-out;
transition: transform 1s ease-in-out;
}
#img:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
.body {
padding: 2rem;
background-color:#1f1b33;
}
svg {
width: 25%;
height:25%;
}
#img {
width:100%;
height:100%;
mask:url(#msk1);
transform-box: fill-box;
transform-origin:50% 50%;
-webkit-transition: -webkit-transform 1s ease-in-out;
transition: transform 1s ease-in-out;
}
#img:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
<div class="body">
<svg viewBox="0 0 121.375 125.397" preserveAspectRatio="xMinYMin meet">
<defs>
<mask id="msk1">
<rect width="100%" height="100%" fill="black" />
<rect
id="within"
data-name="Retângulo 365"
x="10" y="10"
width="97"
height="97"
rx="37"
fill="white"
stroke="#d5d5d5"
stroke-width="4"
/>
</mask>
</defs>
<g
id="blank"
transform="translate(-1460.94 -927.887)"
>
<path
id="wrapper"
data-name="Caminho 2257"
d="M80.617,78.013C67.787,91.6,11.606,90.985-8.689,69.872s-20.527-73.915,0-90.659S66.834-47.3,87.13-26.188,93.447,64.424,80.617,78.013Z"
transform="translate(1484.938 966.119)"
fill="#fff"
opacity="0.2"
/>
</g>
<image id="img" xlink:href="https://i.sstatic.net/UsGg5.jpg" x="0" y="0"/>
</svg>
</div>