画像トレースの仕組みとは?
画像トレース(ベクター化・自動トレースとも呼ばれます)とは、変換ツールがピクセルベースの画像をベクターパスの集合に変換するために行う処理のことです。ここでは、その裏側で実際に何が起きているのかを解説します。
ピクセルからパスへ ― 全体像
トレースアルゴリズムは、ラスター画像を似た色の領域ごとに1つずつ見ていき、その領域と隣接する領域との境界を割り出したうえで、その境界を個々のピクセルによる階段状の輪郭ではなく、滑らかな数学的曲線として表現します。これをすべての色領域について繰り返すことで、元の画像を完全にベクター化したバージョンが得られます。
ステップ1: 色の検出と減色(量子化)
多くの元画像には、個別のベクター図形として扱うには多すぎる色が含まれています ― 写真だけでも、圧縮ノイズやグラデーションによって数百万通りものピクセル値が存在することがあります。量子化(クオンタイズ)は、似た色を小さく固定されたパレットにまとめる処理で(色数の設定でいくつの色にまとめるかを調整できます)、これによりトレースが始まる前に画像がクリーンではっきりした領域へと単純化されます。
ステップ2: エッジ検出
すべてのピクセルにパレット上の色が割り当てられると、アルゴリズムは画像をスキャンして、ある色領域がどこで終わり、次の色領域がどこから始まるかを見つけ出します。この境界はまずピクセル単位でトレースされ、元のラスターグリッドの階段状のエッジに沿った、ギザギザした輪郭線が生成されます。
ステップ3: パスの構築と曲線フィッティング
そのギザギザしたピクセルの輪郭は、一定の誤差しきい値の範囲内で近似する少数の直線と二次曲線へと滑らかに変換されます ― これがトレースツールにおける「ディテール」や「スムージング」の設定です。しきい値を低くすると元のピクセルのエッジにより忠実になり(ノード数・ディテールが増加)、高くするとより少なく滑らかな曲線になります。
白黒モード vs フルカラーモードのトレース
白黒モードは、トレース前に画像全体を2色(前景色と背景色)だけに減色し、1本のクリーンなパスを生成します ― ロゴや線画、ビニールカットやレーザーカット用のカットファイルに最適です。フルカラーモードは複数のパレットカラーを保持し、それぞれを個別のレイヤーとしてトレースします。これは写真や複数色のイラストに向いています。
トレースが得意なもの・苦手なもの
以下のような画像は特にきれいにトレースできます。
- 単色のロゴ、アイコン、バッジ ― 色数が少なく、エッジがくっきりしているもの
- 線画やスケッチ ― インクと背景のコントラストがはっきりしているもの
- 色領域がはっきりと分かれたシンプルなイラスト
以下のような画像はトレースが難しくなります。
- 柔らかいグラデーションや細かいテクスチャ(髪、草、布地など)が多い写真
- 前景と背景の見分けがつきにくい、コントラストが非常に低い画像
- 強く圧縮されたJPEGをPNGとして再保存したもの ― 色のノイズが発生し、量子化処理での補正が必要になります
よくある質問
トレースを行うと、画像とピクセル単位で完全に同じ結果が得られますか?
いいえ ― トレースは限られた色数と滑らかな曲線で画像を近似するため、非常に細かいディテールは単純化されます。ロゴや線画ではこの影響はほとんど気になりませんが、写真の場合はよりスタイリッシュな、ポスター風の仕上がりになります。
ディテールの設定を低くすると、トレース後のSVGがブロック状に見えるのはなぜですか?
ディテール/スムージングの設定を低くすると、パスが元のピクセルのエッジに忠実になるため、曲線部分がギザギザに見えることがあります。スムージングを上げると、アルゴリズムがより少なく長い曲線を使うようになり、仕上がりがきれいになります。
これはAdobeのImage Traceと同じ技術ですか?
色を量子化し、エッジを検出し、曲線をフィッティングするという基本的な考え方は、Adobe IllustratorのImage Traceをはじめとする他の自動トレースソフトウェアと同じ一般的なアプローチです。
関連ガイド
そもそもトレースが必要になる理由である、フォーマットそのものの違いについて解説します。
ここまでの内容を、実際のロゴを使ってステップごとに実践します。
刺繍データ化ソフトウェアにとって、きれいなベクタートレースがなぜ重要なのかを解説します。