JSFiddle - React, Tailwind, and code Playground

by RadCor

HTML

<svg viewBox="0 0 222 223">
<defs>
<path id="SVGID_1_" d="M210.5878296,148.9594879V73.8081055c0-12.4479637-6.6409149-23.9503555-17.4211578-30.1743393
L128.0836639,6.0580797c-10.7802505-6.2239819-24.0620651-6.2239819-34.8423233,0L28.1583424,43.6337662
c-10.7802525,6.2239838-17.4211617,17.7263756-17.4211617,30.1743393v75.1513824
c0,12.4479523,6.6409092,23.9503479,17.4211617,30.1743317l65.0830002,37.5756836
c10.7802582,6.2239838,24.0620728,6.2239838,34.8423233,0l65.0830078-37.5756836
C203.9469147,172.9098358,210.5878296,161.4074402,210.5878296,148.9594879z"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
</clipPath>
<image style="overflow:visible;clip-path:url(#SVGID_2_);" width="222" height="223" xlink:href="https://pp.userapi.com/c621706/v621706992/ed0f/yNt2L6dxgbg.jpg" >
</image>
</svg>

CSS

svg {
  width: 200px;
}

JavaScript

/* 

Ответ на вопрос: https://toster.ru/q/449742

*/