Geometrizeで画像をSVGに：幾何学図形を出力
Geometrize のブラウザ デモを使用して、既存の画像を幾何学的な SVG アートに変換し、さらに編集する前に、有界四角形のエクスポートとその制限を検査します。
目次
Geometrize は、既存の画像を、適合した幾何学的形状から構築された SVG アートワークに変換できます。その近似値が必要な効果である場合に選択してください。重なり合う長方形から作成された SVG は、ソースをフレーム、三角形、および個別のアクセント オブジェクトとして再構築することなく、実数のベクトル ジオメトリにすることができます。
公式のGeometrize Web デモでは、独自の画像を開いて、シェイプ タイプを選択し、シェイプ キャップを制御し、SVG を保存できます。このチュートリアルでは、意図的に小さな長方形のみを実行して、ジオメトリの保存と意味のあるデザイン オブジェクトの回復の違いを示します。
幾何学的近似が画像に適合するかどうかを決定する
幾何学的プリミティブは、長方形、楕円、三角形などの単純な形状です。 Geometrize のプロジェクト ページ では、これらの形状を使用して画像を再構成する方法について説明しています。 Web デモでは、候補となる形状を繰り返し試行して変更し、ソースに適合するものを選択すると説明されています。
そのプロセスは、意図的な幾何学アートに適しています。これは、ロゴの正確なシルエットを保存したり、正確な編集のためにレタリングを再構築したりすることとは異なります。始める前に、様式化されたピースの配置が役立つかどうか、またはオリジナルに厳密に従った輪郭が必要かどうかを判断してください。
許可されたラスター画像、保持されたオリジナル、Web ブラウザー、および SVG を保存する場所が必要です。最初の実行では、重要な領域が認識できる小さな画像を使用します。進化する近似値が唯一の参照にならないように、ソースは別に開いたままにしておきます。
検証方法： 2026年11月8日、ブラウザデモで独自に作成した384 × 256のRGBテスト画像を開きました。不透明な白い背景に、紺色の枠と小さなマーク、青緑色の三角形、金色の長方形を配置した画像です。図形は長方形だけを選び、範囲を限定した例として上限を20に設定しました。20はこのテストのために選んだ上限であり、ツールの初期値、最大値、推奨品質設定ではありません。写真、より多くの図形、ネイティブエディタへの読み込み、実物の出力はテストしていません。
ソースを開いて、有界四角形のサンプルを実行します。
デモは、到着時にすでに独自のサンプルで実行されている可能性があります。独自のイメージを設定する前にサンプルを一時停止して、提供されたサンプルとテストを区別できるようにします。
- デモが実行中の場合は [一時停止] を選択し、設定 を展開します。
- この小さな例では、シェイプの最大数の上限を 20 に設定します。
- [Open Image (Open Image (画像を開く))] を選択し、許可されたソースを選択します。キャンバスがアートワークに変わることを確認します。
- [設定] で [長方形] を選択し、他の形状タイプをクリアします。最初の選択は回転楕円でしたが、これはクリアしました。
- この比較では残りの値を固定しておきます。シェイプの不透明度 128、初期背景の不透明度 255、ステップごとのランダム シェイプ 50、ステップごとのシェイプの突然変異 100 を使用しました。
- 実行を選択します。私たちのテストでは、追加された図形が 20 に達し、制限されたプロセスが停止した後、コントロールは実行に戻りました。
- Save Svg (Save Svg (Svg を保存)) を選択し、ダウンロードしたファイルを保持し、そのアートワークをソースと比較します。
デモの説明では、実行/一時停止、ステップ、イメージを開く、リセット、およびその保存オプションについて説明します。 ステップ は、プロセスを段階的に検査する場合にプリミティブを 1 つ追加します。 リセット を実行すると現在のシェイプがクリアされるため、再度開始する前に保存しておきたい結果を保存します。
キャンバスに提供されたサンプルがまだ表示されている場合は、結果を判断する前にソースを停止して再度開きます。新しい実行により保持したいバージョンが変更された場合は、リセットによって以前のフィット感が復元されると想定するのではなく、保存した SVG と元の画像に戻ります。
保存された形状の数を正しく読み取ります
ダウンロードしたファイルは 2,292 バイトで、幅 384、高さ 256 と宣言されました。XML 検査では 20 個の <rect> 要素が見つかりましたが、<image> 要素は見つかりませんでした。長方形自体はベクトル ジオメトリです。ベクトル形状としてカウントするために、<path> としてシリアル化する必要はありません。 SVG 基本形状仕様は、四角形要素を定義します。
これら 20 個の長方形のうちの 1 つは不透明な背景でした。他の 19 個の fill-opacityは約 0.502 でした。したがって、この数は 20 個の異なる前景デザイン オブジェクトを意味するものではなく、また、元の領域ごとに 1 つの長方形を意味するものでもありません。
実際のキャンバスは、その違いがなぜ重要なのかを示しています。いくつかの長方形が重なってネイビーのフレームを示唆しており、階段状のピースがティールの三角形に近似しています。光源の白い背景と内部の開口部は、この適合した構図によって表現されています。後で 1 つの長方形を選択しても、視覚的に認識できるフレーム全体が選択されるとは限りません。
塗りつぶしの不透明度は、シェイプ内のペイントの不透明度を制御します。部分的に透明な形状では、重なりが目に見える色に寄与します。長方形に保存されている塗りつぶしだけでは、最終的な合成のすべてのピクセルを表すことはできません。 SVG ペイント仕様は、そのペイント プロパティを定義します。
| 確認した内容 | 実際に保存された結果 | それが確立するもの |
|---|---|---|
| 出力ジオメトリ | 20 個の長方形要素、画像要素なし | このファイルには幾何学的なベクトル形状が含まれています |
| 背景 | カウントに含まれる 1 つの不透明な長方形 | 合計には背景も含まれます |
| その他の塗りつぶし | 約0.502の塗りつぶし不透明度 | 目に見えるアートワークには、重なり合った半透明のペイントが使用されています |
| ネイティブエディターまたはカッター | テストされていません | 申請または製造受領は請求されません |
ファイル構造をビジュアルスタイルから分離する
保持された SVG には、四角形要素の間にリテラル括弧とカンマも含まれていました。ダウンロードしたファイルは変更せずにそのまま残しました。このガイドでは、選択したエディターがそのシリアル化をどのように処理するかを証明するものではないため、依存する前に、意図した保存先に実際に保存されたファイルを確認してください。
次のチェックでは、SVG のコピーを開いてレンダリングされることを確認し、その形状がどのように選択されるかを調べます。受信側アプリがそれを拒否したり、予期しないコンテンツを表示したりする場合は、ファイルを使用する前に元のエクスポートを保存し、その特定のインポートを診断してください。ブラウザー キャンバスが動作しているだけでは、エクスポートされたドキュメントが別のアプリケーションの要件を満たしていることは証明されません。
シェイプ数を増やすと元のオブジェクトの構造が復元されるとは考えないでください。より大きな数の比較は実行しませんでした。別のキャップまたはシェイプ タイプを調べる場合は、それぞれの結果を個別に保存し、その画像に対する視覚効果と編集の必要性を判断します。
Boxy SVG トレースおよびジオメトリ ガイドでは、エディター コンテキストでの同じデザインの選択について説明しています。写真ソースの場合、写真から SVG への変換の期待は、ラスターを保持するか様式化された結果を選択するかを決定するのに役立ちます。
幾何学的なアートよりも輪郭の方が役立つ場合
PerfectVector は、目的が意図的な四角形の合成ではなく、オリジナルと照らし合わせて検査できる画像からベクターへの自動トレースである場合の代替手段です。ソースで画像からベクターへのページを使用し、重要なシルエット、内部の開口部、個別のカラー領域を確認します。このテスト参照に対して PerfectVector 変換を実行したり、その出力を Geometrize と比較したりしませんでした。
PerfectVector の製品概要では、ロック解除後に編集およびエクスポートできる、表示のみの無料プレビューについて説明しています。幾何学的な処理が希望のアートワークである場合は、その創造的な選択を続けてください。正確な構築や特定のオブジェクトの境界が必要な場合は、自動ルートよりも手動描画の方が適している可能性があります。
トレース品質チェックリストを使用して、存続する必要がある機能を書き留めます。受け入れられたファイルは、幾何学的なイラストを配置するか、認識可能な輪郭を調整するかにかかわらず、次のタスクをサポートする必要があります。
よくある質問
Geometrize は既存の画像から SVG をエクスポートしますか? はい。 Web デモでは、Open Image および Save Svg コントロールが提供されます。実際にブラウザを実行すると、アップロードされたコントロールから四角形ジオメトリを含む SVG が保存されました。
20 個の図形は 20 個の前景オブジェクトを意味しますか? いいえ。保存された 20 個の長方形のファイルでは、1 つの長方形が背景であり、他の長方形は画像に近づくように重なっていました。この数では、ソースの意味のあるオブジェクトが再構築されませんでした。
シェイプ数のデフォルトは 20 でしたか、それとも最大でしたか? いいえ。この制限された例では、意図的に 20 を選択しました。私たちはツールの能力をテストしたり、より大きな数での品質を比較したりしませんでした。
幾何学的な SVG はファイルの編集や切り取りを容易にしますか? いいえ。受信側アプリでその構造を調べてください。このテストは、実際のブラウザーの結果で停止し、SVG を保存しました。ネイティブエディターのインポート、編集、切り取りはテストされていません。
情報源
- Geometrize — プロジェクトのホームページ — 意図した画像から幾何プリミティブへのアプローチ。
- Sam Twidale — Geometrize Web デモ — ここで使用される実際のソース画像、設定、実行および SVG 保存のコントロール。
- W3C — SVG 2 基本形状 — 長方形要素はベクトル ジオメトリです。
- W3C — SVG 2 塗りつぶしの不透明度 — 不透明度がシェイプの内部ペイントにどのように適用されるか。
- PerfectVector — 製品情報 — プレビューおよびロック解除された編集/エクスポート ワークフロー。
PerfectVectorに自分の画像を入れて無料で試し、輪郭と重要な最小の穴を確認してから、作業に適した形状かどうか判断してください。
