SVGのfeColorMatrix：塗りを変えずに色を変更する

SVGの feColorMatrix フィルターは、レンダラーが表示する色を変えます。パスの fill 値を書き換えるものではありません。元に戻せる視覚効果には便利ですが、フィルター付きのプレビューと、新しい配色に編集したSVGは別の納品物です。

Webプレビューが必要なら、フィルターを保持して実行するページでテストします。青い形状を選んで青の塗りを編集する必要があるなら、元の描画色を変えます。元データがPNGの場合、フィルターもSVGで包むことも編集可能なベクター形状を作りません。それには別途ベクター化が必要です。

以下の例では、両方の色変更方法に同じ2枚の葉のモチーフを使います。コードを保存し、元データを調べ、フィルターを除いて、何が変わったかを正確に確認できます。

必要な色変更の結果を選ぶ

SVGの色編集ガイドでは、塗り、ストローク、スタイル規則の探し方を扱っています。ここでは、フィルターがファイルに何を残すかという、より限定した問題を扱います。MDNは feColorMatrix をピクセルの色チャンネルの変換と説明し、塗りとストロークのガイドでは形状に適用する描画色を説明しています。

確認できる2色の例

次を filtered-leaves.svg として保存し、ブラウザーで開きます。最初の葉はオレンジの塗り #cc6633、2枚目は半分の不透明度を持つ緑の塗り #339966 から始まります。行列は緑とアルファを保持し、赤と青のチャンネルを入れ替えます。

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 260 220" width="260" height="220">
  <defs>
    <filter id="swap-red-blue" color-interpolation-filters="sRGB">
      <feColorMatrix type="matrix" values="
        0 0 1 0 0
        0 1 0 0 0
        1 0 0 0 0
        0 0 0 1 0" />
    </filter>
  </defs>
  <g filter="url(#swap-red-blue)">
    <path fill="#cc6633"
      d="M40 125 C25 35 105 15 150 35 C165 105 120 150 40 125Z" />
    <path fill="#339966" fill-opacity="0.5"
      d="M100 175 C90 90 180 65 225 90 C230 155 175 200 100 175Z" />
  </g>
</svg>

このオリジナルモチーフについて、元の描画色、フィルター版、直接編集版、フィルターを除いたコピーの4種類をブラウザーで描画しました。直接編集版ではフィルターを使わず、最初の塗りを #3366cc、2つ目を #669933 に変えています。両方の色変更方法とも、青とオリーブ色のモチーフを表示しました。しかしフィルター版のDOMを調べると、塗り属性は元のオレンジと緑のままでした。フィルターを除くと元の配色に戻りました。

これは小さなブラウザーでの実演であり、すべての編集ソフトや書き出し形式の互換性テストではありません。納品時に確認すべき点は単純です。フィルター付きファイルは、その効果が保持され描画されることに依存します。直接塗りを編集した版は、新しい配色を形状そのものに保持します。

元データの確認を再現するには、SVGをテキストエディターで開いて fill= を検索します。その後、グループから filter="url(#swap-red-blue)" だけを除き、ブラウザーを更新してください。変更していないファイルも横に保管し、結果を比較できるようにします。

行列を暗記せずに4行を読む

type="matrix" の場合、values 属性には20個の数値、つまり5列の行が4つあります。各行は1つの出力チャンネルを計算します。列は入力の赤、緑、青、アルファ、定数オフセットを使います。MDNの行列リファレンスでは、式と単位行列を示しています。

この例では、1行目が青を新しい赤にし、2行目が緑を維持し、3行目が赤を新しい青にします。4行目はアルファを保持します。

0 0 0 1 0

この最後の行は「オフセットを追加せず、既存のアルファを使う」という意味です。すべて0に置き換えると、結果は透明になります。最後の列に定数を加えると、元が透明だった場所も透明度が変わり、フィルター領域内に不要な長方形が生じる場合があります。

行列は、フィルターに入力される描画済みの内容を処理します。どのピクセルが葉、文字、ストローク、埋め込み写真から来たかは認識しません。影響させたいグループやオブジェクトに適用してください。デザインの意味上の1部分だけを変えたいなら、その部分を選んで描画色を編集します。

RGBの色見本から数値を取るならsRGBを設定する

SVGのフィルタープリミティブは、既定で linearRGB を使います。rgb(128, 128, 128) のような色見本は通常sRGBで指定されるため、既定のフィルター空間で行列の定数を 0.5 にしても、半分の値のsRGBと同じ灰色にはなりません。行列がそのsRGBチャンネル値を処理する想定なら、color-interpolation-filters="sRGB" を使ってください。これは color-interpolation とは別です。そちらの属性を変えても、フィルターの色空間は選べません。MDNは既定値とこの違いを説明しています。

