ビットマップロゴのベクトル化: PNG/JPGからSVGへの変換の原理と適用範囲

VTracerの色レイヤー別モードによるベクトル化では、最初のステップとして入力されたビットマップのピクセルを色ごとにクラスタリングし、同じ色相と明度のピクセルを同一の色レイヤーにグループ化します。

クラスタリング完了後、各Color Layerの輪郭を二次ベジェパスでフィッティングします。異なる色レイヤーは元の重ね順で編集可能なSVGファイルとして出力され、元のロゴのレイヤー構造が保持されます。

ベクトルトレースの出力品質は、入力画像のコンテンツタイプと強く相関します。エッジが明確で、色ブロックの数が限られており、連続したグラデーションがない画像は、安定的に少数の色レイヤーにクラスタリングでき、滑らかなSVGパスと制御可能なノード数が得られます。このような画像には、ソフトウェアのロゴ、アプリケーションアイコン、シルエットグラフィック、白黒テキストなどが含まれます。

写真やグラデーションのイラストはベクトル化に不適切です。連続した階調の領域が強制的に数十の色レイヤーに分割されるため、生成されるSVGは元のビットマップよりもサイズが大きくなり、視覚的にカラーバンディングアーティファクトが発生します。この種類のコンテンツはビットマップ形式のまま保持し、サイズ変更の際はベクトルトレースの代わりにリサイズまたは圧縮ツールを使用してください。

スキャンやスクリーンショットから取得したビットマップロゴには、孤立した小さなノイズピクセルのパッチが存在することがよくあります。これらのパッチは、ベクトル化後に余分な微小パスを生成する原因となります。

filterSpeckleパラメーターは、ピクセル面積の閾値によってノイズをフィルタリングします。値が大きいほど、フィルタリングされる小さなパッチの面積閾値が大きくなり、出力SVG内の冗長なパスが減少し、ファイルサイズが小さくなります。

ビットマップの直接拡大は補間アルゴリズムに依存しており、既存のピクセルから計算によって新しいピクセルを生成します。倍率が3倍を超えると、エッジがぼやけたりジャギーが発生したりして、印刷出力の要件を満たせません。

ベクトル化によって得られたSVGはベジェパスの座標を保存しています。何倍に拡大しても、パスのエッジは常に滑らかさを保ちます。パスの記述は印刷機器で直接解析でき、出力精度は印刷の要件を満たします。

Figmaデスクトップ版2023以上では、出力したSVGファイルをキャンバスにドラッグアンドドロップし、右クリックで「グループ解除」を選択するだけで、異なる色レイヤーに分割でき、各パスの色と形状を個別に変更できます。

Adobe Illustrator CS6以上のバージョンでは、出力されたSVGファイルを直接開きます。レイヤーパネルで分割された色レイヤーを確認でき、対応するパスを選択してストロークまたは塗りつぶしのプロパティを調整できます。