SVGのclipPathとmask：明確な縁か柔らかなフェードか

画像を決まった輪郭で切りたい場合は、SVGの <clipPath> を使います。部分的な透明度で画像をフェードさせたい場合は <mask> を使います。マスクでも明確な切り抜きはできますが、幾何学的な硬い縁ならクリッピングパスの方が意図を簡潔に表します。CSS Masking仕様は、これらを別々の可視性操作として定義しています。

ロゴ形にした画像を別の編集ソフトへ渡す場合、この選択は重要です。両方とも見える内容を制御するだけで、隠したピクセルを削除した形状にしたり、画像をベクターパスに変えたりはしません。このガイドはオリジナルのラスター風景1つと輪郭1つを使い、可視性の規則だけを変えます。自分の図形でも書き出し前に同じテストができます。

必要な縁で選ぶ

クリップの見える縁には、通常の描画アンチエイリアスがあり得ます。ただし、クリップ形状内のグレースケールや不透明度グラデーションによる、意図的な部分表示の帯は表現できません。MDNのクリッピングとマスキング入門は、小さなSVG例でこの違いを示します。

1画像を3つの可視性規則で比較する

このテストでは小さな風景を描き、400 × 240のPNGにラスター化し、全パネルで同じ葉のような輪郭の下に同じピクセルを置きました。左は輪郭でクリップ、中央は白から黒の輝度マスク、右は不透明から透明へのアルファマスクです。両グラデーションは同じ左から右のフェードを作るよう選びました。消える縁を判断しやすいよう、各結果を明るい背景と暗い背景に表示しています。

2つのマスク列が似て見えるのには理由があります。白黒の輝度グラデーションと白の不透明度グラデーションが、比較可能なマスク値を表しているからです。入力を交換できるわけではありません。不透明な黒は輝度マスクでは隠しますが、アルファマスクでは表示します。アルファモードではピクセルの不透明度が結果を決め、黒か白かは関係ありません。CSS Maskingのマスク処理定義は、両計算を規定しています。

1つの輪郭からクリップとマスクを作る

次を clip-or-mask.svg として保存し、自分の photo.png を隣に置き、同じフォルダーからHTTPで両方を配信します。2つの画像は同じ400 × 240の座標系を使い、異なるのはclip-pathとmaskだけです。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 840 280">
  <defs>
    <path id="motif"
      d="M30 175 C65 82 140 28 232 41 C290 44 304 75 374 39
         C361 122 310 196 236 219 C139 246 75 217 30 175 Z" />
 
    <clipPath id="hard" clipPathUnits="userSpaceOnUse">
      <use href="#motif" />
    </clipPath>
 
    <linearGradient id="fade" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="white" stop-opacity="1" />
      <stop offset=".45" stop-color="white" stop-opacity="1" />
      <stop offset="1" stop-color="white" stop-opacity="0" />
    </linearGradient>
    <mask id="soft" mask-type="alpha" maskUnits="userSpaceOnUse"
      maskContentUnits="userSpaceOnUse" x="0" y="0" width="400" height="240">
      <use href="#motif" fill="url(#fade)" />
    </mask>
  </defs>
 
  <g transform="translate(20 20)">
    <image href="photo.png" width="400" height="240"
      clip-path="url(#hard)" />
  </g>
  <g transform="translate(440 20)">
    <image href="photo.png" width="400" height="240"
      mask="url(#soft)" />
  </g>
</svg>

参照IDはSVG内で一意にします。両方がuserSpaceOnUseを使うため、モチーフの座標は各画像のローカルな400 × 240領域と一致します。MDNの<clipPath>リファレンスは、対象の本来の形状を変えず描画を制限すると説明します。MDNの<mask>リファレンスは、領域を配置するmaskUnitsと図形を配置するmaskContentUnitsを区別します。

輝度を試すには、別のIDでマスクを複製し、mask-type="luminance"にして、グラデーションを最初が不透明な白、最後が不透明な黒に変えます。mask参照も新IDに合わせます。SVGの<mask>は既定で輝度です。この例は後の編集で黒の意味が黙って変わらないよう、モードを明示します。MDNのmask-typeリファレンスを参照してください。

書き出す前に結果を確認する

1. 明るい背景と暗い背景の両方で描画します。白で見えないフェードも暗い背景では明確かもしれません。
2. 画像とモチーフが同じ座標を使うことを確認します。画像だけサイズ変更すると輪郭が合わなくなります。異なるサイズに再利用するクリップはclipPath単位ガイドが座標選択を説明します。
3. 柔らかな縁が急に終わるなら、グラデーションだけでなくマスクのx、y、width、heightを確認します。領域は境界外を切るため、グラデーションを広げるだけでは狭い領域は直りません。MDNは領域の既定値を掲載していますが、納品物は明示的境界の方が確認しやすくなります。
4. 保存したSVGを使うアプリで開き直します。正しいブラウザー描画は、別の読み込みツールが必要なクリップ、マスク、リンク画像、編集可能性を保つ証明ではありません。
5. 構造を確認します。<image>をまだ含むなら、輪郭がベクターでもラスターピクセルを含んでいます。埋め込みラスターの確認が区別を示します。

この画像はPNGのままです。クリップもマスクもトレースしません。本当の切断形状や永続的な透明な穴が必要なら、編集ソフトで対応するパスを作り書き出しを確認します。埋まる穴の診断ガイドは、本当の穴と白いキャンバスで空に見える白い図形を区別します。

PerfectVectorの役割

必要な輪郭がPNGやJPGのロゴしか残っていないなら、PerfectVectorの画像ベクター化手順で編集可能な候補を得られます。<clipPath>や<mask>へ輪郭をコピーする前に、外側のパス、小さな隙間、不要な背景形状を確認します。可視性の方法を選んで効果を作るのはSVG編集ソフト側です。きれいな既存ベクターマスターがあれば保持します。

写真をマスクの後ろに置くためだけにベクター化する必要はありません。細部が重要なら写真のピクセルを画像として残します。SVG内の画像ではなくCSSで制御する単色アイコンには、別のSVGのCSSマスクガイドを使います。

よくある質問

SVGのclipPathは緩やかなフェードを作れますか？ いいえ。境界の通常のアンチエイリアス以外は、対象のどの部分が見えるかを定義します。意図的なフェードには中間の不透明度や輝度を持つマスクを使います。

すべてのSVGマスクで黒は画像を隠しますか？ いいえ。不透明な黒は輝度では隠しますが、アルファでは不透明なため表示します。完全に透明な図形はどちらでも隠します。

クリッピングやマスキングでPNGはベクターになりますか？ いいえ。描画時の可視性を変えます。SVGはラスターの<image>を含んだままの場合があり、ベクターのみの納品には別のトレースやパス編集が必要です。

参考資料

1. W3C — CSS Masking Module Level 1 — クリップ、マスク、アルファ・輝度マスク値を定義します。
2. MDN — クリッピングとマスキング — 明確なクリップと柔らかなマスクの例です。
3. MDN — <clipPath> — クリップ動作、座標選択、元の形状が変わらないことを説明します。
4. MDN — <mask> — 領域、内容の座標系、参照動作を説明します。
5. MDN — mask-type — マスク図形のアルファ・輝度の解釈を説明します。

ラスターのロゴに編集可能な輪郭が先に必要なら、PerfectVectorでSVG候補を作成し、復元パスを確認します。その後、クリップかマスクを適用し、書き出したファイルを利用先で開き直してください。