Geometrize: Bilder als geometrische SVG-Formen exportieren

Geometrize kann ein vorhandenes Bild in SVG-Grafiken umwandeln, die aus angepassten geometrischen Formen erstellt werden. Wählen Sie diese Option, wenn diese Näherung den gewünschten Effekt erzielt. Eine aus überlappenden Rechtecken erstellte SVG-Datei kann echte Vektorgeometrie sein, ohne die Quelle als Rahmen, Dreieck und separates Akzentobjekt zu rekonstruieren.

Mit der offiziellen Geometrize-Webdemo können Sie Ihr eigenes Bild öffnen, Formtypen auswählen, die Formkappe steuern und eine SVG-Datei speichern. In dieser exemplarischen Vorgehensweise wird ein bewusst kleiner, nur aus Rechtecken bestehender Lauf verwendet, um den Unterschied zwischen dem Speichern von Geometrie und dem Wiederherstellen aussagekräftiger Designobjekte zu verdeutlichen.

Probier es mit deinem eigenen Bild

Vollständiges Tool öffnen

PNGJPGWEBPPNGSVGBild hier ablegenoder klicken · einfügen ⌘VBild auswählenBild zum Prüfen ablegen

Kostenlos und ohne Anmeldung: Lege ein Bild ab und sieh dir die Vorschau deines Vektors an.

Entscheiden Sie, ob die geometrische Näherung zum Bild passt

Ein geometrisches Grundelement ist eine einfache Form, beispielsweise ein Rechteck, eine Ellipse oder ein Dreieck. Auf der Projektseite von Geometrize wird die Rekonstruktion von Bildern mit diesen Formen beschrieben. In der Web-Demo wird erklärt, dass es wiederholt versucht, Kandidatenformen zu verändern und diejenigen auszuwählen, die zur Quelle passen.

Dieser Prozess passt zu bewusster geometrischer Kunst. Dabei handelt es sich um ein anderes Ziel, als die exakte Silhouette eines Logos beizubehalten oder einen Schriftzug für präzise Bearbeitungen neu zu erstellen. Bevor Sie beginnen, entscheiden Sie, ob eine stilisierte Anordnung der Teile sinnvoll ist oder ob Sie Konturen benötigen, die sich eng am Original orientieren.

Sie benötigen ein zulässiges Rasterbild, ein beibehaltenes Original, einen Webbrowser und einen Ort zum Speichern der SVG-Datei. Benutzen Sie für den ersten Durchlauf ein kleines Bild, dessen wichtige Bereiche Sie erkennen können. Halten Sie die Quelle separat offen, damit die sich entwickelnde Annäherung nicht zu Ihrer einzigen Referenz wird.

Methode: Am 8. November 2026 haben wir unsere ursprüngliche 384 × 256 RGB-Geometriesteuerung in der Browser-Demo geöffnet. Es hatte einen undurchsichtigen weißen Hintergrund, einen marineblauen Rahmen und kleine Markierungen, ein blaugrünes Dreieck und ein goldenes Rechteck. Wir haben nur Rechtecke ausgewählt und für ein begrenztes Beispiel eine Obergrenze von 20 festgelegt. Zwanzig war die von uns gewählte Testobergrenze, nicht die Standard-, Maximal- oder empfohlene Qualitätseinstellung des Tools. Wir haben kein Foto, keine größere Formenanzahl, keinen nativen Editor-Import oder keine physische Ausgabe getestet.

Öffnen Sie Ihre Quelle und führen Sie ein Beispiel für ein begrenztes Rechteck aus

Die Demo kann bei Ihrer Ankunft bereits als eigenständiges Beispiel ausgeführt werden. Halten Sie dieses Beispiel an, bevor Sie Ihr eigenes Bild erstellen, damit Sie das bereitgestellte Beispiel von Ihrem Test unterscheiden können.

1. Wählen Sie Pause aus, wenn die Demo ausgeführt wird, und erweitern Sie dann Einstellungen.
2. Setzen Sie für dieses kleine Beispiel Max Shapes Cap auf 20.
3. Wählen Sie Bild öffnen und wählen Sie die zulässige Quelle aus. Bestätigen Sie, dass sich die Leinwand zu Ihrem Kunstwerk ändert.
4. Wählen Sie in den Einstellungen Rechtecke aus und deaktivieren Sie die anderen Formtypen. Unsere Startauswahl war Rotated Ellipses, die wir gemeistert haben.
5. Behalten Sie für diesen Vergleich die restlichen Werte bei. Wir haben die Formdeckkraft 128, die anfängliche Hintergrunddeckkraft 255, zufällige Formen pro Schritt 50 und Formmutationen pro Schritt 100 verwendet.
6. Wählen Sie Ausführen. In unserem Test erreichten hinzugefügte Formen 20 und die Steuerung kehrte zu Ausführen zurück, nachdem der begrenzte Prozess gestoppt wurde.
7. Wählen Sie SVG speichern, behalten Sie die heruntergeladene Datei bei und vergleichen Sie deren Grafik mit der Quelle.

