hello i am new in Web development.

I want my image set proper inside SVG, but have faced problem I can't do this, I show so many question in stackoverflow but those question not my type that why I ask.

hear is my code

.home__data{
  background-color: red;
}
.home__data  svg{
  height: 509px;
  width: 534px;
  position: absolute;
  top: 150px;
  right: -44px;
  z-index: 1000;
  
}
.home__data  svg path{
  fill: none;fill-opacity:1;stroke:#1a1a1a;stroke-width:2px;stroke-opacity:1;
  
}

img{
  position: absolute;
right: 65px;
top: 201px;
height: 330px;
width: 374px;
}

<div >
            <svg viewBox="0 0 200 200" height="200px" width="300px" xmlns="http://www.w3.org/2000/svg">
                <path fill="#fff"
                    d="M48.9,-42.4C60.8,-24.1,66.1,-3.9,60.7,11.5C55.3,26.8,39.2,37.4,22.9,43.8C6.6,50.2,-9.9,52.5,-29.8,48.2C-49.8,43.8,-73.2,32.9,-81.3,13.8C-89.5,-5.3,-82.4,-32.7,-66.3,-51.9C-50.2,-71.1,-25.1,-82.2,-3.3,-79.6C18.5,-76.9,37,-60.6,48.9,-42.4Z"
                    transform="translate(100 100)" /> 
            </svg>
            
        </div>
        <img src="https://img.freepik.com/free-photo/young-handsome-man-with-beard-isolated-keeping-arms-crossed-frontal-position_1368-132662.jpg?size=626&ext=jpg" alt="">

But i want like

Taken from https://www.w3schools.com/graphics/svg_reference.asp.