VTracerでPNGをSVGに：色と細部の残り方を確認
テスト済みの VTracer CLI を使用して PNG を変換し、パレットとスペックルの設定を比較し、実際に保存された SVG にどの色と小さな領域が残っているかを検査します。
目次
VTracer PNG から SVG へのワークフローの場合、減色したり小さな領域をフィルタリングしたりする前に、ベースライン トレースを保存します。次に、一度に 1 つのコントロールを変更し、保存された各 SVG を検査します。私たちのオリジナルのフラットカラーテストでは、色の制限により重要な領域がマージされますが、より強力なスペックルフィルターにより意図的な小さなマークが消えます。最小のファイルまたは最短のパレットは、意図したアートワークを保持するファイルではありませんでした。
オンラインで 1 つの PNG をトレースする必要がある場合は、PerfectVector を無料で始めて、プレビューのカラー領域と細部をオリジナルと比較して検査してください。結果を編集またはエクスポートする前に、結果のロックを解除する必要があります。以下のコマンドは完全なローカル VTracer ワークフローのままです。ツール間の出力品質の比較は行われませんでした。
コマンドをインストールされている CLI と一致させる
このチュートリアルでは、公式のVTracer 1.0.0-alpha.4 CLI と独自の実行可能ヘルプを使用しました。 公式リリースから、一致するプラットフォーム バイナリを入手します。この例では、作業フォルダー内に、artwork.png という名前の PNG の許可されたコピーの横に、実行可能ファイルの名前が vtracer であることを前提としています。
ターミナルと SVG ビューアまたはプレーンテキスト エディタも必要です。変更されていない PNG を保存し、別の出力ファイル名を使用します。トレースする前に実際のバイナリを確認してください。
./vtracer --version
./vtracer --helpバージョン コマンドは vtracer 1.0.0-alpha.4 を返しました。ヘルプに以下のフラグが記載されていない場合は、インストールされているインターフェイスのドキュメントを使用してください。 Python パッケージ は別のインターフェイスです。 Python キーワード引数と CLI フラグには互換性がありません。
公式プロジェクト ドキュメントでは、カラー トレース、パレット コントロール、および CLI について説明しています。この記事では、ブラウザーのデモや Python バインディングのテストをレポートするのではなく、そのローカル実行可能ファイルを使用します。
1. 意図的に小さなマークを残すベースラインを保存します。
後で比較できる簡単なトレースから始めます。
./vtracer artwork.png baseline.svg \
--mode polygon --color-precision 8 --filter-speckle 0制御された画像には直線エッジの領域が含まれているため、ポリゴン フィッティングを使用しました。これは平面アートワークのベースラインであり、すべての写真や曲線イラストに共通の設定ではありません。
3 つの名前付きオプションは、さまざまな質問に答えます。
| オプション | 何を制御するのか | 何を検査するか |
|---|---|---|
--mode polygon | 選択したカーブ フィッティング モード | 結果の輪郭がソースに適合するかどうか |
--color-precision 8 | RGB チャネルあたりの有効ビット数 | 意図した色が識別可能であるかどうか |
--filter-speckle 0 | スモールパッチフィルタリング設定 | 必要な小さなマークがベースラインを超えるかどうか |
PNG の横にある baseline.svg を開きます。設定を変更する前に、ブランドカラー、孤立した小さなアクセント、薄い部分、または 2 つの形状を隔てる隙間など、いくつかの重要な領域を特定します。滑らかな大きなシルエットは、これらの損失を隠すことができます。
2. カラーリミットと固定パレットを比較する
テスト済みの CLI は、色の上限として --max-colors を提供し、指定された 16 進カラーとして --palette を提供します。 パレット は、アートワークで使用する色のセットです。トレーサーに減色を依頼する前に、どの色を異なるままにしておく必要があるかを決定します。
このバリアントでは、ベースライン オプションを一定に保ち、3 色の制限を追加します。
./vtracer artwork.png fewer-colors.svg \
--mode polygon --color-precision 8 --filter-speckle 0 \
--max-colors 3上限は、正確にその数の可視色を保証するものではありません。実際の出力には、白を含む 2 つの固有の塗りつぶし値しかありませんでした。ネイビーとティールの領域は同じ落ち着いた色になり、ゴールドの領域は白地と区別できなくなりました。
目的のパレットがすでにある場合は、代わりに提供された色をテストします。
./vtracer artwork.png fixed-palette.svg \
--mode polygon --color-precision 8 --filter-speckle 0 \
--palette '#ffffff,#17324d,#298d83,#d49c32'私たちのソースゴールドは #e7b64c でした。この提供されたパレットでは、代わりに #d49c32 が使用されていました。保存された SVG では、リストされているネイビー、ティール、ホワイトを保持しながら、その新しいゴールドが使用されました。これは意図的に色を変更する選択であり、元のパレットを保存するものではありませんでした。意味を失わずにどの色を結合できるかについてより広範な決定を行うには、SVG パレット削減ガイドを使用してください。
3. 別のコピーで小領域フィルタリングをテストする
ベースライン オプションに戻り、スペックル フィルターのみを変更します。
./vtracer artwork.png filtered.svg \
--mode polygon --color-precision 8 --filter-speckle 8スペックルとは小さく孤立した領域のことで、不要なノイズの場合も、意図した図柄の場合もあります。大きさだけで区別することはできません。今回のテスト画像では、孤立した2 × 2と8 × 8の紺色のマークは両方とも基準出力で見えていましたが、フィルターを強めた出力では両方とも消えました。
フラグの値は、同じ数値幅のマークが存続することを保証するものではなく、ファイル上で検証するための設定として扱います。保存した出力を意図したサイズで比較し、保持する特定のマークを拡大します。必要な詳細が消えた場合は、フィルターを下げて元の PNG から再度トレースします。
カラーも再チェック。フィルタリングされた SVG では、白とともに #fefefe が導入されました。この観察は、1 つの設定がフラグで指定されたプロパティのみに影響を与えると想定するのではなく、詳細を変更した後に実際の出力パレットを検査する理由になります。
実際に保存された 4 つのファイルからわかること
私たちは、白い背景、白い中心を持つネイビーのフレーム、ティールの三角形、金色の長方形、および 2 つの独立したネイビーの正方形マークを備えたオリジナルの 384 × 256 PNG を作成しました。 4 つの変換はすべて同じ入力とポリゴン モードを使用しました。この表は、宛先エディターや物理テストではなく、実際の SVG マークアップと独立したレンダリングを報告します。
| 出力 | 背景を含む独自のソリッド塗りつぶし | 2 × 2および8 × 8の小さなマーク | 主な所見 |
|---|---|---|---|
baseline.svg | 4 | どちらも見える | このテストリファレンスでは元の単色が保持されています |
fewer-colors.svg | 二 | 両方がマージされたカラーで表示されます | ネイビー/ティールを統合。金色の領域は白と読み取られます |
filtered.svg | 五 | どちらも見えない | 小さなマークが失われてしまいました。ほぼ白の塗りつぶしが導入されました |
fixed-palette.svg | 4 | どちらも見える | ゴールドが提供された #d49c32 に変更されました |
4 つの SVG にはすべてパスが含まれていましたが、画像要素は含まれていませんでした。これらの事実は、これらのファイル内で実際のトレースを確立しますが、輪郭をグレーディングしたり、別のアプリで編集が成功したことを証明したりするものではありません。この実験では白いフレームの中心と背景は不透明です。これは PNG の透明性テストではありません。
この器具の元の色と意図的なマークについては、ベースラインを維持します。固定パレットのバリアントは、ゴールドを意図的に変更するという別の作業に適しています。減色ファイルとフィルタリングされたファイルは、特定の保存要件を満たしません。これらの選択はいずれも、普遍的な最適なプリセットや別のトレーサーとの比較を確立するものではありません。
説明できるファイルを選択してください
SVG を保存する前に、その入力、実行可能バージョン、完全なコマンド、および選択の理由を記録してください。役割、必要な最小領域、ギャップ、輪郭ごとにパレットを確認します。次に、実際の宛先で開き、ジョブに必要な編集またはインポートを試します。後のステップはこのテストの一部ではありませんでした。
| チェックに失敗しました | 次のアクション |
|---|---|
| 重要な色が溶け合う | 色の制限を上げるか削除するか、目的のパレットを指定します |
| 小さなアクセントが消えます | 低フィルターのベースラインと比較し、より低いスペックル設定で再トレースします |
| 白または白に近い塗りつぶしが予期せず表示される | 削除する前に、実際に保存された塗りつぶしとその表示領域を検査します。 |
| コマンドがフラグを拒否する | そのバイナリのバージョン/ヘルプを読み、その CLI ドキュメントと一致します。 |
| トレースには依然として重要な輪郭が欠けています | ソースを再確認するか、そのフィーチャを意図的に再描画します |
トレース品質スコアカードは、このパレット/詳細実験に加えて、輪郭、編集可能性、目的地のチェックを追加します。明示的なモノクロ ワークフローについては、Potrace PNG から SVG へのガイドで別のトレース タスクが説明されています。
オリジナルと承認された SVG を一緒に保管してください。同じ PNG をオンラインで試してみたい場合は、PerfectVector を無料で始めて、プレビューの意図した色と必要な最小の詳細をソースと比較して確認してください。
よくある質問
VTracer はカラー PNG を実際の SVG パスに変換できますか?
はい。テストした CLI ワークフローの 4 つのファイルにはすべてパスが含まれており、イメージ要素は含まれていませんでした。有用な結果は、選択した設定後にどの色と小さな領域が残るかによって決まります。
max-colors 3 は正確に 3 色を保証しますか?
いいえ、上限を設定します。私たちのテストリファレンスでは、白を含む 2 つの独自の塗りつぶしが生成され、重要な色の区別が失われました。要求された番号だけではなく、実際に保存されたパレットを検査します。
フィルタリングすると小さなマークが消えたのはなぜですか?
スペックル設定により、小さな領域が破棄される場合があります。テストリファレンスの両方の意図的な四角マークはフィルタースペックル 8 で消えました。低フィルターのベースラインと比較し、アートワークにこれらの領域が必要な場合は設定を下げます。
これらのフラグを Python VTracer サンプルに貼り付けることはできますか?
インストールしたインターフェイスとバージョンを使用します。このガイドでは、1.0.0-alpha.4 実行可能ファイルとその CLI ヘルプをテストしました。 Python バインディングの例では、独自の関数の引数とドキュメントを使用します。
情報源
- 公式 VTracer プロジェクト — カラー トレース、CLI の使用法、パレット/詳細オプション。
- VTracer 1.0.0-alpha.4 リリース — このワークフローに使用されるバージョン固定実行可能ファイル。
- VTracer Python パッケージ — テストされた CLI とは区別される、別個の Python バインディング インターフェイス。