Die Erläuterung der Demo beschreibt Ausführen/Pause, Schritt, Bild öffnen, Zurücksetzen und die Speicheroptionen. Schritt fügt ein Grundelement hinzu, wenn Sie den Prozess inkrementell überprüfen möchten. Zurücksetzen löscht die aktuellen Formen. Speichern Sie also ein Ergebnis, das Sie behalten möchten, bevor Sie erneut beginnen.

Wenn auf der Leinwand immer noch das bereitgestellte Beispiel angezeigt wird, stoppen Sie die Quelle und öffnen Sie sie erneut, bevor Sie das Ergebnis beurteilen. Wenn ein neuer Lauf eine Version ändert, die Sie behalten wollten, kehren Sie zur gespeicherten SVG-Datei und zum Originalbild zurück, anstatt davon auszugehen, dass durch Zurücksetzen die vorherige Anpassung wiederhergestellt wird.

Lesen Sie die gespeicherte Formanzahl richtig ab

Unsere heruntergeladene Datei war 2.292 Byte groß und hatte eine Breite von 384 und eine Höhe von 256. Bei der XML-Inspektion wurden 20 <rect>-Elemente und kein <image>-Element gefunden. Ein Rechteck ist selbst Vektorgeometrie; Es muss nicht als <path> serialisiert werden, um als Vektorform zu gelten. Die SVG-Grundformenspezifikation definiert das Rechteckelement.

Eines dieser 20 Rechtecke war der undurchsichtige Hintergrund. Die anderen 19 hatten eine fill-opacity von ungefähr 0.502. Die Zählung bedeutete daher weder 20 verschiedene Vordergrunddesignobjekte noch ein Rechteck für jeden Bereich im Original.

Die eigentliche Leinwand zeigt, warum diese Unterscheidung wichtig ist. Mehrere Rechtecke überlappen sich, um den marineblauen Rahmen anzudeuten, und abgestufte Teile nähern sich dem blaugrünen Dreieck an. Der weiße Hintergrund und die Innenöffnung der Quelle werden durch diese angepasste Komposition dargestellt. Wenn Sie später ein einzelnes Rechteck auswählen, wird nicht unbedingt der gesamte Rahmen ausgewählt, den Sie visuell erkennen.

Fülldeckkraft steuert, wie undurchsichtig die Farbe innerhalb einer Form ist. Bei teilweise transparenten Formen trägt die Überlappung zur sichtbaren Farbe bei; Die gespeicherte Füllung eines Rechtecks ​​allein beschreibt nicht jedes Pixel der endgültigen Zusammensetzung. Die SVG-Malspezifikation definiert diese Maleigenschaft.

Halten Sie die Dateistruktur vom visuellen Stil getrennt

Das beibehaltene SVG enthielt außerdem literale Klammern und Kommas zwischen den Rechteckelementen. Wir haben die heruntergeladene Datei unverändert gelassen. Diese Anleitung gibt keinen Aufschluss darüber, wie der von Ihnen gewählte Editor mit dieser Serialisierung umgeht. Überprüfen Sie daher die tatsächlich gespeicherte Datei an ihrem vorgesehenen Zielort, bevor Sie sich darauf verlassen.

Öffnen Sie für die nächste Prüfung eine Kopie Ihrer SVG-Datei, bestätigen Sie, dass sie gerendert wird, und überprüfen Sie, wie ihre Formen ausgewählt werden können. Wenn eine empfangende App dies ablehnt oder unerwartete Inhalte anzeigt, behalten Sie den ursprünglichen Export bei und diagnostizieren Sie diesen spezifischen Import, bevor Sie die Datei verwenden. Ein funktionierender Browser-Canvas allein beweist nicht, dass ein exportiertes Dokument die Anforderungen einer anderen Anwendung erfüllt.

