SVGの色が書き出し後に変わる理由と原因の診断

SVGの色が書き出し後に変わるのは、元の外観と納品ファイルが異なる方法で解釈されるためです。書き出し機能が色の値を変換する場合があります。WebサイトがCSSでfillを上書きしたり、親要素からcurrentColorを決めたりする場合もあります。グラデーション、不透明度、描画モード、フィルターが、出力先で異なる扱いを受ける機能に依存しているかもしれません。書き出したマークアップは正しく、特定の読み込み機能だけが例外の場合もあります。

すべての16進数の色を置き換えることから始めないでください。まず外観が変わる地点を見つけます。それにより、SVGを修復する、書き出しを変える、納品用コピーを簡略化する、別形式を使う、のどれが必要か分かります。

症状に合わせて最初の確認を選ぶ

最初に調べる場所

5分で問題を切り分ける

1. 編集可能な原本を変更しない

確認用の複製を保存します。唯一の編集可能なコピーで効果を統合したり、全オブジェクトをアウトライン化したり、色を置換したりしないでください。原因を隠し、後の修正を難しくする場合があります。

2. 書き出したSVGを2か所で開く

最新のブラウザーを比較基準にし、同じファイルを実際の出力先で開くか読み込みます。同じ背景上で両方を元の図柄と比較します。

• 書き出した両方が誤っていれば、書き出し機能や保存されたSVGを調べます。
• 単独のブラウザーでは正しく出力先では誤るなら、埋め込み、CSS、読み込み機能の対応を調べます。
• 透明や合成領域だけが異なるなら、単色の塗りを触る前に背景と効果を確認します。

ブラウザーは便利な比較基準ですが、すべてのデザイン・制作アプリが同じ機能を読み込める証明ではありません。

3. 描画の指示を調べる

テキストエディターでSVGを開き、次を検索します。

