Centered background image within SVG

Solution 1:

I managed to make an image stay in place of the color white.

.body {
  width: 100%;
  height: 100%;
  background: #1f1b33;
  padding: 2rem;
}

svg {
  width: 120px;
}

<div class="body">
<svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="121.375"
      height="125.397"
      viewBox="0 0 121.375 125.397"
    >
      <defs>
        <clipPath id="clip-path">
          <rect
            id="Retângulo_365"
            data-name="Retângulo 365"
            width="97"
            height="97"
            rx="37"
            transform="translate(-932 2753)"
            fill="#fff"
          />
        </clipPath>
        <pattern
          id="pattern"
          preserveAspectRatio="xMidYMid slice"
          width="100%"
          height="100%"
          viewBox="0 0 450 450"
        >
          <image
            width="450"
            height="450"
            xlink:href="https://www.espacoluzevida.com.br/wp-content/uploads/2016/05/default-female-avatar.png"
          />
        </pattern>
      </defs>
      <g
        id="profile-image-customized"
        transform="translate(-152.94 -170.887)"
      >
        <path
          id="Caminho_2257"
          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(176.938 209.119)"
          fill="#fff"
          opacity="0.2"
        />
        <g
          id="Grupo_de_máscara_7"
          data-name="Grupo de máscara 7"
          transform="translate(1099 -2565)"
          clip-path="url(#clip-path)"
        >
          <path
            id="_32814145-woman-avatar-profile-picture-icon-on-light-gray-background"
            data-name="32814145-woman-avatar-profile-picture-icon-on-light-gray-background"
            d="M0,0H97V97H0Z"
            transform="translate(-932 2753)"
            fill="url(#pattern)"
          />
        </g>
      </g>
    </svg>
</div>

Solution 2:

An image can be inserted into any SVG shape in several ways:

Using clipPath
Using mask
Using pattern

With any method of inserting an image, you need to focus on the shape of the template.

If the template has a symmetrical shape, it is necessary to select the original image with the same aspect ratio.

In other words, if the cropping pattern is a circle or regular polygons, then you need to select images with the same width and height.

Using mask

I chose a square image

enter image description here

.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.stack.imgur.com/UsGg5.jpg" x="0" y="0"/>	
    </svg>
  </div>

2.# Animation of image rotation when hovering

CSS rules are used to implement rotation of 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.stack.imgur.com/UsGg5.jpg" x="0" y="0"/>	
    </svg>
  </div>

Centered background image within SVG

Solution 1:

Solution 2:

Using mask

Related

Recent Posts