ラスターとベクターは画像を保存する2つの異なる方法で、その違いを知れば、いつ変換すべきかが正確にわかります。ラスター画像——PNG、JPG、WebP——は色付きピクセルの固定された格子です。ベクター画像——SVG——は一連の指示です。このパスを描き、この色で塗り、ここにこの円を置く、と。ベクターはピクセルではなく数式で図形を記述するので、どんなサイズでもくっきり保たれます。一方ラスターは、本来の解像度を超えて押した瞬間にぼやけます。
「ラスターからベクターへ」はトレースを意味します。エンジンがピクセルを読み、その中に隠れた図形を割り出し、その図形をベクターパスとして書き出します。適した状況で行えば本当に役立ちます。間違った状況で行えばぐちゃぐちゃになります。このガイドは両方を扱います。
トレースが得意なもの
トレースは、フラットで縁のきれいな入力を好みます。ロゴ、アイコン、単純なイラスト、線画、手書き文字。これらは色数が限られ、境界が明確なので、トレーサーは色の各領域を見つけ、そのまわりにきちんとしたパスを描けます。結果は、ひと握りの図形からなるコンパクトなSVGです——どんな拡大でもくっきり、ファイルサイズは小さく、あとから編集できます。ファビコンから看板まで通用するロゴが目的なら、トレースがそこへ連れて行きます。
写真が不向きな理由
写真はトレーサーが望むものの正反対です。微妙に変化する何千もの色があり、くっきりした縁がありません——連続階調です。それをベクター化するには、エンジンはあらゆるグラデーションを、積み重なり重なり合うフラットな色の塊で近似せねばなりません。3つのことが一度に破綻します。SVGが巨大になり、しばしば元のJPGの数倍大きくなる。写真的ではなく、にじんでポスター化して見える。そして無意味な図形が何千もでできているので、編集が苦痛。写真には、ラスター形式が単純に正しい答えです——代わりにJPGを圧縮するかWebPに変換しましょう。ベクターは写真ではなくグラフィックのためのものです。
プリセットと色数
トレーサーが使ってよい色の数が、結果に対する最大のてこです。プリセットがそれを設定してくれます。フラット/ロゴは単純なマーク向けに色を少なく保ち、詳細は豊かなイラスト向けにより多く許し、ポスター化は画像を大胆なフラットの帯に潰し、白黒はすべてを線画やシルエット向けに2色に減らします。色が少ないほどきれいで小さなファイルに、多いほど微妙さを捉えつつ、余分なパスと重みを代償にします。同じ画像で2つのプリセットを試し、変換前後のプレビューを比べるのが、正しいバランスを見つける最速の方法です。
すべてローカル、何もアップロードなし
変換全体がimagetracerエンジンでブラウザ内で動きます。画像はあなた自身のマシンのキャンバスから読み取られ、そこでトレースされ、SVGとして戻されます——何もアップロードされず、アカウントもなく、ページが読み込まれればネットワークを切っても動きます。他人のサーバーに送りたくないロゴや社内グラフィックには、持っておく価値があります。
一つ明確にしておきます。「変換」という言葉が誘うので。これは本物のトレースであって、AIによる描き直しではありません。与えられたピクセルに従い、あなたの作品のよりきれいな版を発明したりはしません。くっきりフラットで色数の少ない元はくっきりした結果を、ぼやけたりノイズの多い元はぼやけてノイズの多いパスを生みます。
トレースのあと
出力は名前付きのパスと塗りからなる標準的なSVGなので、任意のベクターエディター——Illustrator、Inkscape、Figma——で作業を続けられます。塗りを1つ編集して領域まるごとを塗り替える、正確なブランドカラーを設定する、はぐれた図形を除く、パスを調整する。それがベクターにする狙いです。画像は固定された絵であることをやめ、あなたが所有し、どんなサイズでもぼやけずに作り変えられるオブジェクトになります。