I can't frame this image inside an SVG

Question

I want to wrap this

inside

to achive a result similar to

_{(source: i.ibb.co)}

it is to say, the t-shirt should be cropped inside the cloud, following its path.

I tried to use a CSS border mask, but I was not successful:

.wrapper {
  background-image:url('https://svgshare.com/i/T9J.svg');
  background-repeat:no-repeat;
  background-size:200px;
  background-position:50% 50%;
  width:200px;
}

.svg-border-mask {
  -webkit-mask-box-image: url('https://svgshare.com/i/T9J.svg');
  mask-border: url('https://svgshare.com/i/T9J.svg');
}

<div class="wrapper">
   <img src="https://i.stack.imgur.com/2GKtb.png" alt="" class="svg-border-mask" />
</div>

How can I do it? I read about the clip-path way too, but I don't know how to draw this SVG path...

Answer 1

Use mask not mask-border and apply the same properties as the background to have a perfect matching:

.wrapper {
  background-image:url('https://i.ibb.co/KjmqTs2/cloud.png');
  background-repeat:no-repeat;
  background-size:200px;
  background-position:50% 50%;
  -webkit-mask: url('https://i.ibb.co/KjmqTs2/cloud.png');
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size:200px;
  -webkit-mask-position:50% 50%;
  width:200px;
}
img {
  max-width:100%;
}

<div class="wrapper">
   <img src="https://i.stack.imgur.com/2GKtb.png" alt="" class="svg-border-mask" />
</div>

You can also simplify like below:

img {
  --m:url('https://i.ibb.co/KjmqTs2/cloud.png') center/contain no-repeat;
 
  background:var(--m);
  -webkit-mask: var(--m);
  width:200px;
  padding:0 20px; /* some padding to control the shape */
}

<img src="https://i.stack.imgur.com/2GKtb.png" >

<img src="https://i.stack.imgur.com/2GKtb.png" style="width:100px;padding:0">

<img src="https://i.stack.imgur.com/2GKtb.png" style="width:100px;padding:0 30px">

Answer 2

A good reference is https://stackoverflow.com/questions/3796025/fill-svg-path-element-with-a-background-image but as I was new to this too I have seen how it works by taking the cloud SVG image given in the question and combining it with the given tshirt image.

Look at the code in this snippet which defines an img and uses it instead of the fill color on the first path in the given SVG. I've put it all inline so it's possible to see what is going on.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 342.33 210.05">
<defs>
  <style>.cls-1{fill:#00ffff;}.cls-2{fill:#d1d1d1;}</style>
  <pattern id="img1" patternUnits="userSpaceOnUse" width="342.33" height="210.05">
    <image href="https://cdn.shopify.com/s/files/1/0520/4063/0437/products/img9_be295193-87ac-4d81-a55d-2353cbf5621d_250x.png" x="0" y="0" width="342.33" height="210.05" />
  </pattern></defs>
  <g id="Capa_2" data-name="Capa 2">
  <g id="Capa_1-2" data-name="Capa 1">
  <g id="Fill_24" data-name="Fill 24">
  <path  d="M337.32,112.06A56.17,56.17,0,0,1,320.21,152a50.61,50.61,0,0,1-58.44,9l-3-1.52-.6,3.3c-4.05,22.46-22.82,38.38-44.58,37.92-16.41-.37-31.29-10.12-38.84-25.47l-2.86-5.81-1.79,6.23C165,193.48,146.93,206.38,129,204.93c-19.83-1.65-37.72-17.08-43.53-37.59l-1.39-4.5-3,3.67a42.48,42.48,0,0,1-23.59,14.76A41.38,41.38,0,0,1,25.05,175a45.35,45.35,0,0,1-19-28.71A46.93,46.93,0,0,1,11.89,112C21.13,96.84,38,88.9,54.89,91.73l4.63.78-1.94-4.28A40,40,0,0,1,59.7,51,35.88,35.88,0,0,1,82.8,34.33a34.66,34.66,0,0,1,27,5.27,37.65,37.65,0,0,1,13.26,15.85l3.18,7.14,1.55-7.66C133.35,27.57,157.66,6.12,184.33,5c30.07-1.19,59.39,18.76,71.34,48.54.78,1.82,1.43,3.65,2.16,5.84l.92,2.76,2.59-1.33a50.69,50.69,0,0,1,24.07-5.54C314.53,56,337.82,81.42,337.32,112.06Z" fill="url(#img1)" />
  <path class="cls-2" d="M285.52,50.32a55.83,55.83,0,0,0-23.87,4.84c-.42-1.17-.87-2.35-1.36-3.5C247.58,20,216.27-1.21,184.13.05c-26.82,1.08-51.42,21.11-59.63,47.59a42.77,42.77,0,0,0-11.91-12.18,39.6,39.6,0,0,0-30.85-6,40.87,40.87,0,0,0-26.31,19,45.08,45.08,0,0,0-4,37.9C34,85,17.15,93.76,7.62,109.36a52,52,0,0,0-6.47,38,50.21,50.21,0,0,0,21.08,31.82,46.34,46.34,0,0,0,36.46,7A47.49,47.49,0,0,0,82.1,173c7.49,20.28,26.05,35.21,46.53,36.92,1.09.08,2.18.13,3.27.13,17.51,0,34-11.27,41.12-27.78a49.24,49.24,0,0,0,40.47,23.34c23.2.57,43.32-15.65,48.94-38.85a56.69,56.69,0,0,0,21.07,4.67,55.84,55.84,0,0,0,40.18-15.88,61.15,61.15,0,0,0,18.64-43.41c0-.35,0-.69,0-1C342.33,78.18,317.05,51,285.52,50.32Zm-1.9,116.11a51.31,51.31,0,0,1-21.85-5.51l-3-1.52-.6,3.3c-4.05,22.46-22.82,38.38-44.58,37.92-16.41-.37-31.29-10.12-38.84-25.47l-2.86-5.81-1.79,6.23C165,193.48,146.93,206.38,129,204.93c-19.83-1.65-37.72-17.08-43.53-37.59l-1.39-4.5-3,3.67a42.48,42.48,0,0,1-23.59,14.76A41.38,41.38,0,0,1,25.05,175a45.35,45.35,0,0,1-19-28.71A46.93,46.93,0,0,1,11.89,112C21.13,96.84,38,88.9,54.89,91.73l4.63.78-1.94-4.28A40,40,0,0,1,59.7,51,35.88,35.88,0,0,1,82.8,34.33a34.66,34.66,0,0,1,27,5.27,37.65,37.65,0,0,1,13.26,15.85l3.18,7.14,1.55-7.66C133.35,27.57,157.66,6.12,184.33,5c30.07-1.19,59.39,18.76,71.34,48.54.78,1.82,1.43,3.65,2.16,5.84l.92,2.76,2.59-1.33a50.69,50.69,0,0,1,24.07-5.54c29.12.65,52.41,26.11,51.91,56.75A56.17,56.17,0,0,1,320.21,152,51,51,0,0,1,283.62,166.43Z"/>
  </g>
  </g>
  </g>
  </svg>