fill=
stroke=
currentColor
url(#
opacity=
fill-opacity=
mix-blend-mode
filter=

まだ書き換えず、構造を探します。直接指定したfill="#2F6BFF"は、fill="currentColor"やfill="url(#paint0)"とは異なる分岐を示します。

初めてSVGマークアップを開く場合は、広いSVG編集のガイドでコードと視覚的なエディターの方法を説明しています。

4. 問題のオブジェクト1つに絞る

色が変わる最小のオブジェクトを新しい文書へコピーして書き出します。フィルター、描画モード、グラデーション、グループの不透明度の順に、1つずつ除きます。最初に結果が直った除去が、非対応または状況依存の機能を示します。

この切り分け確認は、具体的な納品制約が分かるため、イラスト全体を統合するより安全です。

原因1：書き出し機能が色空間を変換した

16進数の色と一般的なrgb()構文はsRGB色を記述します。CSS Color Module Level 4で定義されるように、現在のCSSはcolor()でDisplay P3などの広色域も表現できます。そのため、デザインアプリの元の色をsRGBの16進値にするには変換が必要な場合があり、数値が変わったり色域外の色が切り詰められたりします。

次の順に確認します。

1. 元文書の色空間と選んだオブジェクトの数値を記録します。
2. 不透明度や効果のない単色オブジェクト1つを書き出します。
3. SVGをテキストで開き、保存されたfillやstrokeを読みます。
4. 出力数値を元と比較します。
5. 同じファイルを出力先で確認します。

ファイル内の値が変わったなら、変換は書き出し時に起きています。出力先の色空間を意識して選び、再度書き出します。値は同じで見た目だけ違うなら、CSS、効果、背景、読み込み動作へ進みます。

CMYKの色分解、特色、特定の黒の配合を必要とする印刷では、印刷の基準となる原本をデザインアプリのネイティブ形式で残し、印刷会社が求める形式、多くの場合PDFで納品します。SVGは画面用途に役立ちますが、確実に記述できない作業の色基準に黙って置き換えないようにします。

原因2：currentColorやCSSが描画色を置き換えた

SVGはCSSでスタイルを指定できます。SVG 2のスタイル仕様では、fillなどのプレゼンテーション属性は詳細度0でCSSカスケードに参加するため、作成者のCSSで上書きできると説明されています。インラインSVGは周囲のページと同じ文書内にあるため、汎用のクラス名がサイトのスタイルと衝突する場合があります。

currentColorは意図的な間接指定です。MDNのSVG colorリファレンスは、fill、stroke、グラデーションのカラーストップなどへ値を供給すると説明しています。周囲のテキストに従うアイコンには便利ですが、その箇所に固定色がないことも意味します。

納品方法は2つあります。

• テーマに応じて変えるWebアイコンでは、currentColorを残し、SVGか意図した親に明示的なcolorを設定します。
• 独自のパレットを保つ単独素材では、塗りとストロークを明示し、内部クラスには衝突しない名前を使います。

複数のインラインSVGにpaint0、clip0、gradient1などのIDがあれば、一意にして参照も一緒に更新します。idだけを変えないでください。すべてのurl(#id)が引き続き解決する必要があります。

書き出しの変化を修復するのではなく、意図的な色変更が目的なら、SVGの色を安全に変えるガイドを使います。

原因3：グラデーションや描画参照が壊れた

SVGのグラデーションとパターンはペイントサーバーです。図形はfill="url(#brandGradient)"などで参照し、定義は通常<defs>に置きます。SVG 2のペイントサーバー仕様は、グラデーションの座標と変換が結果に与える影響も定義しています。

次の3項目で、ほとんどの構造上の問題を見つけられます。

1. すべてのurl(#id)に対応する定義がある
2. 複数SVGを1つのページや文書に組み合わせてもIDが一意である
3. 出力先が使用中の描画型、単位、変換、グラデーションのカラーストップを維持する

単純な単色は正しく読み込めてもグラデーションが失敗する場合は、原本には残し、出力先用のコピーを作ります。まず簡単な線形や放射状グラデーションを試します。それでも再現できず、塗りの編集より正確な外観が重要なら、読み込み先が対応する形式や統合済み素材を使います。編集可能なソースと置き換わらないよう、そのコピーを明確に表示します。

原因4：不透明度と合成が見た目を変えた

表示されるピクセルは、保存された塗りと同じとは限りません。fill-opacityは図形の塗りに作用し、グループのopacityは子を組み合わせた後で適用され、描画モードは元の色と背面を混ぜます。W3Cの合成とブレンディング仕様が描画順序と背面に依存する式を定義しています。

実用上、2つの結果があります。

• 色の値が変わらなくても、白、黒、色付きページ上で同じSVGが異なって見える場合があります。
• グループの不透明度を各子へ移すと、合成順序が異なるため重なりが変わる場合があります。

実際の背景で確認します。次に複製でmix-blend-mode、フィルター、マスク、グループ不透明度を1つずつ除きます。重要な効果を出力先が維持できなければ、簡略化したベクター表現か統合した納品素材を選びます。関係ない部分まで統合しないでください。

図柄の後ろの白や色付きの長方形は別のケースです。透明背景SVGのガイドは、実際の背景図形と空のキャンバスを区別する方法を示します。

原因5：出力先がSVGの一部だけを読み込んだ

SVGはWeb標準ですが、多くのデスクトップ、印刷、カット、プレゼンテーション、サイト制作ツールは独自のオブジェクトモデルへ変換します。対応はアプリやリリースで異なる場合があります。現在の公式資料がそう説明し、使用バージョンも一致するのでなければ、「このアプリはグラデーションに対応しない」といった断定を避けます。

代わりに、条件を管理した読み込み確認を使います。

1. 単色のパス1つを読み込みます。
2. 元のグラデーションを加えます。
3. 不透明度を加えます。
4. 描画モードやフィルターを加えます。
5. 最初に変わった版で止めます。

これでその出力先の境界が分かります。完全な原本は残し、検証した境界内の納品コピーを書き出します。消えるのがストロークなら、すべての線を塗りへ変換せず、ストローク専用の書き出し診断に従います。

最小限の安全な修正を選ぶ

PerfectVectorの役割

ベクターの元データが失われた、または使えず、残った最良の図柄がラスター画像の場合にPerfectVectorが役立ちます。画像を編集可能なベクター図形にし、出力先で開く前にパレット、透明、パスを調べられます。

継承CSSの修復、欠落したグラデーション定義の復元、デザインアプリのカラープロファイルの復旧、非対応描画モードの保持、読み込み側パーサーの変更は行いません。SVGに良好なパスと描画指示が残るなら、スクリーンショットを再トレースせずファイルを修復します。その方が元の構造を多く残せます。

納品前の確認項目

• 編集可能な原本を残し、複製で修正する
• 同じ背景で、ブラウザーと実際の出力先の表示を比較する
• 保存されたfillとstrokeの値が変わったか調べる
• currentColor、汎用クラス、重複IDを探す
• すべてのurl(#id)を定義と対応させる
• グループ不透明度、描画モード、フィルター、マスクを別々に確認する
• 出力先が再現できない機能だけを簡略化する
• 以前の版を置き換える前に、最終納品ファイルを開き直すか再読み込みする

よくある質問

ブラウザーでは正しく、読み込み後に誤るのはなぜですか？ 出力先が異なる変換をする機能やスタイル環境を使っている可能性が高いです。単色パス1つを読み込み、グラデーション、不透明度、描画モード、フィルターを1つずつ戻します。最初の失敗で、原本を傷めず出力先の境界が分かります。

SVGは常にRGBですか？ 一般的な16進色とrgb()はsRGBですが、現在のCSSはDisplay P3なども表現できます。デザインや印刷アプリは書き出し・読み込み時に変換する場合があります。保存された色を調べ、CMYKや特色には印刷会社の指定する制作形式を使います。

書き出し後にSVGが黒になったのはなぜですか？ currentColor、失われたCSSルール、欠落したグラデーションや描画IDを確認します。黒は元の塗りの置換ではなく、継承色や代替動作の症状かもしれません。単独ファイルと埋め込み・読み込み版を比較します。

色が誤って見えたらすべての16進値を置換すべきですか？ いいえ。まず書き出し時に値が変わったかを確かめます。数値が残るなら、置換によってCSS、描画参照、合成、背景、読み込みの問題を隠し、他の場所での正確さを損なう場合があります。

PerfectVectorは書き出し後に色が変わったSVGを修復できますか？ CSS、グラデーション、不透明度、プロファイル、読み込み動作の修復だけが必要な場合には適しません。元のベクターが失われ、適したフラットなラスター画像を編集可能な図形として作り直す場合に適します。

参考資料

1. W3C — SVG 2スタイル — SVGのCSS、class・style属性、プレゼンテーション属性、カスケード、継承を定義します。
2. MDN — SVG color属性 — currentColorが塗り、ストローク、グラデーションのカラーストップなどへ値を供給する方法を説明します。
3. W3C — SVG 2ペイントサーバー — 線形・放射状グラデーション、描画参照、座標系、変換、色補間を定義します。
4. W3C — CSS Color Module Level 4 — sRGBの構文と、Display P3を含む広い定義済み色空間を定義します。
5. W3C — Compositing and Blending Level 1 — SVGとCSSの不透明度グループ、合成順序、背面、描画モードを定義します。

残った最良の元データがPNGやJPGなら、PerfectVectorでSVGとして作り直し、古いファイルを置き換える前に単独のブラウザーと最終出力先で比較します。