画像を壊さずSVGの色数を減らす方法
任意の数でなく、見た目の役割でSVGの配色を減らします。コントラスト、抜きの部分、切断レイヤー、加工色を保って似た色を統合する方法を解説します。
目次
安全に色数を減らすには、画像内の役割ごとに色を分け、その中で似たものを統合します。明部と影、前景と背景、切断とスコア加工など、意味の違う色は分けて残します。
よくある失敗は「4色」などの目標を選び、分類ツールにすべて任せることです。初期案には有用でも、最後は見た目と製作の確認が必要です。似た青2色は統合できても、似た灰色2色が目と顔を分ける唯一の対比かもしれません。
安全な配色削減
- 未変更のコピーを残します。
- 塗り、線、グラデーション、不透明度を調べます。
- 16進数の値を変える前に役割で名前を付けます。
- 1役割ずつ似た色を統合します。
- 最終サイズで対比、穴、細部を確認します。
- Cricutや製作用では、加工色とレイヤーの意味が残るか見ます。
色変更と色数削減は別の作業
色変更は値の置き換えです。青いロゴが緑になっても塗りの数が同じなら配色の数は変わりません。
削減は複数の値を少数にまとめます。アンチエイリアス由来で#173f75、#184076、#194177があるなら、1つの青にすると配色と、形状整理後の断片数が減ります。
| 作業 | 前 | 後 |
|---|---|---|
| 色変更 | 3つの青 | 3つの緑 |
| 配色削減 | ほぼ同じ3つの青 | 1つの青 |
| レイヤー削減 | 同じ役割の複数形状・レイヤー | 形状が許せば1製作レイヤー |
一緒にできますが同義ではありません。SVGの色変更は直接の置換を扱い、ここではどの色を1つにできるか判断します。
配色が確定したら、同じアートボードでの色分離で、その判断を戻さず正確な色ごとに位置の合うファイルを出力します。
実際に使う色を調べる
文書の色一覧や塗りで選択できるエディターを使います。Illustratorの同じ塗り・線の選択などです。簡単ならテキストでfillやstrokeも見られます。
16進数以外も数えます。
- 形の単色の塗り。
- 輪郭のストローク。
- グラデーションのカラーストップ。
- 背景上で明るく見せる不透明度。
- 形でなくクラスのスタイル。
- SVGの配色でない埋め込みラスターのピクセル色。
10個の値が10色の見た目とは限りません。同じ色でも不透明度で変わり、2つのカラーストップのグラデーションは多くの中間色を描きます。<image>が数千色を持ち、周囲のSVGは1色の場合もあります。描画仕様は単色、グラデーション、パターン、塗りと線の不透明度などを区別します。
ラスターを包んだものなら、色数削減は新しいトレースの前か途中で行います。ピクセル化SVGの確認でパスがあるか判断できます。
役割で色に名前を付ける
値の変更前に小さな配色表を作ります。
| 役割 | 現在の色 | 分けて残すか |
|---|---|---|
| 主シルエット | 濃紺、近い紺 | 通常は統合 |
| 明部 | 淡い青 | 形を示すなら残す |
| 輪郭 | 黒 | 意図した端なら残す |
| 背景 | 白い長方形 | 透明なら削除 |
| 切断 | 赤 | スコア・彫刻とは分ける |
数値の類似だけで誤判断するのを防げます。色の距離は有用でも文脈が優先です。暗い形の横の小さな明部は、大きい背景領域同士ほど数値差を必要としなくても、見やすさに大きく寄与します。
残す色を選ぶ前に役割に対応させます。背景の色調、主な塗り、輪郭、注目点は近い値でも残す理由が違います。
切断では役割は具体的です。Design SpaceではSVGの別レイヤーが残り、OperationがBasic Cut、Draw、Score、Engraveなどを指定します。レーザーやCNCも色で工程を整理する場合があります。似て見えるだけで加工レイヤーを統合しません。
エディターで似た色を統合する
影響の少ない組み合わせから行います。
- ファイルやアートボードを複製します。
- Select Same Fill（同じ塗りの選択）などで候補色を選びます。
- 一時的に近い色へ置き換えます。
- 通常サイズで細部、交点、抜きの部分を見ます。
- 元と削減コピーを切り替えます。
- 形の階層と製作の意味が残る場合だけ採用します。
- 次の組に進みます。
色が合っても隣接形状が自動で1パスになるわけではありません。1つとして編集・切断するべき場合だけ統合します。アニメーション、配置、編集のため別オブジェクトで同色にもできます。
ノードと断片の品質も重要です。1つの青が数百の細片なら、塗りで選べても編集しにくい場合があります。全部修正するよりきれいなトレースが速いこともあります。
自動分類でできることとできないこと
配色ツールは数値距離で分類することがよくあります。K-meansなどは多くの近い値を指定数の代表色にでき、ノイズのあるラスターからのイラストに有用です。
自動分類は次を知りません。
- 顔、文字、穴、輪郭のどれか。
- 機械の加工を示す色。
- 小さい色がブランドの意味を持つか。
- 背景上の透明度が見た目を作ったか。
- 形が独立した編集を必要とするか。
下書きとして使い、拡大だけでなく最終サイズで比較します。800%では無害でも、ステッカーでは小さな目や穴を消す統合があります。
ラスター化と再トレースが妥当な場合
PNGにして配色を減らし再トレースするのは、破壊的なやり直しです。グループ、名前、シンボル、文字構造、丁寧なパスをピクセルにしてから再構築します。
現在の構造が使えず、よりきれいな原稿がない場合だけです。見た目だけが有用な、細かく分断されたトレースには役立つ場合があります。SVGを参考に残し、透明な大きいラスターを書き出し、意図して色を減らして再トレースし、パスを確認します。
4つの塗りを変えるだけで整理されたSVGをラスター化しません。直接編集なら多くの情報を残せます。
削減したファイルの確認
上書き前に確認します。
- 明暗両方の背景。
- シルエットと抜きの部分。
- 輪郭が塗りに消えていないか。
- 単色とは別にグラデーションと不透明度。
- 最終レイヤーや工程数。
- 実寸の小さい文字とアイコン。
- 別のビューアーで新しく開く。
Cricutではレイヤー付きSVGの工程で色と素材・組み立ての対応を説明します。剥がしにくいファイルのガイドは色だけで解決しない形状を扱います。
PerfectVectorの役割
既存SVGを編集しません。ラスターから色が増えた場合に役立ち、Cricut用SVGの工程で原稿をパスにし、出力前に色領域を確認・調整できます。
別ツールでPNGやJPGから何十もの似た色と断片レイヤーができた場合に使います。最もきれいなラスターから、不要な影や背景の変化を除き、プレビューを比較します。実際に切る素材レイヤーに合わせて統合します。
目的は必ずしも最少色数ではなく、デザインと製作計画を伝えられる最小の配色です。
よくある質問
SVGの色数を減らす方法は？ 塗り、線、グラデーション、不透明度を調べ、見た目や製作の役割で分け、似た色を1組ずつ統合します。塗りで選択し、そのたび未変更のコピーと比べます。
同じ16進数にするとレイヤーも統合されますか？ 必ずではありません。同色でも形状を結合するまで別オブジェクトです。同素材でも編集、アニメーション、配置のため分ける価値があります。
自動で4色にできますか？ 分類ツールで4色案は作れますが、意味や加工を理解しません。細部、対比、穴、グラデーション、レイヤーの意味を確認します。
4色の画像が何十色になる理由は？ 元ラスターにアンチエイリアス、影、圧縮による変化、柔らかい輪郭があり、その差を別領域として扱った可能性が高いと考えられます。原稿を選択的に整理するか、結果の似た色を統合します。
Cricutの前に減らすべきですか？ 意図しない似た色が多いなら通常は減らします。素材やレイヤーごとに意味ある1色を計画し、別に切る部分を残し、読み込み後の数を見ます。少数の意図したレイヤーは、細かな色変化より切断・組み立てが簡単です。
参考資料
- W3C：SVG 2描画 — 塗り、線、グラデーション、パターン、不透明度です。
- Adobe Illustrator：同じ塗りと線の選択 — 見た目で選択する実用工程です。
- Cricut：Design Spaceへの画像アップロード — SVGレイヤーの保持です。
- Cricut：Operationの選択 — レイヤーに指定する機械の加工です。
ラスターから配色の問題が始まったなら、Cricut用に準備してトレースの色を確認します。元を横に置き、画面だけでなく完成素材で各統合を判断します。
