CSSのmask-imageプロパティを利用して、SVGで画像を切り抜きます。
デモページはこちら

まず、以下をmask.svgとして保存します。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 350">
  <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>
</svg>

共通のCSSは以下になります。画像ファイルにクラス名mask-imgを付与し、mask-imageプロパティのurlでマスクするsvgファイルを指定します。

.div-parent {
  position: relative;
  width: 100%;
  max-width: 350px;
  margin: 0 auto 2em;
}
.mask-img {
  mask-image: url(../img/mask.svg);
}

mask-imageの指定のみだと初期値のmask-repeat: repeatが適用されるため、マスクが繰り返されます。なお、mask-sizeの初期値はautoですが、これはcontainの指定と見た目は同じです。

まず、mask-size: containとmask-repeat: no-repeatを指定します。これでマスクの繰り返しは解除できます。

.style01 {
  mask-size: contain;
  mask-repeat: no-repeat;
}

mask-positionの初期値は0% 0%のため、マスクが画像の左上に寄っています。そこでmask-position: centerを指定します。

.style02 {
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

マスクのサイズは画像サイズに依存します。マスクを大きくする場合はdivのmax-widthを調整して画像を大きく表示すれば実現できます。

.style02 {
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
.style03 {
  max-width: 467px;
}

なお、マスクするsvgと画像の縦横比が違う場合、mask-size: coverを指定してもうまくマスクできません。

.style04 {
  mask-size: cover;
}