SVGのCSSマスク：シルエットを保ち色を設定する

SVGのCSSマスクは、要素のどの部分を見せるかを制御します。単色アイコンではSVGのシルエットをマスクに使い、background-color: currentColorで要素に色を付けます。アイコンはSVG本来の配色ではなく、CSSから見える色を受け取ります。

まず元データの透明部分を確認します。背後に不透明な長方形があると、アイコンのはずが塗りつぶした四角になる場合があります。下のページを見せたい穴は、透明なままでなければなりません。

MDNのmask-imageリファレンスは、元画像とマスクモードによる可視性を説明しています。実際の作業は、有用なシルエットを準備し、解釈方法を選び、インターフェースで使うサイズで確認することです。

一色で塗るシルエットが目的ならマスクを使う

ひし形の穴と小さなサンゴ色の帯を持つブックマークアイコンを考えます。通常のSVG画像は2色です。青い要素のalphaマスクにすると、不透明なアートワークが青を見せ、サンゴ色の帯は別の色ではなくなります。

テーマに合わせるUIアイコンには有用ですが、色の違いに意味があるイラストには不適切な受け渡し方法です。

個別のSVGの塗りやストロークを編集するなら、SVGの色編集ガイドを使います。シルエット自体を再利用する場合にマスクが役立ちます。明確な幾何学的境界なら、独自のSVGクリップを対象に合わせ、シルエットを引き伸ばすか比率を保つかを選びます。

本物の穴がある小さな元データを準備する

この独自の例をbookmark.svgとして保存します。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path fill="#087f8c" fill-rule="evenodd"
    d="M5 3H19V21L12 17L5 21Z M12 6L15 9L12 12L9 9Z"/>
  <rect x="9" y="13" width="6" height="2" fill="#e76f51"/>
</svg>

最初のパスにブックマークの外側とひし形の穴があります。全面の背景長方形はありません。2番目の小さな長方形がサンゴ色の帯です。

マスクに使う前に、対照的な背景でSVGを開きます。ひし形と外側の境界の周囲が透けるか確認します。塗りつぶしたブックマークに白いひし形を重ねても白いページでは似て見えますが、alphaマスクでは不透明なままです。

既存のアセットでは、見える模様だけでなく背景図形も調べます。SVGの透明背景ガイドは、空の領域と白い長方形の違いを扱っています。

CSSでアイコン要素に色を付ける

SVGの隣にicon.cssを置き、次の規則を使います。

.bookmark-icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: currentColor;
  mask-image: url("./bookmark.svg");
  mask-mode: alpha;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.save-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #175cd3;
}

ボタンには見えるラベルを使います。

<button class="save-button" type="button">
  <span class="bookmark-icon" aria-hidden="true"></span>
  Save article
</button>

ここでは「Save article」の横にアイコンがあるため、ラベルを繰り返さずアクセシビリティツリーから隠します。例は表示だけを示すものです。アプリの保存操作には別途接続してください。

色を塗るボックスが必要なので、CSSで幅、高さ、displayを指定します。currentColorはテキストの色を使います。ボタンのcolorを変えると、bookmark.svgを書き換えずにアイコンの色が変わります。

mask-sizeリファレンスは、containを比率を保ちながらマスク画像全体を収める設定と定義します。中央配置と繰り返しなしを組み合わせることで、予測できる一つのアイコンボックスに収まります。web.devのマスクガイドは、サイズと繰り返しの設定を扱っています。

ローカルテストでもHTTPで配信します。MDNのmask-imageの説明では、この用途でローカルのfile://画像は受け付けないと警告しています。マスク画像がない、または読み込みに失敗すると、要素が見えなくなる場合があります。

SVG画像とSVGのmask要素を区別する

画像として使うSVGファイルと、SVGの<mask>要素への参照は別の入力です。拡張子が.svgという理由だけでモードを選ばないでください。

mask-modeリファレンスは、この元データに依存する既定値を定めています。alphaでは不透明な黒と白のどちらも要素を見せます。luminanceでは不透明な白が見せ、黒が隠し、中間値は部分的に見せる場合があります。

