SVGのclipPathとmaskで切り抜く
2つの手法、用途は別
SVGには「切り抜き」が2つあります：clipPath（図形によるハードな切り抜き）と mask（グレースケール/透明度による切り抜き）。画像のはめ込みや効果に使います。
clipPath：図形で切る
<defs> <clipPath id="circle"><circle cx="50" cy="50" r="50"/></clipPath> </defs> <image href="photo.jpg" width="100" height="100" clip-path="url(#circle)"/>
円の内側だけが見えます。縁はシャープ（全か無か）。
mask：輝度で切る
<defs> <mask id="m"> <rect width="100" height="100" fill="white"/> <circle cx="50" cy="50" r="30" fill="black"/> </mask> </defs> <rect width="100" height="100" fill="#6c8cff" mask="url(#m)"/>
maskでは白＝表示、黒＝非表示、灰色＝半透明。透明度のグラデーションが作れます。
どちらを使う？
- clipPath：縁のはっきりした切り抜き（写真を形にはめる）。
- mask：フェード、柔らかな透明、効果。
コツ
写真を円や形にはめるなら clipPath が最も簡単。何かをフェードさせるなら、グラデーション付きの mask を使います。
切り抜きの形を作る
svgdeskで切り抜きの図形を作り、コードをコピーして <clipPath> や <mask> の中で使います。