SVG減色ツールの使い方

色数の多いSVGをクリーンで管理しやすいパレットに整理。ほぼ同じ色を統合し、色を置き換え、ファイルサイズを削減します。

よい結果を出すための短いガイドと、よくある質問への答えです。

使い方

1
パレットの解析から始める
自動トレースや書き出しで生成されたSVGには、ほとんど見分けのつかない塗りが何十色も入っているのが普通です。解析を見れば、そのファイルが実際にいくつの色を持っているかがわかります。ほぼ必ず、デザインが使っている色数より多いはずです。
2
まずほぼ同じ色をまとめる
値がわずかしか違わない色は、たいてい本来ひとつだった色が、アンチエイリアスや平坦化されたグラデーションによって分かれたものです。まとめれば、見た目を変えずに色数を大きく減らせます。
3
制作条件の色数まで減らす
シルクスクリーンは版ごとに費用がかかり、カッティングシートは1色につき1枚必要で、刺繍は糸の色数に上限があります。きりのいい数ではなく、その条件が求める正確な数まで減らしてください。
4
書き出す前に分割ビューで確かめる
分割表示なら、同じアートワークで元の状態と減色後を並べて見られます。グラデーションと柔らかいエッジに注目してください。減色の影響がいちばん先に出る場所です。

デザインツールや自動トレースから書き出したベクターファイルには、ほとんど同じ色が何十色も含まれていることがよくあります。SVG減色ツールはファイルのパレットを解析し、似た色をグループ化して、統合や置き換えを行えます。ノイズだらけの60色のSVGが、すっきりした6色のアセットに変わります。

色数を減らせば、ファイルは小さくなり、テーマ変更が容易になり、プロッターやカッティングマシン向けのカットパスもきれいになります。ツールはすべてブラウザ内で動作するため、機密性の高いアートワークもお使いのマシンから出ることはありません。

SVGに含まれるすべての色を、類似度でグループ化して一覧表示します。

ほぼ同じ色をまとめたり、ファイル全体で任意の色を置き換えたりできます。

色数を減らすことでSVGがシンプルになり、ファイルサイズも縮小します。

シェイプやパスは完璧に鮮明なまま。変わるのは色だけです。

なぜSVGの色数を減らすのですか?

自動トレースや書き出しで生成されたSVGには、ほぼ同一の色が何十色も含まれ、ファイルを肥大化させ、編集やテーマ変更、プロッター出力を難しくします。減色すれば、クリーンで管理しやすいパレットが手に入ります。

減色するとアートワークが崩れますか?

いいえ。パスやシェイプには手を加えず、塗りと線の色だけを統合・置き換えします。

SVGはどこかにアップロードされますか?

いいえ。ファイルはブラウザ内でローカルに処理されます。