mask-typeリファレンスによると、mask-typeはSVGの<mask>要素に適用し、既定はluminanceです。通常のアイコンspanに追加しても、画像マスクの解釈は変わりません。その動作を指定するには、マスクされる要素にmask-modeを使います。

ブックマークの例は通常の外部SVG画像を使い、alphaを明示しています。対応対象のブラウザーで使用するプロパティを試してください。マスク機能全体への対応は、すべてのモードと入力の組み合わせへの対応を保証しません。

四角、消えたアイコン、埋まった穴を診断する

有用な失敗例のテストは、bookmark.svgのコピーの背後に全面の不透明な白い長方形を置くことです。alphaではマスク領域全体が見えます。白を黒に変えても両方とも不透明なので、シルエットは戻りません。

要素の色を調整するのではなく、元データから不要な背景を除きます。修正コピーと比較するため元ファイルを保持します。

これらのテストは分けます。画像要求が成功しても透明部分が正しいとは限らず、透明部分が正しくても要素に欠けた幅や高さは与えられません。

コンポーネントのサイズで判断する

ブックマークを拡大して輪郭を調べ、その後実際のUIサイズに戻します。ひし形の穴、下部の切り込み、ラベルとの間隔を確認します。拡大表示は欠陥を見つけるのに、小さな表示はデザインが有用か判断するのに役立ちます。

対照的な二つのページ背景と二つのアイコン色を試します。穴はそれぞれでページの色を見せるべきです。白いままなら元データの構造へ戻ります。

アイコン群では、同じCSSサイズで隣同士を比較します。viewBox内の空白量が異なると、等しいボックスでも不均等に見えます。UIキット用アイコンの準備ガイドは統一の作業を扱っています。

必要な場合だけラスターのシルエットを復元する

透明なPNGもCSSマスクに使えます。マスクのためにSVG変換は必須ではありません。整理された既存のベクターがあれば保持します。

有用なアイコンが粗いラスター画像でしか残っていなければ、PerfectVectorのPNGからSVGへの手順で編集可能な候補を準備できます。模様に合わせて切り抜き、ベクタープレビューで背景領域と失われた穴を確認してSVGをダウンロードします。マスクに使い、コンポーネントサイズの確認を繰り返します。

ブックマークでは、元のサンゴ色の帯より先に外側の切り込みとひし形の穴を判断します。帯も同じ一色で塗られ、元の色の違いがなくなるためです。複雑な多色イラストには別の扱いが必要かもしれません。すべての細部をトレースせず、シルエットを意図的に選びます。

画像ベクター化の概要は元データの復元をより広く説明しています。このCSSの手順には、ベクターファイルでも有用な形と適した透明部分が必要です。

よくある質問

SVGマスクは元の色を保ちますか？ マスクは可視性を制御します。一様な背景の例では要素が一色を提供するため、元の別々の色は保持しません。

アイコンが塗りつぶした四角になるのはなぜですか？ マスクの元データに全面の不透明な背景がないか確認します。alphaでは不透明な白と黒はどちらも要素を見せます。

SVGマスクは必ずluminanceマスクですか？ いいえ。通常のSVG画像はmatch-sourceでは一般にalphaを使います。SVGのmask要素は解釈を変えない限り既定でluminanceを使います。

透明なPNGをSVGに変換する必要がありますか？ いいえ。PNGをマスク画像に使えます。適したシルエットをラスターから復元や編集する場合、ベクター化は任意の選択です。

参考資料

1. MDN — mask-image — 画像入力、読み込み失敗、ローカルサーバーの要件、可視性。
2. MDN — mask-mode — alpha、luminance、元データに依存する既定値。
3. MDN — mask-type — SVGのmask要素の解釈。
4. MDN — mask-size — containのサイズと画像の比率。
5. web.dev — CSS mask-imageで画像に効果を適用する — 画像マスク、サイズ、繰り返し。

一つのアイコンから始め、シルエット、穴、最終的なUIサイズを確認します。ラスターの復元が必要なら、SVG候補を準備し、透明部分を確認して、インターフェースで使うCSSの色で試します。