単色の #3366cc のシルエットでは、正規化したRGB値は 51/255、102/255、204/255、すなわち 0.2、0.4、0.8 です。次のフィルターは入力RGB値を捨て、それらの定数を設定しながら入力アルファを保持します。

<filter id="solid-blue" color-interpolation-filters="sRGB">
  <feColorMatrix type="matrix" values="
    0 0 0 0 0.2
    0 0 0 0 0.4
    0 0 0 0 0.8
    0 0 0 1 0" />
</filter>

オブジェクトから filter="url(#solid-blue)" でこのフィルターを参照します。不透明な元の色の区別を意図的に除くものです。シルエットには適しますが、写真の階調の細部を保つ用途には適しません。Filter Effects仕様では、チャンネル変換と、アルファを事前乗算していない色値の扱いを定義しています。

sRGBの設定は計算空間の選択であり、すべての画面や印刷で同じ色になる保証ではありません。より広い納品時の色の違いには、SVG書き出しの色チェックリストを使ってください。

プレビューだけでなく納品ファイルを確認する

フィルターによる色変更は、元の図形とフィルター定義が保持されている間は元に戻せます。スクリーンショットやラスター書き出しは、見える結果をピクセルとして記録します。どちらの操作も、それだけで新しい配色を編集可能なパスの塗りにするものではありません。

ベクターを渡す前に、実際の利用先で確認してください。

1. 受け取り側が使うのと同じ読み込みや書き出し経路で、保存したSVGを開きます。
2. 色と半透明のエッジをブラウザープレビューと比較します。
3. 形状を選び、塗りを確認します。意図した新しい値が入っているのか、効果の下に元の色が残っているのかを調べます。
4. 一度保存して開き直します。効果が必要なら、フィルター定義と参照が保持されたことを確認します。
5. 受け取り側が通常の編集可能な単色を必要とするなら、直接塗りを編集した版を使い、その納品コピーから不要になったフィルターを除きます。

グラデーション、ストローク、不透明度、ブレンドした重なりに対し、全体の行列は汎用的な検索置換ツールではありません。意図した見た目を元の描画色として再構築するには、2つの16進値を超える編集が必要な場合があります。ラスターの納品物でもよければ、確認した見た目をPNGに書き出すことも選択肢です。ベクターのマスターは別に保持します。

この手順でPerfectVectorが必要になる場合

すでにこの2つのパスがあるなら、直接編集してください。色フィルターを除くためにラスター化して再トレースする理由はありません。

PerfectVectorが役立つのは、元の図形がPNGやJPGで、編集可能な領域が必要な場合です。画像からベクターへの変換で候補を作り、色を変える前に形状の境界と小さな細部を確認します。ビットマップにフィルターを適用しても見た目が変わるだけで、ビットマップはピクセル内容のままです。埋め込みラスターの確認で、選択して編集できるパスと区別できます。

写真を単に色付けする目的なら、ラスターの手順を維持してください。ベクターのマスターがあるロゴには、マスターを使います。ベクター化の概要では、ピクセルから形状を復元する工程が有用な場合を説明しています。

よくある質問

feColorMatrixはSVGのfill値を変えますか？ いいえ。描画された色チャンネルを変換します。別途編集しない限り、元のfill属性は変わりません。

選んだ灰色が予想より明るいのはなぜですか？ フィルターの計算空間を確認してください。SVGのフィルタープリミティブは既定でlinearRGBです。行列の定数が正規化したsRGB色見本の値を表すなら、color-interpolation-filtersをsRGBに設定します。

色を変えながら透明度を保つにはどうしますか？ アルファの行を0 0 0 1 0に保ちます。入力アルファが維持されます。半透明のエッジを確認し、透明度を変える意図がなければアルファのオフセットを加えないでください。

フィルター付きPNGは編集可能なベクターになりますか？ 色フィルターは見た目を変えますが、形状は変えません。個別のベクター形状を編集するには、ベクターの原本を入手するか、ラスターをベクター化して出来たパスを確認してください。

参考資料

1. MDN：feColorMatrix要素 — 行列の行、チャンネル、利用できる変換形式を定義しています。
2. MDN：color-interpolation-filters属性 — linearRGBの既定値とsRGBの明示的な選択を説明しています。
3. W3C：Filter EffectsのfeColorMatrix — 色とアルファの変換動作を規定しています。
4. MDN：塗りとストローク — SVG形状が使う元の描画色を説明しています。

図形がピクセルでしか存在せず、別々に編集できる色が必要なら、画像をベクター候補に変換してください。パスを確認し、元の描画色を変更して、納品ファイルを開き直し、見た目と編集可能性の両方を確認します。