実践的な制作手順
SVGロゴのダークモード対応：currentColorを実際に試す
カフェのロゴが明るい請求書では見えるのに、暗いWebヘッダーでは消えてしまうことがあります。最初に確認するのはSVGの挿入方法です。インラインのコードと外部画像では、ページの色を受け取る仕組みが異なります。
Ciyoのファイル作業機能で架空のCedar Cupマークを作り、開けるHTMLデモを保管しました。カップの単一パスは変更していません。特定の色編集とブラウザの動作を試した例で、ブランドの再設計やサイト全体の監査ではありません。
変更していないSVG原本を残す
編集前にviewBox、パスデータ、固定の塗りを記録します。複数の固定色、線、埋め込みスタイルがあれば個別の判断が必要です。1つの属性を置き換えても、テーマシステム全体が完成するわけではありません。
原本はviewBox 0 0 120 100で、1本のパスを#303036で塗っています。Ciyoは原本コードの横にプレビューを描画しました。見た目の確認にはプレビュー、正確な編集にはSVGソースを使います。
形を保って色指定だけ変える
単色のこのマークでは、fill="#303036"だけをfill="currentColor"に変えました。独立したファイル比較でパスとviewBoxの一致を確認しています。原本は266バイト、編集後は271バイトです。この保管ファイルの容量を示しています。
currentColorは要素のcolor値を使います。インラインSVGなら周囲のページからCSSで値を与えられます。未指定の既定値に任せず、明暗それぞれの色を意図して決めます。
このSVGのviewBoxと全パスを変更しないでください。固定の塗り1つをcurrentColorに置き換えた別ファイルを保存します。明暗パネルに固定色とcurrentColorのマークを配置し、外部imgの対照も含む実際のHTMLを作ります。HTMLを描画して確認し、計算された塗りを報告してください。編集可能なSVGとHTMLファイルを返します。実際のHTMLで両方の背景を試す
保管したページには、固定塗りとcurrentColorを対照的な2つのパネルに配置しています。明るい側では両方が#303036、暗い側ではcurrentColorが#FAF6EDとなり、固定の原本はチャコール色のままです。暗い背景で問題を見分けられます。
実際に保存したHTMLをChromeで開き、インラインSVGの塗りを確認しました。そのブラウザでのコードとスタイルを検証した結果です。全ブランド色のコントラストや、すべての公開ツールとの互換性を保証しません。
| パネル | 固定マーク | currentColorマーク |
|---|---|---|
| 明るい背景 | #303036 | #303036 |
| 暗い背景 | #303036 | #FAF6ED |
外部画像を対照として残す
imgで読み込むSVGは別の画像文書です。親のcolor宣言は内部パスの色を変える指示にはなりません。この境界を外部画像の対照で示しています。外部ファイルでテーマ対応するなら明示的な色違いを出力するか、適切なインライン実装を選びます。
最初のHTMLにはデータURI内の引用符の誤りがありました。Ciyoは最終確認の前にエンコードを修正しています。もっともらしいコードだけで済ませず、実際に表示する必要がある例です。
組み込み前に保存したページを確認する
下のデモを開いて両背景を確認し、実際のヘッダーで予定のロゴ寸法を試します。色指定が正しくても細部が見づらい場合があります。操作できるマークなら、フォーカス、リンク名、アクセシブルなテキストは別に確認します。
HTMLは単体で開け、ソースにはスクリプトがありません。CSSとインラインコードは開発者が確認する例で、公開サイトを自動更新するものではありません。
色の規則もファイルと一緒に渡す
未変更の原本、編集済みSVG、確認したHTMLをまとめて渡します。検証した挿入方法と各背景で意図した色を明記します。正しいファイルを、色の継承ができない場所に置く誤りを避けられます。
多色ブランドでは固定する領域を先に合意します。制御しやすい単色マークから試し、意図した色同士の関係を保ちましょう。すべての塗りを機械的にcurrentColorへ変えないでください。
よくある質問
currentColorで外部imgの色も変わりますか？
親ページの色は別のSVG画像文書に自動では伝わりません。挿入方法を試し、必要なら明示的な色違いを使います。
ロゴを描き直しましたか？
いいえ。塗りの値1つだけを変更しました。パスデータとviewBoxは原本と同じです。
ダークモードの色だけでアクセシビリティは十分ですか？
いいえ。最終画面でコントラスト、サイズ、名前、リンク動作を確認してください。
1つのマークを2つの背景で試す
承認済みSVGをCiyoに持ち込み、ブラウザデモを保管してから編集ファイルをWeb開発者へ渡しましょう。