SVG画像で写真を切り抜く

Top›labo›

Masking With Svg

SVG画像のアウトラインパスを使って写真をトリミング

| 2022/11/08

開発経緯

レスポンシブなSVGを使って写真を切り抜く

SVGで切り抜くメリット

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

制作方法

SVGを使って写真を切り抜く方法

まずはシンプルなDIV画像をSVGのパスで切り抜く
写真を切り抜く前にまずはシンプルなDIV要素を切り抜いてみます。
下記の様なDIV要素を準備します。クラス名はわかりやすい名前を。
```
<div class="clipping">COLOR</div>
```
切り抜きたいSVGファイルを用意します。
次に切り抜きたい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 ***></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>
```
CSS：clip-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要素で写真要素を梱包すれば完成
写真を切り抜くためにはDIV要素の中に写真を入れればOK。例ではテキストと差し替えましたが、残してもいいです。
```
<div class="clipping"><img src="test.jpg" alt="test"></div>
```
SVGで写真を切り抜く、の完成です。
これで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