Boxy SVGで画像をベクター化：トレースとパス読み込みの選び方
Boxy SVGにはVectorizeジェネレーターがあります。トレース、幾何学的な表現、SVG読み込みを選び、絵を使う前に編集可能な領域と穴を確認します。
目次
Boxy SVGはVectorizeジェネレーターで画像をトレースできます。開発者はPixelate、Triangulate、Primitivizeとともに、バージョン3.35.0で画像トレースが追加されたと確認しています。手動トレースしかないという古い助言は、この追加を見落としています。
色を変えたいロゴやイラストにはトレースから始めます。意図した幾何学的な解釈には、ほかのジェネレーターを試します。別のトレースツールで作った使えるSVGがすでにあるなら、再トレースせずBoxy SVGに入れて編集します。
選択は後で必要になる図形によって決まります。多数の色付きタイルで描いたマグカップもベクターの絵ですが、取っ手を分けた1つのカップとして編集するには不便かもしれません。結果を判断する前に、何を選択し、色や形を変える必要があるかを決めます。
作業に使う形状を選ぶ
Vectorizeとほかのジェネレーターは、ラスター情報をベクターの絵に変えるという広い目的を共有しますが、視覚的な目標は異なります。開発者のTriangulateとPrimitivizeの説明は、Primitivizeで三角形や長方形を選べることなど、幾何学的な近似を説明しています。
この違いから開始方法を選びます。
| 目的 | 開始方法 | 採用時の確認 |
|---|---|---|
| 認識できる紋章を編集可能な輪郭として保つ | Vectorize | 重要な輪郭と空白が残るか |
| 幾何学的に解釈し直す | Pixelate、Triangulate、Primitivizeを試す | 表現が意図的で、形状が後の編集に合うか |
| 別の場所で作ったトレースを仕上げる | Boxy SVGでSVGを開く | 見える絵に使えるベクターオブジェクトがあるか |
| 制御した曲線で単純なマークを再構成する | 手動で描く | 望むデザインに沿う構成になっているか |
どの方法も元のデザイナーのオブジェクト構造を自動で作りません。トレースツールが見るのは完成画像です。カップ、取っ手、ハイライトを3つの名前付き要素と考えていることはわかりません。
大きなポスターと小さなメニューアイコンに使う茶店のイラストを想像してください。ポスターには多面体の表現が合うかもしれません。アイコンには一目でわかる取っ手の開口と単純な輪郭が必要かもしれません。どちらもSVGでも、デザイン要件は異なります。
元画像を保ちながら内蔵トレース機能を試す
元画像を保管し、トレース用に別の作業文書を作ります。全セットを処理する前に、マグカップのアイコンなど代表的な画像1つから始めます。
使っているBoxy SVGのジェネレーターからVectorizeを探します。最初のトレースを行い、元画像と分けて生成された絵を確認します。両方が同じ位置なら、結果を横へ移すか元画像を非表示にして確認します。残ったビットマップがベクター結果の欠けた部分を隠す場合があるためです。
使えるトレース設定を1つずつ変え、毎回同じ小さな細部を比較します。マグカップでは取っ手の開口とカップとの接合部を見ます。簡略化した結果を試す前に、その特徴を残す版を保存します。すべての元画像に使える汎用設定は約束できません。
Vectorizeが見つからなければ、Boxy SVGのサポート情報で版とバージョンを確認します。設定がないことは、Boxy SVGが画像トレースに一度も対応していない証明ではありません。外部トレースツールを使い、Boxy SVGでSVGの編集を続けることもできます。
パスを簡略化する前に取っ手の開口を確認する
取っ手は空白も特徴の一部なので、役立つ検証対象です。結果の背後に対照的な背景を置きます。開口からその色が見えるなら、意図した空白が残るか確認します。白いままなら、白いオブジェクトが背景を覆っているかもしれません。
これは色選び以上の問題です。SVGの塗り規則はパスのどの領域を内部とするかを決めます。サブパス間の関係も含まれます。パスの構成を変えると穴が変わる場合があります。図形の結合や簡略化前にコピーを使い、後で開口を再確認します。
マグカップでは次の順に確認します。
- 背後のラスター原本を非表示にして結果を見ます。カップと取っ手が完全に表示されるか確認します。
- 対照的な背景で取っ手を確認します。装飾の間の狭い隙間も確認します。
- カップの色付き領域を選び、仮に塗りを変えます。編集に適した1つの領域が変わるのか、多数の小片が変わるのかを見ます。
- パス編集ツールで外側の輪郭を確認します。小部分を調整して元に戻し、意図した形状を操作しているか確かめます。
- メニューアイコンのサイズに縮小します。取っ手が読めるか、小さな面が役立つかを判断します。
複雑な結果がポスターに適していても、メニューには別の簡略版が必要な場合があります。詳しい修正方法はSVGの編集方法とSVGのノードが多すぎる場合の対処を参照してください。
作業に適する場合は専用ツールのトレースを読み込む
トレースを別途作り、Boxy SVGで仕上げたい場合にPerfectVectorを使えます。元画像をSVGに変換し、ダウンロードした絵をBoxy SVGで開いて、カップの輪郭、取っ手の開口、色を変えられる領域を確認します。トレース方法の選択を、配置や修正に好むエディターから分けられます。
Boxy SVGの開発元によるGoogle Playの説明は、形状編集、パス操作、SVG/SVGZ保存、SVG/CSSコードの検査ツールを挙げています。内蔵トレース機能、外部変換、手描きのどこから来たパスでも、仕上げに役立ちます。
拡張子を信用せず、読み込んだ絵を確認します。SVGのimage要素はPNGやJPEGを参照できます。SVGにもラスター内容があり得ます。マグカップが画像オブジェクトのままなら、ベクターエディターで開いても輪郭に変換されていません。ラスター画像を含むSVGのガイドで混在する絵の識別を説明しています。
トレース方法を比較するなら同じ元画像と採用基準を使います。最小の容量や最少のオブジェクト数のファイルを自動的に選ばず、意図した編集ができるかで判断します。
手描きやラスター画像が適している場合
単純なマグカップのアイコンは、トレース後に修復するより、少数の制御した図形で再構成するほうが簡単な場合があります。手動の構成では、取っ手とカップの接合方法や色変更時のハイライトの動きを決められます。小さく圧縮された元画像の偶然の凹凸を残すことも避けられます。
釉薬のかかった陶器のマグカップ写真は別の選択になります。反射、釉薬の質感、微妙な陰影こそ写真の目的かもしれません。それを保ちたいならラスターを使います。幾何学的な表現は意図した芸術的判断になり得ますが、ファイルに表現させる内容を変えます。
よくある質問
Boxy SVGには画像の自動トレースがありますか？ はい。開発者はバージョン3.35.0で追加した画像トレース機能としてVectorizeを説明しています。見つからなければ古い手動専用の手順に頼らず、版とバージョンを確認します。
VectorizeとTriangulateは同じですか？ 目的が異なります。トレースした輪郭が必要ならVectorizeから始めます。面に分けるなどの表現が望む絵なら幾何学的ジェネレーターを試し、結果の小片が意図する編集を支えるか確認します。
別のベクター化ツールで作ったSVGをBoxy SVGで編集できますか？ Boxy SVGで読み込んだベクターの絵を扱えます。まずファイルを検査します。埋め込みビットマップだけのSVGは、その画像の編集可能な輪郭を提供しません。
トレースした図形の穴が消えたのはなぜですか？ トレースが開口を閉じたのか、背景色のオブジェクトが覆うのか、パス操作で内部の塗り方が変わったのかを確認します。さらにパスを変える前に保存したコピーと比較し、対照的な背景で検証します。
参考資料
- Mac App StoreのBoxy SVG開発者の回答 — バージョン3.35.0のVectorizeとほかのジェネレーターの確認。
- Boxy SVG開発者による幾何学的ジェネレーターの説明 — ほかの利用者の意見とは区別される、作者自身のTriangulateとPrimitivizeの説明。
- Google PlayのBoxy SVG — 編集、パス操作、保存、コード検査についての開発元の説明。
- W3C — SVG 2の塗り規則 — パス内部の決まり方。
- W3C — SVG 2の埋め込み内容 — SVG内でラスター画像を参照できること。
次の編集を支える形状を選びます。別途のトレースが役立つなら、自分の画像をPerfectVectorで試し、Boxy SVGでSVGを開いて、最小の重要な開口と色を変えたい領域を確認してください。
