Всем добрый день, прорыл уже большое количество информации, но так и не понял как реализовать векторную картинку внутри svg.
У меня есть svg:
И есть фото. Нужно фото вставить в этот svg, чтоб получилось так
Вот код самой svg
<svg
width="320"
height="417"
viewBox="0 0 420 517"
fill="none"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMinYMin slice"
>
<g filter="url(#filter0_d_134:4567)">
<path
d="M310.73 327.763L246.33 48.6385C236.249 4.94706 184.554 -13.9259 148.694 12.9938L73.2363 69.6404C61.6944 78.305 53.5368 90.7246 50.1696 104.759L2.24474 304.505C-6.40178 340.543 18.2907 376.067 55.0828 380.521L242.866 403.253C285.54 408.418 320.394 369.648 310.73 327.763Z"
fill="#C4C4C4"
/>
</g>
<defs>
<filter
id="filter0_d_134:4567"
x="0.513184"
y="0.530029"
width="318.84"
height="416.187"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset dx="7" dy="13" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.976471 0 0 0 0 0.811765 0 0 0 0 0.270588 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow_134:4567"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_134:4567"
result="shape"
/>
</filter>
</defs>
<image
x="0"
y="0"
width="100%"
height="100%"
href="img/peopleStock.jpg"
/>
</svg>
В итоге у меня получается такое
Помогите, пожалуйста, уже голову сломал, не знаю как это сделать. Заранее всем спасибо!