イラストレータなどで作成したSVGデータをHTMLでクリップパスとして切り抜くコードです。
まず作成したSVGのパスを以下のように修正する。

<svg width="0" height="0" style="position: absolute; top: 0; left: 0;">
 <clipPath id="imageClipPath01">
  <path d="M152,18.3c35.～,123.5,0Z"/>
 </clipPath>
</svg>

SVGのパスは実際には表示しないので、見えないようにスタイルを設定している。

そして、上記のIDをつけたパスを切り抜きたい画像に適用する。

<svg viewBox="0 0 304 206">
<image xlink:href="img/hogehoge.jpg" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" clip-path="url(#imageClipPath01)"/>
</svg>

viewBoxの値はSVGの幅と高さを入れる。3つめはwidth、4つめはheightを入れる。
また、レスポンシブにする場合はCSSでSVGの大きさを指定する。
適用するパスに応じてIDを変更する。