画像をSVGに変換

形の絵と、形そのものの違い

PNGやJPGはピクセルのグリッドです。ネイティブのサイズを超えて拡大すると、グリッドが見えてきます——縁が階段状になり、鮮明なロゴがぼやけ、ブラウザにできることは何もありません。ディテールがそもそもそこになかったからです。SVGはまったく別のものを保存します——実際の幾何です。円は円として、曲線はパスとして、塗りは色として記述されます。形がピクセルではなく数学なので、どんなサイズでも鮮明に描き直されます。だからこそ、名刺にも、看板にも、ファビコンにも載せるつもりのロゴは、本当はSVGでありたいのです——一つのファイルで、あらゆる拡大率で、ぼやけなしに。

このツールはラスター画像をその種のベクターファイルに変換し、そのすべてをブラウザ内で行います。PNGかJPGを選ぶと、imagetracer エンジンで形をトレースし、SVGが返ってきます。画像はあなた自身のマシンのキャンバスから読まれます——何もアップロードされず、アカウントもなく、ページが読み込まれればネットワークを切っても動き続けます。ドロップした絵はマシンを一切離れません。

本当に得意なこと

トレースが輝くのは、入力が平らできれいな縁のときです——ロゴ、アイコン、シンプルなイラスト、線画、手描きのレタリング。これらは少数の単色と明確な境界を持ち、それはまさにトレーサーがよく読むものです。各色の領域を見つけ、その周りにパスを描き、結果は一握りの形からなる整ったSVGです——小さなファイル、鮮明な縁、あとで編集しやすい。

プリセットはトレーサーが画像をどう読むかを操ります。Flat / logo は色数を低く形を単純に保ち、二色か三色のマークに最適です。Detailed はより多くの色とより細かいパスを許し、より多くのニュアンスを運ぶイラストに向きます。Posterized は画像を大胆な平らな帯に畳み込み、グラフィックなポスターの見た目にします。Black & white はすべてを二階調に落とし、線画、スタンプ、シルエットに理想的です。色数が少ないほど、より小さくきれいなファイルになります——色数が多いほど繊細さを捉えますが、パスと重さを加えます。同じ画像に二つのプリセットを試して比べる価値があります——ビフォー/アフターのプレビューが元とトレースを並べて見せるので、ダウンロードする前に判断できます。

写真についての正直な注意点

写真もトレースはできますが、ほぼ間違いなくそうしたくはありません。写真には少しずつ違う何千もの色があり、硬い縁がありません——トレーサーはそのすべてを、積み重なり重なり合う平らな色の塊で近似しなければなりません。出てくるSVGは巨大で(しばしば元のJPGよりはるかに大きい)、写真的というよりにじんでポスター化して見え、編集するのは惨めです。連続階調の何か——人物、風景、商品写真——には、ラスター形式が正しい答えで、それには圧縮ツールや変換ツールがあります。SVGは形のためのもので、写真のためではありません。このツールは写真をトレースするのを止めはしませんが、プレビューが問題を明白にします。

もう一つはっきりさせる価値のあること——これは本物のトレースです。与えたピクセルを読み、それに沿うベクターパスを描きます。あなたのロゴを何か新しいものに描き直したり「きれいに」したりするAIではありません。元がぼやけていたり、低解像度だったり、ノイズが多かったりすると、トレースはそれを受け継ぎます——きれいで鮮明な少数色の入力はきれいな結果を、雑なものは雑なパスを与えます。

トレースした後に色を変え編集する

出力が名前付きのパスと塗りからなる普通のSVGなので、トレースが生み出した色に縛られません。ファイルをベクターエディタ——Illustrator、Inkscape、Figma、あるいはテキストエディタでさえ——で開けば、一つの塗りを変えて領域まるごとの色を変え、パスをずらし、トレーサーが拾った迷子の形を削除し、色を正確なブランドのHEXに設定できます。それがロゴをベクター形式にする本当の利点です——固定された絵であることをやめ、どんなサイズでもぼやけない、あなたが所有する編集可能なオブジェクトになります。