本物のベクターパス、そして精度は数値で返されます
この用語で検索すると、多くのツールは実際には何もベクター化していません。あなたのPNGをbase64でエンコードし、SVGの殻の中にimgタグで包んで返すだけです。拡張子は変わっても、ピクセルはそのまま。拡大すると元のPNGと同じようにぼやけ、Illustratorで開いても編集できるものは何もありません。10秒で確認できます:ファイルをテキストエディタで開いてください。base64の塊が見えたら、それはただのリネームです。
このツールが本当に生成するもの
シェイプです。トレーサーが画像のエッジを検出し、色ごとにグループ化した本物のSVGパス要素として書き出します。だから結果はどこまでも拡大でき、IllustratorやFigma、Inkscapeであらゆるカーブを編集できます。267×87ピクセルの2色ロゴでは、出力に8つのパス要素が含まれ、ファイル内にbase64は一切なく、2つの元の色も正確な16進値で保存されました。SVGのサイズも267×87なので、元のPNGの代わりとしてそのままページに配置できます。
精度は主張ではなく、計測されます
すべての結果には忠実度スコアが付きますが、それは推定値ではありません。完成したSVGを再びピクセルにレンダリングし、元画像とピクセル単位で比較、その割合が表示されます。2色ロゴは99.5点。検証用のフラットな画像はすべて99点以上、3つはちょうど100.0点を記録しました。実際の制作ロゴ(透明な白と赤のワードマーク)は、3色レイヤーと19パスで9.5KB、99.7点でトレースされました。
トレースしたロゴがよく見た目が悪くなる理由と、その対策
アンチエイリアスが原因で、多くのトレーサーは文字の周りに点々のハローを生み出します。エッジ沿いの柔らかな色はデザインの色ではなく、ぼかしです。これを色として扱うと、ぼかしまで忠実にトレースしてしまいます。ここでは色を画像の元解像度で検出するため、そうした色合いはエッジのぼかしとして認識され、シェイプ化されずに除去されます。もう一つの典型的な欠陥は、隣接する色の間にできる極細の隙間で、アートワークに細い線として現れます。色レイヤーは重なって構築されるため、そうした隙間は生じません。
透明部分と、よく台無しにするアウトラインについて
不透明度が半分未満のピクセルは背景として扱われ、すべてのトレース形状から除外されるため、元のPNGが透明だった部分はSVGでもそのまま透明になります。より難しい問題はフリンジです。多くのトレーサーが透明ロゴの周囲に1ピクセル幅の背景色リングを残します。白背景では見えませんが、暗いページに置くと目立ちます。ここではプリント技術のトラッピングを用いて除去します。各色レイヤーは透明部分に接するストリップのみ1ピクセルだけ拡大され、アートワーク内部のエッジは動かさずにフリンジを覆います。
小さくて少しぼやけているのが普通です
ベクター版を求める多くの人は、きれいなマスターファイルを持っていません。数年前に誰かが書き出した小さなPNGしかないのが一般的です。その入力こそ、このエンジンが最適化されているケースです。小さなアンチエイリアス画像はトレース前に拡大されるため、トレーサーはエッジの本当の位置を把握し、カーブはデザイナーが描いた形状に沿います。267ピクセルのロゴは1024ピクセル幅でトレースされ、その旨が結果に表示されます。正直な限界として、トレースはピクセルが証言する範囲しか復元できません。30ピクセルのファビコンでは、カーブの情報はほとんど残っておらず、失われたディテールを創造することはできません。
写真も可能ですが、ツールが適さないと伝えます
写真には再発見すべき形がありません。連続階調なので、トレースするとポスタライズされた近似画像になります。アートスタイルとしては面白いですが、コピーとしては不適切です。計測によりごまかしは効きません。連続階調のテスト画像は95.4%、フラットロゴは99.5%。ロゴは2色レイヤーと8パス、写真は16レイヤーと9,899パスが必要でした。結果には画像が連続階調であること、PNGが忠実なフォーマットであることも明記されます。意図的にポスタライズしたい場合は、色数を自分で設定してください。
色数、または純粋な白黒
デフォルトではパレットが自動検出されるため、2色ロゴなら2つのクリーンなレイヤーだけで、アンチエイリアスの色合いが色として混ざることはありません。複雑なアートワークも最大16色まで保持されます。色数は2~32まで自由に設定可能。少なめならクリーンでスタイリッシュ、多めなら色再現性が向上します。スキャンした署名やスタンプ、線画には、画像のヒストグラムから自動でしきい値を決める白黒モードもあり、1~254の値を手動で指定することもできます。結果は透明な背景にシャープな黒一色の描画です。
ファイルの扱いについて
複数画像も同じ設定でトレースされ、元のファイル名のまま1つのZIPで返されます。ファイルは暗号化通信で送信され、結果が用意されてから1時間後にサーバーから削除されます。
得られるもの
- 色ごとにグループ化された本物のSVGパス要素、どんなベクターソフトでも編集可能
- 高品質の主張ではなく、すべてのファイルに計測された忠実度パーセンテージ
- アンチエイリアスはハローとしてトレースされず、除去される
- 透明部分は保持され、1ピクセルの背景フリンジもトラッピングで除去
- 自動パレット検出、自由に設定できる色数、線画用の白黒モード
- アカウント不要、透かしなし、ファイルは1時間後にサーバーから削除
次にできること
逆方向、つまりベクターをアップロードフォームやメール用にピクセル画像へ戻したい場合は、SVGからPNGへの変換でお好きなサイズにレンダリングできます。トレースしたファイルを納品前に、SVG圧縮でエディタの不要データを削除し、元のラスター画像も保存したい場合はPNG圧縮をご利用ください。