SVGcodeで画像をトレース：出力した図形を確認
ファイルをデザインで使用する前に、SVGcode 内のフラット カラー イメージをトレースし、実際の SVG をコピーして、パレット、内部開口部、背景、キャンバスを確認してください。
目次
SVGcode イメージ トレースの場合は、ラスター アートワークをロードし、カラー SVG またはモノクロ SVG を選択し、トレースを調整してから、エクスポートされた SVG 自体を検査します。受け入れる前に、色、内部の穴、キャンバスを確認してください。フラットカラー テストでは、SVGcode は実際のパスを生成し、フレームの開口部を維持しましたが、エクスポートされた両方のバリアントは元のパレットを変更し、別のキャンバスを使用しました。
すでに持っている画像に対して別のブラウザ ワークフローが必要な場合は、PerfectVector で無料でプレビューしてください。結果を編集またはエクスポートする前に、結果のロックを解除する必要があります。以下の同じ形状と色のチェックを使用します。このチュートリアルでは、2 つのツールの出力品質を比較しません。
SVGcodeがトレースするものと準備するもの
SVGcode は、ラスター イメージを SVG ベクター グラフィックスに変換します。その作者は、色ごとにトレースする Potrace ベースの WebAssembly 実装について説明しています。 公式ソース リポジトリにはその実装が文書化されています。これでアプローチは説明できましたが、エクスポートされたファイルは自分のアートワークの証拠となります。
PNG またはその他のサポートされているラスター画像のコピー、SVGcode にアクセスできるブラウザ、およびアートワークを処理する権限を用意してください。以下のクリップボード ルートの場合、ブラウザで画像クリップボードへのアクセスを許可する必要があります。コピーした SVG マークアップを保存するためのプレーン テキスト エディターと、完了チェック用の SVG ビューアーまたはエディターを用意しておきます。
明確な色の領域を持つフラット マークは、最初の入力として役立ちます。設定を変更する前に、保持する必要がある色と開口部を記録します。写真や柔らかいグラデーションの場合、どの詳細を簡略化できるかを決定します。トレースでは、ピクセルから意図したすべての境界を推測することはできません。 画像ベクトル化ガイドでは、ラスターからパスへの決定について詳しく説明しています。
1. 画像をロードし、トレースモードを選択します
SVGcode を開いて画像を読み込みます。テストしたルートでは、実際の画像をクリップボードに配置し、画像の貼り付けを選択します。何かを調整する前に、透明な領域や内部の細部を含む意図した画像がプレビューに表示されていることを確認してください。
個別の色付き領域が重要な場合は、Color SVG (Color SVG (カラー SVG)) を選択します。単色のシルエットが意図した結果である場合は、Monochrome SVG (Monochrome SVG (モノクロ SVG)) を使用します。このチュートリアルでは全体を通してカラー SVG を使用しました。個別のモノクロテストは報告されていません。
元のラスターはプレビューの横で開いたままにしておきます。拡大したときにエッジが滑らかに見えるかどうかだけでトレースを判断しないでください。滑らかな外側のエッジよりも、空の中心、小さなギャップ、または意図的に別々の色が重要になる場合があります。
2. 目に見える詳細を念頭に置いて設定を変更する
アートワークの外側にある不要な点や、消えてしまう小さな開口部など、指摘できる欠陥を 1 つから始めます。 1 つのコントロールを変更し、プレビューが更新されるまで待ってから、その詳細を再度比較します。
斑点の抑制 は小さな領域を削除します。値を上げると、点在する点が改善される可能性がありますが、保持するつもりだった細かい部分を確認してください。 入力画像をポスタライズすると、トレースする前に色の変化が軽減されます。ポスタリゼーションでは、色をより少ないレベルにグループ化します。著者のSVGcode チュートリアルでは、コントロールとチャネルごとのポスタリゼーションの両方について説明しています。
現在のアプリでは、ストローク幅とエキスパート設定も公開されています。ベースラインのエクスポートが完了するまで、必要のないコントロールはそのままにしておきます。大量の変更が同時に行われると、どれが結果を変更したかを判断するのが難しくなります。
当社独自のフラットカラーテストでわかったこと
透明な背景、開口部のあるネイビーの長方形フレーム、金色の長方形、および重なり合う青緑色の長方形を持つ 512 × 512 PNG を作成しました。その元の画像を公開 SVGcode アプリに貼り付け、Color SVG、斑点抑制 2、ストローク幅 0 を使用して、2 つの実際の SVG 出力をコピーしました。
最初は、赤、緑、青をそれぞれ 7 ステップで、アルファを 1 ステップで使用した入力画像のポスタライズを使用しました。 2 つ目は、入力画像のポスタライズをオフにして同じ画像を使用しました。 RGB およびアルファ コントロールは、その 2 番目の状態では無効になりました。
| チェック | オリジナルPNG | ポスタリゼーションオン | ポスタリゼーションをオフにする |
|---|---|---|---|
| ベタ領域の色 | #152b46、#e6aa3c、#3e948d | ブラック、#d4aa00、ティール | #002a2a、#d4aa2a、#2a8080 |
| フレーム開口部 | 透明 | レンダリングされたSVGで開く | レンダリングされたSVGで開く |
| キャンバス | 512 × 512 ピクセル | viewBox="0 0 1024 1024" | viewBox="0 0 1024 1024" |
| SVG構造 | ラスター入力 | 3 つのパス、埋め込み画像なし | 3 つのパス、埋め込み画像なし |
ポスタリゼーションをオフにしても、この画像の正確な元の色は復元されません。どちらの SVG も、アートワークを別のキャンバス内に配置しました。これらは 1 つの制御された画像からの観察であり、すべてのファイルのベンチマークや予測ではありません。これらは、カラーまたはレイアウトのマスターとして使用する前に、実際のエクスポートを確認する十分な理由になります。
3. SVG をコピーし、実際のマークアップを保存します。
プレビューの準備ができたら、[Copy SVG (Copy SVG (SVG をコピー))] を選択します。クリップボードを読み取るか貼り付ける前に、Optimizing SVG (Optimizing SVG (SVG の最適化))が完了するまで待ってください。私たちの実行では、即時に読み取られたクリップボードは空でした。最適化後にそれを読み取ると、SVG マークアップが返されました。
マークアップをプレーンテキスト エディタに貼り付け、.svg 拡張子 (artwork-trace.svg など) を付けて保存します。スクリーンショットやリッチテキスト ドキュメントではなく、<svg> 要素と閉じている </svg> 要素が含まれていることを確認します。後のエクスポートで参照が置き換えられないように、各設定バリアントに個別のファイル名を付けてください。
これは、完了したコピーされたマークアップ ルートです。 SVGcode では「SVG の保存」も表示されますが、このチュートリアルでは、ネイティブのファイル保存ダイアログの動作や別のアプリへのインポートの成功を証明するものではありません。
4. 保存したファイルの色、開口部、キャンバスを検査します。
保存した SVG をビューアまたはエディタで、未加工のソースの横に開きます。これらを個別に確認してください。
- パレット: 重要な塗りつぶしを意図した色の値と比較します。トレースでは、3 つの色すべてを変更しながら 3 つの領域を保持できます。正確な色が必要な場合は、エディターで意図した塗りつぶしを復元して確認します。
- オープニング: アートワークの後ろに対照的な背景を配置します。新しい背景は、意図した穴と外側の空間を通して表示されるはずです。白くペイントされた形状は、白地に開口部のように見えることがあります。 透明な SVG 背景ガイドには、この 2 つを区別する方法が示されています。
- キャンバス: ドキュメントの境界とアートワークの境界を検査します。 viewBox は SVG の内部座標の四角形を定義します。物理的な寸法を保証するものではありません。ファイルを使用するアプリの余白とサイズを確認してください。
- ジオメトリ: 重要な領域を個別に選択し、小さな色変更や移動を試してから、元に戻します。パスを含むファイルでも、目的のジョブの編集可能性をチェックする必要があります。
SVG では、1 つの複合パス内に複数の輪郭を持つ開口部を表現できます。 SVG パス標準では、サブパスとホールについて説明します。表示される境界ごとに個別のパス要素を作成する必要はありません。逆に、パス数が少ないだけでは、意図した詳細がすべて残っていることは証明されません。
私たちの完了チェックはデジタルで行われました。コピーされたマークアップを検査し、実際の SVG をレンダリングしました。どちらのバージョンでも、開口部と外部空間は透明でした。宛先エディタのインポート、印刷、または切り取りの結果はテストされませんでした。より広範なハンドオフ レビューを行うには、ベクトル トレース品質スコアカードを使用します。
最初に失敗したチェックから回復する
| あなたが見るもの | 次にチェックすべきこと |
|---|---|
| ストレイドットが残る | スペックルの抑制を慎重に増やしてから、意図的な小さな部分を再確認します。 |
| 小さな特徴が消えてしまう | 無関係なコントロールを試す前に、ソースとより低いスペックル設定を比較してください。 |
| 色が異なります | エクスポートされた塗りつぶしをパレットと比較します。ポスタリゼーションを無効にしても正確な値が復元されるとは想定しないでください。 |
| 穴が埋まったように見える | 対照的な背景でテストし、内側の輪郭が存在するかどうかを検査します。 |
| アートワークには予想外の余白がある | キャンバスとアートワークの境界を比較します。宛先アプリで必要なドキュメント サイズを設定します。 |
| SVGをコピーしても何も使えません | 最適化を待ち、保存する前にもう一度コピーして、貼り付けたテキストを検査します。 |
| 画像の貼り付けは使用できません | クリップボードのアクセス許可と、ブラウザーに表示されるアプリのその他の画像読み込みオプションを確認してください。 |
穴が間違ったままである場合、SVG 穴のトラブルシューティング ガイドでは、欠落しているトレース ジオメトリを塗りつぶしルールの解釈から切り離します。直接クリーンアップ ツールを使用したデスクトップ トレース ワークフローについては、Inkscape Trace Bitmap を参照してください。
元の画像と受け入れられた SVG を一緒に保管してください。次の人が必要とするパレットの修正やキャンバスの調整を書き留めます。既存のアートワークを別のブラウザ ツールで試してみたい場合は、PerfectVector を無料で始めて、プレビューのシルエットと開口部を確認してください。
よくある質問
SVGcode は PNG を実際の SVG パスにトレースできますか?
はい。当社のオリジナルのフラットカラー PNG は、3 つのパスを含み、画像が埋め込まれていないコピーされた SVG マークアップを生成しました。自分のエクスポートしたファイルを検査します。その結果は、すべての画像で同じ構造または忠実性を保証するものではありません。
ポスタリゼーションをオフにすると、元の色は保持されますか?
私たちの対照テストではそうではありませんでした。どちらの設定も、元の単色の値を変更します。エクスポートされた塗りつぶしを目的のパレットと比較し、正確な色が重要な場合は修正します。
SVG キャンバスが PNG サイズと異なるのはなぜですか?
テストでコピーされた SVG は、512 × 512 入力からの 1024 × 1024 viewBox を使用しました。ソースピクセル寸法が保持されると仮定するのではなく、エクスポートされたキャンバス、アートワーク境界、および意図された表示サイズを個別に検査します。
開口部が透明であることはどうやって確認できますか?
保存した SVG の背後に対照的な背景を配置します。開口部から見えるはずです。そうでない場合は、トレースが内側の輪郭を失っているか、またはそこにペイントされた形状が作成されているかどうかを検査します。
情報源
- SVGcode アプリ — 画像トレース インターフェイスと現在のコントロール。
- SVGcode 作成者の web.dev のチュートリアル — 色ごとのトレース、スペックル抑制、ポスタリゼーション。
- 公式 SVGcode リポジトリ — プロジェクトの実装とソース ドキュメント。
- W3C SVG パス — 複合パス、サブパス、および開口部。
