SVG画像で
写真を切り抜くSVG画像のシルエットで
写真をマスキング

アイコンや平面形状はほぼSVGを使用しています。
ベクターなので、ピクトと違い使用サイズに制限されないのがいいですね。
せっかくなのでそのシルエットを生かして写真を切り抜いてみましょう。
ではその方法のご案内。

写真を切り抜く前にまずはシンプルなDIV要素を切り抜いてみます。
下記の様なDIV要素を準備します。クラス名はわかりやすい名前を。

<div class="clipping">COLOR</div>

次に切り抜きたいSVGファイルを用意します。
今回はハートの形を用意。

<svg role="img" aria-label="ハート型吹き出し" xmlns="http://www.w3.org/2000/svg" width="144" height="100" viewBox="0 0 144 100"><g id="レイヤー_2" data-name="レイヤー 2"><g id="mark"><path d="M87.17,5.47C71,13.84,63.1,11.62,50.52,8.27c-22.18-5.91-40.63,1.91-48.11,21S5.2,72.36,28.78,78.74c36.69,9.92,37.2,12.2,35.83,15.8-.81,2.1-2.12,2.61-4.43,3.43-2,.7-1.33,2,0,2,4.38,0,13.27-3.85,16.86-6.27,17.6-11.9,60.47-13,66.3-48.5C148.82,12,119.08-11,87.17,5.47Z" fill="#ff96bd"></path></g></g></svg>

切り抜きに使用するコードは<path ***></path>の部分だけです。

<path d="M87.17,5.47C71,13.84,63.1,11.62,50.52,8.27c-22.18-5.91-40.63,1.91-48.11,21S5.2,72.36,28.78,78.74c36.69,9.92,37.2,12.2,35.83,15.8-.81,2.1-2.12,2.61-4.43,3.43-2,.7-1.33,2,0,2,4.38,0,13.27-3.85,16.86-6.27,17.6-11.9,60.47-13,66.3-48.5C148.82,12,119.08-11,87.17,5.47Z" fill="#ff96bd"><path>

最初に作成したDIV要素を先ほど用意したSVGのPATHを使を使って切り抜きます。
使用するCSSプロパティはclip-pathで下記の様に設定し切り抜きます。

.clipping {
  width: 288px;
  height: 200px;
  background: #6effbb;
  overflow: hidden;
  clip-path: path('M174.33,10.95c-32.37,16.74-48.13,12.～79.52Z');/*適当なsvgファイルのパス*/
}

下記の様になるはずです。

COLOR

それでは次は写真を切り抜いてみましょう。
下記の写真を切り抜きます。

写真を切り抜くためにはDIV要素の中に写真を入れればOK。例ではテキストと差し替えましたが、残してもいいです。

<div class="clipping"><img src="test.jpg" alt="test"></div>

これでOK.ブラウザで見ると下記の様にSVG画像で切り抜かれた写真の完成です。

IMAGE

MDNの解説ページではIMG要素を直接CSSでクリッピングしています。
画像を直接クリッピングしているため、切り抜かれた残りの画像は見えないだけで残っています。
そのため意図しない余白ができることがあります。



上のサンプルの場合、下部に意図しない余白が発生しています。

SVGで写真を切り抜くサンプル：https://labo.studio-happyvalley.com/mask/
MDN clip-path 解説：https://developer.mozilla.org/ja/docs/Web/CSS/clip-path