Vectorpeaのビットマップトレース：設定とSVG出力
Vectorpea のネイティブの Vectorize Bitmap ボタンを使用し、トレース設定を記録し、SVG をエクスポートし、使用する前に実際のパス、色、開口部を検査します。
目次
Vectorpea にはネイティブのVectorize Bitmap (Vectorize Bitmap (ベクトル化ビットマップ)) トレースがあります。ラスター イメージを選択し、ツールバーに表示される [ビットマップのベクトル化] ボタンを使用して設定を確認し、確認して SVG としてエクスポートします。私たちのオリジナルの 3 色 PNG では、意図した塗りつぶしとオープン フレームの中心を持つ 3 つの実際の SVG パスが生成されました。保存されたファイルは、滑らかなキャンバスのプレビューよりも重要です。
すでに持っている画像に対して別のオンライン ルートが必要な場合は、PerfectVector を無料で始めて、プレビューのシルエット、カラー領域、開口部を調べてください。結果を編集またはエクスポートする前に、結果のロックを解除する必要があります。このウォークスルーは Vectorpea のネイティブ ルートを完了するものであり、ツールの出力品質を比較するものではありません。
現在の Vectorpea アプリを使用して、ビットマップを選択します
Vectorpeaを開き、元のラスター画像を別途コピーして保管します。ブラウザへのアクセス、画像を処理する権限、保存ファイルを確認するSVGビューアまたはプレーンテキストエディタが必要です。以下のクリップボードから読み込む手順では、画像のクリップボードアクセスも必要になります。
検索結果をたどるときはアプリ名を確認してください。 Photopea Vectorize Bitmap ガイドでは、Photopea の [画像] メニューについて説明しています。それは別のアプリのワークフローです。 Vectorpea 問題 72 などの以前の議論は歴史的背景を提供し、現在の Vectorpea コントロールと実際のエクスポートはこのウォークスルーが完了した内容を確立します。
今回の実行では、新しいドキュメントを作成し、Edit → Paste (Edit → Paste (編集 → 貼り付け)) で元の PNG を貼り付けました。ラスターは、image.ai という名前のドキュメントに表示されます。キャンバス上のラスター イメージを選択します。 [Vectorize Bitmap (Vectorize Bitmap (ビットマップのベクトル化))] ボタンがメイン メニューの下のツールバーに表示されます。テストされたセッションでは、不透明度コントロールの直前でした。
ボタンが表示されない場合は、まず何が選択されているかを確認してください。 ドキュメント、パスのグループ、および実際のビットマップは異なる入力です。ビットマップ固有のコマンドを探す前に、トレースするラスターを選択してください。既存の SVG の場合、SVG オブジェクト タイプ ガイドは、パス、グループ、埋め込み画像を区別するのに役立ちます。
トレース設定を変更する前にベースラインを記録する
Vectorize Bitmap (Vectorize Bitmap (ビットマップのベクトル化)) をクリックして、ネイティブ ダイアログを開きます。テストされたダイアログでは、カラー、漫画 / 写真、ノイズの削減、色の結合が表示され、OK が続きました。キャプチャされたアプリ セッションでは韓国語のインターフェイス ラベルが使用されていました。ここでの名前は、英語での対応する名前です。
独自のフラットカラーの対照用画像には、次の設定を使用しました。
| コントロール | テスト済みの状態 | トレースを受け入れる前に検査する詳細 |
|---|---|---|
| 色 | 20 | 区別すべき色の領域が分かれているか |
| モード | 漫画 | シルエットや角が作品に合っているかどうか |
| 騒音を軽減する | オフ | 小さな跡が意図的な細部なのか、それとも漂流した破片なのか |
| 色の結合 | の上 | 個別の色が必要な領域を引き続き区別できるかどうか |
これをユニバーサル プリセットではなく、記録されたベースラインとして扱います。すべての組み合わせを比較したり、別の写真モード実験を実行したりはしませんでした。独自の画像の設定を変更する場合は、一度に 1 つずつ変更し、小さな開口部や隣接する 2 つの色などの特定の詳細を比較します。
トレースを適用する場合は、[OK] をクリックします。このドキュメントでは、レイヤー パネルの Background の下に Path 0、Path 1、Path 2 が表示されています。これらのエントリは、トレースを見ていることを最初に確認するのに役立ちますが、エクスポートされた SVG はまだ検査する必要があります。
トレースをSVGとしてエクスポート
トレースしたアートワークが存在する状態で、File → Export As → SVG (File → Export As → SVG (ファイル → 名前を付けてエクスポート → SVG)) を選択し、エクスポート フローでSave (Save (保存))します。元の PNG を別に保存し、SVG に個別のファイル名を付けて、後で 2 つを比較できるようにします。
この実行では SVG エクスポートが完了し、実際のファイルが保持されました。 .ai で終わるドキュメント タブでは、エクスポートされる形式が決まりませんでした。選択した SVG エクスポートが実行されました。このウォークスルーは、ネイティブ ファイルの再オープンや、その後の手動編集パスを証明するものではありません。
保存した SVG をビューアで開き、そのテキストまたはオブジェクトの構造を調べます。パス、埋め込み画像、重要な塗りつぶし値、およびドキュメントの境界を探します。画像ベースまたは混合コンテンツの場合、SVG ラスター コンテンツ検査ガイドで、画像要素が参照しているものを確認する方法が説明されています。
元のコントロールが実際に生成したもの
透明な背景にネイビーのフレームと空の中心、金色の三角形と青緑色の四角形を備えた非機密の 320 × 240 PNG を作成しました。その元のラスターを Vectorpea に貼り付け、記録されたネイティブ設定を適用して、結果の SVG を保存しました。次に、実際のマークアップを検査し、保存されたファイルを個別にレンダリングしました。
| チェック | この対照実験で保存した結果 |
|---|---|
| パス要素 | 3 つの名前は、Path 0、Path 1、および Path 2 です。 |
| 埋め込み画像要素 | なし |
| 塗りつぶし値 | #17324d、#e7b64c、#298d83、元の 3 つのソリッド領域と一致します |
| フレーム開口部と外部スペース | レンダリングされた SVG で透明 |
| キャンバス | viewBox="0 0 320 240" |
| ファイルサイズ | 660バイト |
カラー値は 20 でしたが、このエクスポートには 3 つのパス要素が含まれていました。この設定値は、すべての結果から読み取れるオブジェクト数ではありません。より一般的には、パス数だけでは、正しい詳細が残っているかどうかはわかりません。
フレーム パスは fill-rule="evenodd" を使用しました。 塗りつぶしルールは、パスのどの部分が内側としてカウントされるかを決定します。 SVG 塗りつぶしルール仕様では、囲まれたサブパスがどのように開口部を離れることができるかについて説明しています。白く見える中心が透明であると仮定するのではなく、対照的な背景の上で保存されたレンダリングを確認してください。
これらは、1つの単純な幾何学図形の画像を1組の設定で処理した結果です。この対照実験で塗りの色が完全に一致しても、すべてのロゴ、スキャン、写真で正確な色が保持されることの証明にはなりません。使用先のエディタへの読み込み、ネイティブ形式の文書の開き直し、手動の色変更、実物の出力はテストしていません。
トレース終了を呼び出す前に自分のファイルを確認してください
保存した SVG の横にある未加工のラスターを使用して、次の 4 つのことを検査します。
- シルエットとギャップ: 必要なサイズの外側の輪郭、コーナー、カウンター、狭い間隔を比較します。
- カラー領域: 重要な塗りつぶしを目的のパレットと比較します。近くに見える領域でも、意図的な色補正が必要な場合があります。
- 空のスペース: SVG の後ろに対照的な背景を配置します。必要な開口部と外側の領域から見えるようにする必要があります。
- オブジェクトとキャンバス: パス構造とドキュメント境界を検査します。さらに編集する必要がある場合は、コピーに対して意図した編集を試し、保存された結果を確認してください。
| 問題 | 次のチェック |
|---|---|
| ベクトル化ビットマップが表示されない | 既存のパスまたはグループではなくラスター イメージを選択します |
| 細かい特徴が消えてしまう | ソースをベースラインおよび変更した単一の設定と比較します |
| 色または領域が一致しない | カラーと確認されたマージ設定を再確認し、新しいエクスポートを検査します。 |
| 文字や枠の中心が塗りつぶされて見える | 対照的な背景をチェックし、内側の輪郭/塗りつぶしルールを検査します。 |
| エクスポートされたファイルにはまだ画像が含まれています | 実際に何がエクスポートされたのか、ネイティブ トレースが適用されたかどうかを特定する |
より完全なハンドオフを実現するには、ベクトル トレース品質スコアカードを使用します。ラスター内の重要な輪郭があいまいな場合は、設定を繰り返し変更するよりも手動で再描画する方が役立つ場合があります。同じソースで別のルートを試したい場合は、PerfectVector を無料で試して、プレビューのシルエット、カラー領域、開口部をオリジナルと比較して確認してください。
よくある質問
Vectorpea にはネイティブの Vectorize Bitmap 機能がありますか?
はい。テスト済みの現在のアプリでは、貼り付けたラスターを選択すると、[ビットマップのベクトル化] ツールバー ボタンが表示されます。そのダイアログを適用すると、表示されるパス エントリが作成され、実際の SVG エクスポートには画像が埋め込まれていないパスが含まれていました。
Vectorpea の Photopea の画像メニューの指示に従う必要がありますか?
現在の Vectorpea コントロールを使用します。 Vectorpea の実行では、ラスター選択後に表示されるツールバー ボタンを使用しました。 Photopea の文書化された画像メニューは、別のアプリのワークフローに属します。
カラー 20 は、SVG に 20 のパスがあることを意味しますか?
いいえ。テスト リファレンスではカラー 20 を使用し、3 つのパスをエクスポートしました。設定値を保証パス数として扱うのではなく、実際のオブジェクトと対象領域を検査してください。
テストでは元の色とフレームの開口部が維持されましたか?
はい、このオリジナルの 3 色のコントロールです。 SVG には 3 つの正確なソリッド塗りつぶしの値が含まれており、レンダリングされたフレームの開口部と外側の空間は透明でした。これは、すべての画像で同じ結果が保証されるわけではありません。
情報源
- Vectorpea アプリ — ネイティブ トレース コントロールと完成した SVG エクスポート ワークフロー。
- Photopea Vectorize Bitmap ドキュメント — 検索結果に表示される個別の Photopea メニュー ワークフローを特定します。
- Vectorpea 問題 72 — 現在のアプリの証拠とは異なる、過去の機能リクエストのコンテキスト。
- W3C SVG 塗りつぶしルール — 囲まれたサブパスと偶数の塗りつぶしルール。
