どちらも.svgで終わる2つのファイル
「変換済み」の2つのSVGをテキストエディターで開いてみます。1つ目には<image>要素が1つだけあり、そのhrefは長いdata:image/png;base64,…の文字列です。2つ目には、d="M12 4 L…"という座標データとそれぞれのfillの色を持つ<path>要素が並んでいます。どちらもブラウザで開け、元のサイズではどちらも正しく見えます。ベクターなのは2つ目だけです。
ラッパー（包んだだけのファイル）は、文字どおりの意味です。元のビットマップがSVGの入れ物に入っているだけ。拡大するとブラウザはピクセルを引き伸ばすので、PNGと同じように輪郭がぼやけます。図形がなく、ピクセルの四角形が1つあるだけなので、カッティングマシンやベクター編集ソフトでは中の図形を選択できません。
トレースしたSVGは、絵を形状として表します。色の領域はそれぞれ、直線とベジェ曲線でできた閉じた輪郭になり、描画するときはどんなサイズでもその輪郭を塗りつぶすので、10mmでも10mでも輪郭はくっきりしたままです。
png2svg.artが出力するもの
トレースでは、画像のピクセルを少数の平坦な色にまとめ、色の領域ごとに直線とベジェ曲線で輪郭を描きます。2つの色が接するところでは1本の境界を共有するので、色の間にすき間はできません。結果は図形ごとの<path>で、それぞれの色で塗られ、オブジェクトごとにグループ化され、何が何を囲んでいるかで入れ子になります（レイヤーを色ごとにすると、1色につき1つの<path>）。「O」の内側のような穴は、SVGのどちらの塗りのルールでも開いたままです。<image>要素、埋め込みビットマップ、スクリプトは含まれません。すべての結果は保存前にチェックされ、含められるのはパス、グループ、タイトルだけです。
形状が本物なので、プレビューには実際のパスの数と使われた色のパレットが表示されます。ロゴが6色・6個のパスで返ってきたなら、ファイルの中身は文字どおりそのとおりです。
作例のロゴタイプの1つの「Fe」を、同じだけ拡大したもの。256pxのPNGはピクセルの格子が見えます（左）。フルサイズの画像からトレースしたSVGは、同じ輪郭を曲線で描くので、どのサイズでもくっきりしています（右）。
SVGを自分で確かめる方法
- ファイルをテキストエディターで開きます。
<path、<polygon、<circleの要素があれば形状です。<imageがあればラッパーです。 - ブラウザで開いて800%に拡大します。ベクターの輪郭はくっきりしたまま、ラッパーはぼやけるかブロック状になります。
- Inkscapeなどのベクター編集ソフトに読み込みます。トレースしたものなら図形を1つずつクリックでき、ラッパーは1枚の画像として選択されます。
- ファイルサイズを比べます。PNGを包んだファイルは少なくともPNGと同じ大きさです（base64で約3分の1増えます）。トレースしたロゴは、たいてい数キロバイトです。
トレースでできないこと
トレースは平坦な領域を作り直すものです。もともとピクセルになかった細部は取り戻せません。幅64ピクセルのアイコンは、どんな設定でトレースしても、そのピクセルから曲線を推測した、幅64ピクセルのデザインのままです。写真やなめらかなグラデーションは平坦な色の帯になります（写真がポスターのようになる理由のガイドを参照）。文字は編集できるテキストではなく、アウトラインになります。これらはこの手法の性質で、設定でオフにできるものではありません。どんな画像がきれいにベクター化でき、どんな画像が向いていないかは、画像をベクター化のページで説明しています。
プレビューが大切な理由
png2svg.artでは、ロックを解除する前に、トレース結果の透かし入りプレビューを表示します。透かしなしのSVGは、ロック解除後にはじめてダウンロード用に作られます。プレビューはダウンロードするのと同じパスから描かれるので、小さな文字がつぶれたり細い線が途切れたりしていれば、クレジットを使う前にわかります。透かしなしのSVGのロック解除は1クレジットで、確認済みのアカウントにはすべて無料3クレジットが付きます。