Studio
Happyvalley

SVG画像で
写真を切り抜く

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

image: 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

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

    sea

    DIV要素で写真要素を梱包すれば完成

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

    <div class="clipping"><img src="test.jpg" alt="test"></div>
    SVGで写真を切り抜く、の完成です。

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

    IMAGEsea


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

    test

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

    SVGで写真を切り抜くサンプル:
    https://labo.studio-happyvalley.com/mask/

    MDN clip-path 解説:
    https://developer.mozilla.org/ja/docs/Web/CSS/clip-path


『SVG画像で写真を切り抜く』関連のお薦め

このページで紹介しているプログラムやビジュアルなどご依頼いただければ実装を賜ります。
お問い合わせはこちら