SVGで画像を切り抜く [クリッピングマスク] [IE含め全モダンブラウザに対応]

2018/07/20

更新するコンテンツの画像が正方形・長方形以外の形のとき、どうコーディングしようか迷うことがありますね。
ただの円形なら CSS で丸める、背景が単色なら切り抜く部分を透明にした png や svg を画像の上に重ねるなどで対応できますが、どちらも難しい場合は SVG での切り抜きがおすすめです。

ただ、記述の仕方によって、IEで表示されなかったりスマホで拡大・縮小できなかったりと検証が面倒…。
そういったポイントを押さえ、全モダンブラウザで表示できる方法をご紹介します!

完成形サンプル

SVG で画像を切り抜く流れ

  1. イラストレーターで切り抜きたい形のパスから SVG を書き出し
  2. HTML に SVG タグを記述し、clipPath を作成
  3. 切り抜く画像に clipPath を適用

①イラストレーターで切り抜きたい形のパスから SVG を書き出し

普通に書き出ししたあと、 SVG ファイルをテキストエディタで開き、要らない記述は全部削除しておきましょう。
例えばこんな感じ。

↓いらない部分を削除↓

★ポイント
必要なのはパス情報だけで、g タグ(ai データのグループから作られたもの)や style はほぼ不要。

②HTML に SVG タグを記述し、clipPath を作成

切り抜きに使用するパスを clipPath として用意します。
svg を img タグで読み込むのではなく、HTML に直書きです。

・この SVG 自体は非表示にしたいので、「width=”0″ height=”0″ style=”position: absolute; top: 0; left: 0;”」で消しています。
・切り抜きに使用する path(circle や polygon など図形によってタグは異なります)を clipPath というタグで囲い、任意の id を付けておきます。

③切り抜く画像に clipPath を適用

②で用意した clipPath(例では #clip01)を、切り抜きたい画像に適用させます。

・SVG タグの viewBox には①で作成した元々の SVG ファイルに書かれているサイズを指定します。
・width には viewBox 内の3つめの数字、height には viewBox 内の4つめの数字が入ります。

★ポイント
img タグに対して css(clip-path)でクリッピングする方法がありますが、IEで効きません
そのため、svg の image というタグを使用しています。

IEでダメなサンプル
★ポイント
画像を拡縮可能にするために、image タグに「width=”100%” height=”100%” preserveAspectRatio=”xMidYMid slice”」を指定します。

拡縮できないサンプル

あとは、SP版になったら画面幅いっぱいに拡大・縮小する形にしたいので、CSS に下記を記載します。
普通の画像の場合と同じですね。

これで完成です!

▼サンプルの全コードはこちら

川端