クリッピングパス
読み: くりっぴんぐぱす
ベクターパスで画像の表示領域を定義し、パス外の部分を非表示にする切り抜き手法。印刷や Web の両方で使用される。
クリッピングパス (Clipping Path) は、閉じたベクターパスによって画像の表示領域を定義し、パスの外側を非表示 (透明) にする切り抜き手法である。印刷業界では商品写真の背景除去に長年使われてきた技術で、EPS や PSD ファイルにパス情報を埋め込む形で運用される。
クリッピングパスの特徴と制約を整理する。
- エッジの鮮明さ: ベクターで定義されるため、拡大縮小してもエッジが劣化しない。ロゴや商品の輪郭切り抜きに最適
- 二値的な切り抜き: パスの内側は完全に表示、外側は完全に非表示。半透明のグラデーション境界は表現できない
- アンカーポイント数の制限: 複雑すぎるパス (数百ポイント以上) は RIP (Raster Image Processor) でエラーを起こす場合がある
Web 開発では CSS の clip-path プロパティが同等の機能を提供する。
clip-path: circle(50%)- 円形に切り抜きclip-path: polygon(50% 0%, 100% 100%, 0% 100%)- 三角形に切り抜きclip-path: url(#svgClip)- SVG の<clipPath>要素を参照
クリッピングパスとマスクの使い分けは以下のとおりである。硬いエッジで明確に切り抜く場合はクリッピングパス、柔らかいエッジや半透明の境界が必要な場合はマスクを選択する。印刷入稿では依然としてクリッピングパスが標準的だが、Web ではマスクの方が表現力に優れる場面が多い。
SVG では <clipPath> 要素内にパスを定義し、clip-path="url(#id)" で適用する。CSS の clip-path と組み合わせることで、アニメーション可能な動的切り抜きも実現できる。