PotraceでPNGをSVGに：透過を処理して穴を残す
アルファチャンネルを準備した後、Potrace で PNG を変換します。テスト済みの PGM ワークフローに従い、しきい値を比較し、SVG の背景と内部の穴を確認します。
目次
Potrace を使用して PNG を SVG に変換するには、まずグレースケール ビットマップを準備し、それを potrace --svg でトレースします。透明なピクセル上の暗いアートワークの場合は、ビットマップを保存する前に画像を白いマットの上に合成します。 SVG を受け入れる前に、しきい値のある形状とその内部開口部を検査します。
標準 Potrace 1.16 は、PNG ではなく、PBM、PGM、PPM、および BMP を直接読み取ります。その公式マニュアルには、中間階調が黒または白になるモノクロ トレース操作が記載されています。以下のワークフローでは、PNG の連続アルファ値を保持するのではなく、空の領域を含むソリッド ジオメトリを作成します。
すでに持っている画像に対してブラウザーのワークフローを使用したい場合は、PerfectVector が画像からパスへの変換と無料のプレビューを提供します。 独自の画像から自由に開始し、そのシルエット、小さな開口部、色をソースと比較します。 Unlock the result before editing or export.ローカルの Potrace レシピは、明示的な前処理や反復可能なコマンド設定が必要な場合に引き続き役立ちます。
トレースする前に必要なもの
インストールされた Potrace 実行可能ファイル、Pillow を含む Python 3、および元の PNG を使用します。このレシピはPotrace 1.16 および Pillow 11.3.0 で実行されました。入力のコピーを保存し、別のフォルダーで作業することで、各しきい値バリアントに個別のファイル名が付けられます。
最初のケースは、明るい背景または透明な背景に暗いロゴ、アイコン、または描画がある場合です。被写体が明るいところと暗いところがある場合は、このレシピを適用する前に、画像を反転するか、その他の方法で準備する方法を決定してください。インタラクティブ エディターのワークフローについては、「Inkscape トレース ビットマップ」を参照してください。
マット は、トレースする前に透明ピクセルを解決するために使用される単色の背景です。 しきい値は、準備された画像を前景と背景に分ける明るさのカットオフです。これらの選択は、輪郭が SVG ジオメトリになる前に行われます。
1. ビットマップを保存する前に透明度を解決します。
PNG stores color and opacity separately.アルファ チャネルは、各ピクセルの不透明度を記述します。この表現については、PNG 仕様 で説明されています。完全に透明なピクセルでも RGB 値を保持できます。アルファ チャネルをドロップしても、画像ビューアで見たような白い背景にピクセルが合成されることはありません。
暗いマークの場合は、画像を意図的に白の上に配置します。この Python スニペットは、artwork.png を開き、それを同じサイズの白い画像に合成し、その結果をグレースケールに変換して、artwork.pgm を保存します。
from PIL import Image
src = Image.open("artwork.png").convert("RGBA")
matte = Image.new("RGBA", src.size, "white")
gray = Image.alpha_composite(matte, src).convert("L")
gray.save("artwork.pgm")Pillow のalpha_composite ドキュメントでは、2 番目の画像が最初の画像の上に合成されると定義されています。ここの両方の画像の寸法と RGBA モードは一致しています。
Open the prepared PGM before tracing.外側の背景は白、意図した前景は暗く、重要な隙間は見えるようにする必要があります。この段階での黒い四角形は前処理の問題です。後から SVG 塗りつぶしルールを変更しても、トレーサーに到達しなかった開口部を回復することはできません。
2. 用意したPGMをトレースする
artwork.pgm を含むフォルダーでこれを実行します。
potrace artwork.pgm --svg --blacklevel 0.5 --turdsize 2 --output artwork.svg--blacklevel 0.5 はグレースケールのカットオフを選択します。 --turdsize 2 は、Potrace のデフォルトの小スペックル抑制を明示的に保ちます。設定を変更する場合は、参照を繰り返し上書きするのではなく、新しい出力名を使用してファイルを比較します。
一度に 1 つのコントロールを変更します。
| コントロール | 何を見直すべきか |
|---|---|
--blacklevel | かすかなマークが前景になり、狭い開口部が空のままになるかどうか |
--turdsize | 小さな孤立した形状がノイズなのか、それとも意図的な細部なのか |
--alphamax | コーナー処理; despite its name, this is not an opacity control |
黒レベルのしきい値を高くすると、前景に明るい灰色のピクセルをより多く含めることができます。これにより、薄い線が強調されたり、薄い開口部が閉じたりすることがあります。用意されたビットマップと結果の輪郭を合わせて判断します。スムージングでは、しきい値がいっぱいになった後にカウンターを再構築することはできません。
2 つの元のテスト画像が示したこと
検証用に256 × 256のPNGを2つ作り、上記の前処理とPotraceのコマンドを実行しました。一方は黒いリングで、その内側と外側が透明です。もう一方は不透明な暗いマークで、内部に細い灰色の穴（カウンター）がありました。生成されたSVGをレンダラーで確認し、中央と外側の透明度を調べました。
| 入力と準備 | 観察されたSVG結果 |
|---|---|
| 透明なリング、グレースケール変換前にアルファが破棄される | 塗りつぶされた黒いキャンバス。外側と意図した開口部が前景になりました |
| 同じリングをグレースケール変換前に白に合成 | The outside and center were empty;リングは満たされたままだった |
| 狭いグレーのカウンター、白コンポジット、ブラックレベル 0.5 | カウンターは開いたままでした |
| 同じ準備されたカウンター画像、黒レベル 0.8 | カウンターが埋まりました |
リング コントロールの非表示ピクセルには黒の RGB 値が含まれていました。アルファを無視すると、これらの値がしきい値に達してしまいます。白複合バージョンでは、最初に白に解決されました。 This explains that sample's black box;すべての PNG が同じように失敗するというわけではありません。
カウンタ テストでは、入力およびその他の設定を一定に保ちました。閾値のみが変更されました。その結果は、暗く見えるトレースが自動的に優れたトレースであるとは限らない理由を示しています。最も重いシルエットの設定を選択するのではなく、必要な機能を調べてください。
これらは 2 つのオリジナルの器具のデジタル チェックであり、SVG 出力にはラスター イメージが埋め込まれていませんでした。 Potrace の品質を PerfectVector と比較したり、ファイルをカッターにインポートしたり、物理的な結果をテストしたりしませんでした。
3. 保存したSVGの穴と背景を確認する
SVG を対照的な背景の上に配置します。その背景は、外側のエリアと意図されたすべての開口部の両方を通して見えるはずです。白いペイントは白いページの穴に似ているため、サムネイルだけでは不十分です。
SVG の複合パスは、1 つのオブジェクト内の外側の輪郭と内側の開口部を記述することができます。トレースされたジオメトリに開口部がすでに存在しない場合は、PGM としきい値に戻ります。 1 つのレンダラーに存在するがインポート後に入力される場合は、代わりに受信側アプリのパス解釈を調査してください。 SVG ホールのトラブルシューティング ガイドでは、これらのケースを分けています。
保存されたファイルを確認してください:
- 意図したシルエットと小さな隙間。
- マークの外側とカウンター内の実際の空きスペース。
- 物体になるべきではない漂遊斑点。
- 宛先ワークフローにおける適切なドキュメント サイズ。
- PNG の埋め込みコピーではなく、パスを使用します。
背景だけが間違っているように見える場合は、白いオブジェクトをすべて削除する前に透明 SVG 背景診断を使用してください。小さなフィーチャが本当にソースにない場合は、より大きなオリジナルを使用するか、その詳細を再描画します。 ソース品質ガイドでは、その境界について説明されています。
このモノクロのワークフローが適している場合
Potrace は、塗りつぶされたシルエットと意図的な開口部として表現できるマークに適合します。ソフト シェーディングまたは部分的な不透明度がアートワークの一部であり、保持する必要がある場合は、ラスターを保持します。いくつかの意味のある色については、色対応のベクトル化ワークフローを使用するか、意図的に個別のパスを準備します。この 1 つのモノクロ コマンドではカラー パレットは作成されません。
ベクトル エディタを使用して重要な輪郭を再描画することもできます。自動トレースにより形状の候補が提供され、用途に応じてそれを保持するか編集するかが決まります。
よくある質問
Potrace は PNG を直接開くことができますか? 標準 Potrace 1.16 は、PBM、PGM、PPM、および BMP 入力を受け入れます。最初に別の画像ツールを使用して PNG をデコードし、透明度の処理を明示的に設定し、トレースする前にサポートされているビットマップを保存します。
Potrace は PNG の透明度を保持しますか? モノクロ ワークフローでは、塗りつぶされたジオメトリと空の領域が作成されます。 PNG の連続アルファ値は保存されません。しきい値処理の前に透明なピクセルを意図的なマット上に合成し、対照的な背景の上で SVG の空の領域を確認します。
アルファマックスは PNG アルファ設定ですか? いいえ。Potrace の alphamax は、トレースされた曲線のコーナー処理を制御します。トレース前に PNG の不透明度チャネルがどのように合成されるかは決まりません。
穴が消えたのはなぜですか? 準備されたビットマップと選択したしきい値に開口部がまだ表示されているかどうかを確認します。しきい値がそれを満たした場合は、プレパレーションまたはカットオフを変更して再トレースします。 SVG に開口部が含まれているが、受信アプリのみがそれを埋める場合は、そこでの複合パスと塗りつぶしルールの処理を確認してください。
情報源
- Potrace — マニュアル — サポートされている入力形式、モノクロしきい値処理、SVG 出力、および名前付きコマンド オプション。
- Pillow — 画像モジュール — RGBA画像の合成と準備スニペットで使用される順序。
- W3C — PNG 仕様 — PNG 画像のカラー サンプルとアルファ表現。
- W3C — SVG パス — 開口部を記述することができる複合パスと内部輪郭。
PerfectVector で独自の画像を自由に使用して開始し、次の編集ステップを選択する前に、そのシルエットと内部の開口部をソースと比較して確認します。