Gehen Sie nicht davon aus, dass eine höhere Formanzahl die Struktur des ursprünglichen Objekts wiederherstellt. Wir haben keinen größeren Vergleich durchgeführt. Wenn Sie einen anderen Kappen- oder Formtyp erkunden, speichern Sie jedes Ergebnis separat und beurteilen Sie den visuellen Effekt und die Bearbeitungsanforderungen für dieses Bild.

Unser Boxy SVG-Tracing- und Geometrieleitfaden erklärt die gleiche Designauswahl im Editor-Kontext. Bei Fotoquellen helfen Foto-zu-SVG-Erwartungen bei der Entscheidung, ob das Raster beibehalten oder ein stilisiertes Ergebnis gewählt werden soll.

Wenn Konturen nützlicher sind als geometrische Kunst

PerfectVector ist eine Alternative, wenn Ihr Ziel eine automatische Bild-zu-Vektor-Nachverfolgung ist, die Sie anhand des Originals prüfen können, und nicht eine absichtliche Rechteckkomposition. Verwenden Sie die Bild-zu-Vektor-Seite mit Ihrer Quelle und überprüfen Sie dann die wichtige Silhouette, die Innenöffnungen und die einzelnen Farbbereiche. Wir haben für diese Testreferenz keine PerfectVector-Konvertierung durchgeführt und auch ihre Ausgabe nicht mit Geometrize verglichen.

Die Produktfakten von PerfectVector beschreiben eine kostenlose, schreibgeschützte Vorschau mit Bearbeitung und Export nach der Freischaltung. Wenn die geometrische Behandlung das gewünschte Kunstwerk ist, bleiben Sie bei dieser kreativen Wahl. Wenn Sie eine genaue Konstruktion oder bestimmte Objektgrenzen benötigen, ist das manuelle Zeichnen möglicherweise besser geeignet als eine automatische Route.

Verwenden Sie die Checkliste zur Rückverfolgungsqualität, um die Funktionen aufzuschreiben, die überleben müssen. Die akzeptierte Datei sollte die nächste Aufgabe unterstützen, unabhängig davon, ob diese Aufgabe das Anordnen einer geometrischen Illustration oder das Verfeinern einer erkennbaren Kontur ist.

FAQ

Exportiert Geometrize SVG aus einem vorhandenen Bild? Ja. Die Webdemo bietet die Steuerelemente „Bild öffnen“ und „SVG speichern“. Unser eigentlicher Browserlauf hat eine SVG-Datei mit Rechteckgeometrie aus dem hochgeladenen Steuerelement gespeichert.

Bedeuten 20 Formen 20 Vordergrundobjekte? Nein. In unserer gespeicherten Datei mit 20 Rechtecken war ein Rechteck der Hintergrund und die anderen überlappten sich, um dem Bild anzunähern. Diese Zählung hat die aussagekräftigen Objekte der Quelle nicht rekonstruiert.

War 20 die Standard- oder maximale Formanzahl? Nein. Wir haben für dieses begrenzte Beispiel bewusst 20 ausgewählt. Wir haben die Kapazität des Tools nicht getestet oder die Qualität bei größeren Zählungen verglichen.

Gewährleistet eine geometrische SVG-Datei eine einfache Bearbeitung oder Ausschneidedatei? Nein. Überprüfen Sie die Struktur in der empfangenden App. Dieser Test wurde beim tatsächlichen Browserergebnis gestoppt und SVG gespeichert. Das Importieren, Bearbeiten und Schneiden mit nativen Editoren wurde nicht getestet.

Quellen

1. Geometrize – Projekt-Homepage – Der beabsichtigte Ansatz von Bildern zu geometrischen Grundelementen.
2. Sam Twidale – Geometrize-Webdemo – Die eigentlichen Steuerelemente für Quellbild, Einstellungen, Ausführung und SVG-Speicherung, die hier verwendet werden.
3. W3C – SVG 2 Grundformen – Rechteckelemente sind Vektorgeometrie.
4. W3C – Deckkraft der SVG 2-Füllung – Wie die Deckkraft auf die Innenfarbe einer Form angewendet wird.
5. PerfectVector – Produktfakten – Die Vorschau und der freigeschaltete Bearbeitungs-/Export-Workflow.

Beginnen Sie kostenlos mit Ihrem eigenen Bild in PerfectVector, prüfen Sie dann dessen Kontur und die kleinste wichtige Öffnung, bevor Sie entscheiden, welche Geometrie zu Ihrer Arbeit passt.