PNGではなくSVGで色を変えるのはなぜ？

PNGでは、色はアンチエイリアスのかかった輪郭も含めて何千ものピクセルに散らばっているため、色を変えるには塗り直すしかありません。塗りつぶしたパスでできたSVGなら、色は各図形が持つ値の1つです。値を変えても、輪郭はすべて元の位置のまま。ブランドの2つ目のカラーパレット、ダークモード版、1色刷り用のバージョンをSVGから作るべきなのはそのためです。

3つのステップ：レイヤー、スポイト、ペンキ缶

一部分だけ色を変えるには

SVGエディターでファイルを開きます。トレースした画像は、各オブジェクトがそれぞれのレイヤーとして開き、その中の図形は「何が何を囲んでいるか」で入れ子になっています（顔の中の目など）。

  1. レイヤータブでは、各行に色が小さな色見本で表示されます。1色の図形なら1つ、グループなら複数が横に並びます。
  2. 色見本をクリックします。横にカラーピッカーが開き、決まった色、図で使われている色、HEX入力欄、スポイトが表示されます。
  3. 色にポインターを合わせると、キャンバス上でプレビューできます。クリックすると、その行に含まれるすべての塗り（レイヤー全体、グループ、または1つの図形）に、1回の操作として適用されます。Escで元の色に戻ります。

複数の色がある行は、1色にまとめることも、そのうち1色だけを変えることもできます。キャンバス上で選ぶ場合は、クリックでオブジェクト全体を選択し、ダブルクリックで中に入ります。キャンバスの上のバーには現在の位置（「描画 › オブジェクト2 › 図形」）が表示され、そこを1回クリックすると外に戻れます。

1つの色をすべて変えるには

色タブを使います。図のパレットが一覧表示されます。色見本をクリックすると、その色を使っているすべての図形が選択されるので、どこで使われているかがわかります。すべてを次の色に変更を使うと、図全体でその色を1回の操作で置き換えられます。

Studyのフクロウのロゴを4つ並べたもの：元のインディゴとアンバー、ネイビーとコーラル、グリーンとライム、黒とグレー

作例のロゴの1つを、2つの色をそれぞれ一括で変えて色変更したもの。図形や輪郭はどれも変わっておらず、違うのは2つの塗りの値だけです。

同じタブには、選択範囲の塗りと線（キャンバスから色を取るスポイト付き）と、長方形なら角の設定もあります。位置、サイズ、重ね順、整列、グリッドはその他の中にあります。

1色のバージョンを作るには

色ごとに順番に「すべてを次の色に変更」を使い、すべて同じインクの色にします。または、すべてを選択して選択範囲の塗りを使います。そのあと、色の違いのおかげで見えていた図形を探しましょう。暗い顔の上の白い目は、両方を黒にすると消えてしまいます。そうした図形は削除するか、紙の色など2色目のまま残して、図として読み取れるようにしてください。

結果の確認方法

  • コントラスト。 文字や小さな細部には、下にあるものとの十分なコントラストが必要です。WCAGでは、通常の文字に少なくとも4.5:1を求めています。
  • 小さいサイズ。 エディターから32pxと64pxのPNGを書き出し、拡大せずにそのサイズで見てください。
  • 暗い背景。 白い背景向けに作ったロゴは、暗いページでは、いちばん暗い色を明るくしたバージョンが必要になることがよくあります。

保存と書き出し

保存すると、SVGの新しいバージョンがアカウントに残り、以前のバージョンも引き続き使えます。PNGで書き出すでは、16〜4,096pxの範囲で選んだ幅で図をPNGにします。保存していない変更は下書きとしてブラウザに残り、次に同じファイルを開いたときに復元を提案します。エディターにはアカウントが必要です。エディター内のファイルは、編集したバージョンも含め、アカウントの保存期間のあいだ保管されます。保存期間は各ファイルに表示されます。