svgのclipPathを利用して画像を切り抜きます。svgの書き方は数パターンあります。
デモページはこちら

まず同一のsvg内にclipPathを記述し、use xlink:href="#id"でpathにリンクさせます。clipPathだけでなく、pathにもidを指定するのがポイントです。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 350">
  <defs>
    <clipPath id="clip-path01">
      <use xlink:href="#path01"></use>
    </clipPath>
  </defs>
  <path id="path01" d="M264.1,89.8h-3.9v-3.9c0-47.4-38.4-85.8-85.8-85.8c-47.5,0-85.9,38.4-85.9,85.8v3.9h-2.8C38.4,89.8,0,128.2,0,175.5 s38.4,85.9,85.8,85.9h2.8v2.8c0,47.4,38.4,85.8,85.8,85.8s85.8-38.4,85.8-85.8v-2.8h3.9c47.4,0,85.8-38.4,85.8-85.8 C349.9,128.2,311.5,89.8,264.1,89.8z"></path>
  <image xlink:href="./img/flower.jpg" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" clip-path="url(#clip-path01)"></image>
</svg>

次に同一のsvg内にclipPathを記述し、clipPathの中身をpathにします。コード量も少なく、svgが最適化できています。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 350">
  <defs>
    <clipPath id="clip-path01">
      <path d="M264.1,89.8h-3.9v-3.9c0-47.4-38.4-85.8-85.8-85.8c-47.5,0-85.9,38.4-85.9,85.8v3.9h-2.8C38.4,89.8,0,128.2,0,175.5 s38.4,85.9,85.8,85.9h2.8v2.8c0,47.4,38.4,85.8,85.8,85.8s85.8-38.4,85.8-85.8v-2.8h3.9c47.4,0,85.8-38.4,85.8-85.8 C349.9,128.2,311.5,89.8,264.1,89.8z"></path>
    </clipPath>
  </defs>
  <image xlink:href="./img/flower.jpg" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" clip-path="url(#clip-path01)"></image>
</svg>

試しにimageのpreserveAspectRatioに「xMidYMid meet」を指定してみます。xMidYMidはobject-position: 50% 50%、meetはobject-fit: containのイメージです。sliceでobject-fit: coverのような表示でないと上下が切れてしまいます。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 350">
  <defs>
    <clipPath id="clip-path01">
      <path d="M264.1,89.8h-3.9v-3.9c0-47.4-38.4-85.8-85.8-85.8c-47.5,0-85.9,38.4-85.9,85.8v3.9h-2.8C38.4,89.8,0,128.2,0,175.5 s38.4,85.9,85.8,85.9h2.8v2.8c0,47.4,38.4,85.8,85.8,85.8s85.8-38.4,85.8-85.8v-2.8h3.9c47.4,0,85.8-38.4,85.8-85.8 C349.9,128.2,311.5,89.8,264.1,89.8z"></path>
    </clipPath>
  </defs>
  <image xlink:href="./img/flower.jpg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" clip-path="url(#clip-path01)"></image>
</svg>

最後に別のsvg内にclipPathを記述します。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 350">
  <image xlink:href="./img/flower.jpg" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" clip-path="url(#clip-path01)"></image>
</svg>

<svg width="0" height="0" class="svg-clip">
  <clipPath id="clip-path01">
    <path d="M264.1,89.8h-3.9v-3.9c0-47.4-38.4-85.8-85.8-85.8c-47.5,0-85.9,38.4-85.9,85.8v3.9h-2.8C38.4,89.8,0,128.2,0,175.5 s38.4,85.9,85.8,85.9h2.8v2.8c0,47.4,38.4,85.8,85.8,85.8s85.8-38.4,85.8-85.8v-2.8h3.9c47.4,0,85.8-38.4,85.8-85.8 C349.9,128.2,311.5,89.8,264.1,89.8z"></path>
  </clipPath>
</svg>

この方法であれば他の画像からでもclipPathが使用できます。ただしclipPathのsvgは非表示にするためsvgのwidthとheightを0にし、cssで以下を指定します。

.svg-clip {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}