PerfectVector
Von Irene Kim10 Min. Lesezeit

SVG lässt sich nicht entgruppieren: Objekt prüfen und reparieren

Wenn sich ein SVG nicht entgruppieren lässt, kann es ein einzelner oder zusammengesetzter Pfad oder ein eingebettetes Bild sein. Prüfe zuerst den Objekttyp.

Auf dieser Seite

Entgruppieren funktioniert nur, wenn das ausgewählte Objekt tatsächlich eine Gruppe ist. Ein SVG, das wie mehrere Teile aussieht, kann stattdessen ein zusammengesetzter Pfad, ein gewöhnlicher Einzelpfad, ein beschnittenes Objekt oder ein Rasterbild in einem SVG-Container sein. Erneutes Klicken auf Gruppierung aufheben verändert keine dieser Strukturen.

Die hilfreiche Frage lautet nicht „Wo ist der richtige Befehl zum Entgruppieren?“, sondern „Was habe ich ausgewählt?“ Sobald du das weißt, ist die Lösung meist unkompliziert: eine echte Gruppe entgruppieren, einen zusammengesetzten Pfad zerlegen, die Knoten eines Einzelpfads bearbeiten oder ein eingebettetes Rasterbild als echte Vektorformen nachzeichnen.

Die schnelle Diagnose
  • Zeigt das Objektfenster eine Gruppe oder enthält der SVG-Quelltext <g>, nutze Gruppierung aufheben.
  • Hat eine Auswahl getrennte Löcher oder Inseln, probiere Zerlegen oder Zusammengesetzten Pfad auflösen an einer Kopie.
  • Zeigt die Knotenbearbeitung eine einzige Kontur, gibt es nichts zu entgruppieren. Bearbeite oder teile diesen Pfad.
  • Ist das Objekt ein einzelnes Rechteck und wird beim Vergrößern pixelig, handelt es sich wahrscheinlich um ein eingebettetes Bild. Beschaffe das ursprüngliche Rasterbild und vektorisiere es richtig.

Prüfe zuerst, welchen Objekttyp du ausgewählt hast

SVG ist ein Containerformat und kein Versprechen, dass jedes sichtbare Teil eine eigene Ebene ist. Es kann gruppierte Vektorelemente, einzelne Pfade, zusammengesetzte Pfade, Text, Beschneidungsstrukturen und Rasterbilder enthalten. Wenn du einen Canvas-Editor entwickelst, zeigt dir die Anleitung zum SVG-Import mit Fabric.js, wie du separate Objekte einliest, einen benannten Teil umfärbst und das exportierte SVG prüfst.

Vergleiche in diagrams.net SVG-Bilder und native Schablonen in draw.io, bevor du importierte Grafiken entgruppierst. Ein skalierbares Bild und eine Diagrammform mit festgelegten Verbindungspunkten haben unterschiedliche Bearbeitungsabläufe.

Für dieselbe Frage nach Bild oder nativer Form in einem anderen Diagrammeditor lies, was nach einem SVG-Import in Excalidraw bearbeitbar wird.

Das erklärt, warum dasselbe Symptom in Cricut Design Space, Silhouette Studio, LightBurn, Inkscape, Illustrator und Office-Apps auftritt. Unterscheide in PowerPoint zunächst eine SVG-Grafik von Office-Formen mithilfe der Anleitung zum Umwandeln und Bearbeiten von SVG-Teilen in PowerPoint. Jedes Programm benennt seine Befehle anders, doch die zugrunde liegende Datei hat weiterhin eine von wenigen üblichen Strukturen.

Was du siehstWas die Datei wahrscheinlich enthältWas du versuchen kannst
Mehrere Objekte werden gemeinsam ausgewählt und das Ebenenfenster zeigt eine GruppeEine echte SVG-GruppeGruppierung aufheben
Mehrere Inseln oder Löcher werden als ein Objekt ausgewähltEinen zusammengesetzten PfadAn einer Kopie auflösen oder zerlegen
Eine Kontur zeigt bearbeitbare AnkerknotenEinen EinzelpfadKnoten bearbeiten, Pfad auftrennen oder teilen
Ein rechteckiges Objekt wird ausgewählt; beim Zoomen werden Pixel sichtbarEin eingebettetes RasterbildRasterquelle extrahieren oder suchen und dann vektorisieren
Ein Teil der Grafik ist hinter einer Begrenzung verborgenEinen Beschneidungspfad oder eine MaskeBeschneidung aufheben oder Inhalte bearbeiten
Vier Strukturen, vier Lösungen
Konzeptionelle Explosionsdarstellung zum Vergleich einer SVG-Gruppe, eines zusammengesetzten Pfads mit Loch, eines Einzelpfads mit Ankerknoten und eines eingebetteten Rasterbilds
Konzeptionelles Diagramm: Grafiken können gleichermaßen wie ein Ganzes aussehen, obwohl sie als Gruppe, zusammengesetzter Pfad, Einzelpfad oder eingebettetes Bild aufgebaut sind.

Nur bei einer Gruppe hilft Entgruppieren

Im SVG-Markup ist das <g>-Element ein Container für andere SVG-Elemente. Der Standard erlaubt beliebig tief verschachtelte Gruppen. Ein Designer kann einen Kreis, eine Wortmarke und einen Hintergrund gruppieren, damit sie sich gemeinsam bewegen. Beim Entgruppieren wird der Gruppencontainer des Editors entfernt und die enthaltenen Elemente werden zugänglich.

Gehe so vor:

  1. Dupliziere die Datei oder speichere eine Arbeitskopie.
  2. Wähle das Objekt einmal aus.
  3. Prüfe das Ebenen- oder Objektfenster, statt dich auf die Zeichenfläche zu verlassen.
  4. Ist das ausgewählte Element eine Gruppe, führe Gruppierung aufheben einmal aus.
  5. Wiederhole den Vorgang nur, wenn die Datei verschachtelte Gruppen enthält.

Verschachtelte Gruppen sind üblich. Ein Logo kann eine Gruppe für das Symbol, eine weitere für den Schriftzug und eine übergeordnete Gruppe für beide haben. Zwei oder drei gezielte Entgruppierungen sind normal. So lange zu klicken, bis die Grafik auseinanderfällt, ist es nicht. Höre auf, sobald du die benötigten Teile einzeln auswählen kannst.

Ein zusammengesetzter Pfad sieht getrennt aus, verhält sich aber wie ein Objekt

Der Buchstabe „O“, eine Ringform und ein Logo mit ausgespartem Negativraum sind häufig zusammengesetzte Pfade. Das sichtbare Loch ist kein darübergelegtes weißes Objekt. Es entsteht durch mehrere Teilpfade und die Füllregel des Pfads; die SVG-Pfadspezifikation unterstützt zusammengesetzte Pfade ausdrücklich für Strukturen wie Ringlöcher.

Diese Struktur ist nützlich. Sie erhält Innenräume und Aussparungen, wenn sich die Grafik bewegt oder ihre Farbe ändert. Beim Zerlegen können Löcher gefüllt, Inseln getrennt oder die Interpretation von innen und außen durch einen Schneideplotter verändert werden. Hat sich die Öffnung bereits geschlossen, nutze die Diagnose für gefüllte Löcher, bevor du weitere Pfadbefehle anwendest.

Wenn du die Teile wirklich brauchst:

  • dupliziere zuerst das Objekt;
  • nutze Zusammengesetzten Pfad auflösen, Zerlegen oder den entsprechenden Befehl;
  • prüfe anschließend jedes Loch und jeden Buchstabeninnenraum;
  • stelle die zusammengesetzte Struktur wieder her, wenn das Ziel eine saubere Silhouette benötigt.

Bei einer Schneidedatei ist das Trennen der Teile nicht automatisch eine Verbesserung. Wenn der vorhandene zusammengesetzte Pfad richtig geschnitten wird, lass ihn bestehen.

In einem Einzelpfad gibt es nichts freizulegen

Ein Pfad kann einer komplizierten Silhouette folgen und dennoch ein einzelnes Objekt sein. Wechsle zum Knoten- oder Direktauswahlwerkzeug. Erscheinen Ankerpunkte entlang der gesamten Kontur, siehst du bereits die bearbeitbare Geometrie.

Jetzt brauchst du Pfadoperationen statt Gruppierungsoperationen:

  • verschiebe Knoten, um die Kontur umzuformen;
  • trenne den Pfad an ausgewählten Knoten auf;
  • teile die Form mit einem anderen Pfad;
  • nutze Zerlegen, wenn der Pfad nicht verbundene Teilpfade enthält;
  • zeichne einen lokalen Abschnitt neu, wenn das Nachzeichenergebnis zu unruhig ist.

Diese Unterscheidung ist bei automatisch nachgezeichneten Grafiken wichtig. Ein Konverter erzeugt möglicherweise eine Form pro Farbe statt einer Form pro Gegenstand, den ein Mensch erkennt. Ein blaues Hemd und ein blaues Auge können zu einem zusammengesetzten Objekt werden, weil sie dieselbe Füllfarbe haben. Die Datei ist eine Vektorgrafik, ihre Struktur entspricht aber nicht den inhaltlich getrennten Ebenen, die du erwartet hast.

Entscheide für Animationen in Rive vor dem Auflösen oder Zusammenführen von Pfaden, welche Teile sich unabhängig bewegen sollen. Der SVG-Import erzeugt native Rive-Objekte. Prüfe deshalb die entstandene Hierarchy und teste die Bewegung eines Teils. Die Anleitung zur Vorbereitung des SVG-Imports in Rive erklärt den Zusammenhang zwischen Quellgruppierung, Darstellungseinstellungen und importierten Teilen, nicht unterstützten Effekten sowie den für Animationen benötigten Drehpunkten.

Das SVG kann ein einzelnes Rasterbild enthalten

Ein SVG darf ein <image>-Element enthalten. Laut SVG-Spezifikation für eingebettete Inhalte kann dieses Element auf Rasterinhalte im PNG- oder JPEG-Format verweisen. Die äußere Datei endet auf .svg, doch die Grafik darin besteht weiterhin aus Pixeln.

Drei schnelle Prüfungen helfen:

  1. Zoome hinein. Werden die Kanten blockig, ist der ausgewählte Inhalt ein Rasterbild.
  2. Öffne das SVG in einem Texteditor. Suche nach <image, data:image, .png oder .jpg.
  3. Prüfe den Objekttyp. Ein rechteckiges Bildobjekt ohne bearbeitbare Knoten ist keine Gruppe von Vektorformen.

Zeichne keinen Screenshot des SVG nach, wenn das ursprüngliche PNG, JPG oder die Grafikdatei noch vorhanden ist. Verwende die sauberste verfügbare Quelle. Jeder Export und Screenshot kann Skalierungsunschärfe oder Kompressionsartefakte hinzufügen.

Hier kann PerfectVector helfen: Seine Bild-zu-Vektor-Umwandlung kann geeignete flächige Grafiken als bearbeitbare Pfade rekonstruieren. Handelt es sich um ein Foto, behalte es als Rasterbild, sofern du nicht bewusst eine vereinfachte Vektoroptik möchtest. Ein Foto wird nicht zu sauber getrennten inhaltlichen Ebenen, nur weil es in einem SVG steckt.

Mehr zu genau dieser Containerfalle findest du in der Anleitung zu einem SVG, das weiterhin pixelig aussieht.

Was ist mit Beschneidungspfaden, Masken und Symbolen?

Manche Dateien sind Vektorgrafiken, lassen sich aber trotzdem nicht gewöhnlich entgruppieren:

  • Ein Beschneidungspfad verbirgt einen Teil eines Objekts, ohne ihn zu löschen. Hebe die Beschneidung auf, um die gesamte Geometrie freizulegen, und entscheide dann, ob die beschnittenen Teile erhalten bleiben sollen.
  • Eine Maske steuert die Sichtbarkeit mit hellen und dunklen Werten. Beim Aufheben können unerwartete Grafiken sichtbar werden oder sich Transparenzen ändern.
  • Ein Symbol oder eine verknüpfte Instanz benötigt vor der direkten Bearbeitung möglicherweise einen Befehl wie Erweitern, Loslösen oder In Pfade umwandeln.
  • Eine gesperrte Ebene ist ein Zustand im Editor und keine SVG-Struktur. Entsperre sie vor der Dateidiagnose.

Diese Strukturen sollten erhalten bleiben, wenn die Darstellung bereits stimmt und du die Datei lediglich skalieren oder platzieren möchtest. Alles zu erweitern kann ein kleines, geordnetes SVG deutlich schwerer wartbar machen.

Eine sichere Reihenfolge für die Reparatur

Beginne mit dem am wenigsten zerstörerischen Eingriff:

  1. Speichere eine Kopie.
  2. Entsperre das Objekt oder die Ebene.
  3. Prüfe den Objekttyp im Ebenenfenster.
  4. Entgruppiere eine bestätigte Gruppe.
  5. Hebe eine Beschneidung oder Maske nur auf, wenn verborgene Geometrie das Problem ist.
  6. Zerlege einen zusammengesetzten Pfad nur, wenn seine Teile getrennt bearbeitet werden müssen.
  7. Bearbeite oder teile einen Einzelpfad, statt ihn entgruppieren zu wollen.
  8. Zeichne nur erneut nach, wenn die Datei Pixel oder unbrauchbare Geometrie enthält und das ursprüngliche Rasterbild verfügbar ist.

Diese Reihenfolge erhält Löcher, Überlappungen und Ebenenbeziehungen, bis du weißt, dass sie die Ursache sind.

So vermeidest du das Problem bei Dateien, die du weitergibst

Bevor du jemandem ein SVG schickst:

  • benenne wichtige Gruppen und Ebenen im Quelldokument;
  • wandle Text nur in einer Weitergabekopie in Konturen um und erhalte bearbeitbaren Text in der Masterdatei;
  • vermeide eingebettete Rasterbilder, wenn der Empfänger bearbeitbare Vektorformen erwartet;
  • füge ein Vorschau-PNG bei, damit Darstellung und Bearbeitbarkeit nicht verwechselt werden;
  • öffne das exportierte SVG in einem zweiten Editor und wähle einige Teile aus;
  • teile dem Empfänger mit, ob die Datei Ebenen enthält, ihre Ebenen zusammengefasst wurden oder sie bewusst aus einer zusammengesetzten Form besteht.

Wenn du die Datei gekauft hast, bewahre das Downloadpaket auf. Der Ersteller hat möglicherweise ein SVG mit Ebenen, ein DXF, EPS oder eine Quelldatei beigelegt, auch wenn die Ebenen des zuerst geöffneten SVG zusammengefasst sind.

FAQ

Warum ist Gruppierung aufheben bei meinem SVG ausgegraut? Das ausgewählte Objekt ist wahrscheinlich keine Gruppe. Es kann ein Einzelpfad, zusammengesetzter Pfad, Bild, beschnittenes Objekt oder gesperrtes Objekt sein. Prüfe das Ebenen- oder Objektfenster und verwende den zum Objekttyp passenden Befehl.

Warum wird mein SVG als ein Objekt importiert? Es wurde möglicherweise als zusammengesetzter Pfad exportiert, mit einer Form pro Farbe aufgebaut, von der Quell-App zusammengefasst oder mit einem Rasterbild darin gespeichert. Ein einzelnes Objekt bedeutet nicht automatisch, dass die Datei defekt ist. Prüfe ihre Knoten und den Quelltext, bevor du sie änderst.

Wie trenne ich ein SVG mit nur einer Ebene in Cricut Design Space? Besteht es aus einer Farbe und einem Pfad, gibt es in Design Space keine verborgenen Ebenen freizulegen. Trenne die Grafik in einem Vektoreditor, greife auf die ursprüngliche Quelle mit Ebenen zurück oder rekonstruiere Farbbereiche, bevor du das SVG erneut importierst.

Kann ich ein SVG in Inkscape oder Illustrator entgruppieren? Ja, wenn die Auswahl eine echte Gruppe ist. Inkscape und Illustrator bieten außerdem Befehle für zusammengesetzte Pfade, Beschneidungsstrukturen und Pfadteilung. Diese Befehle lösen unterschiedliche Strukturen und sind keine stärkeren Varianten von Gruppierung aufheben.

Kann PerfectVector ein eingebettetes Bild bearbeitbar machen? PerfectVector kann die ursprüngliche Rastergrafik als Vektorpfade nachzeichnen, wenn die Quelle geeignet ist, etwa ein flächiges Logo, Icon oder eine Illustration. Es stellt weder die benannten Ebenen des ursprünglichen Designers noch bearbeitbaren Text wieder her. Fotos bleiben meist besser als Rasterbilder erhalten.

Quellen

  1. W3C — SVG-Dokumentstruktur — der <g>-Container und das Modell verschachtelter Gruppen.
  2. W3C — SVG-Pfade — Pfade, nicht verbundene Teilpfade und die Geometrie zusammengesetzter Pfade.
  3. W3C — Eingebettete SVG-Inhalte — PNG- und JPEG-Rasterinhalte in SVG-<image>-Elementen.
  4. MDN — Beschneidung und Maskierung in SVG — der Unterschied im Verhalten von Beschneidungen und Masken.
  5. Cricut — Bilduploads: nicht unterstützte Elemente — wie eine Ziel-App Beschneidungspfade, Text, verknüpfte Bilder und eingebettete Rasterbilder behandelt.

Kämpfe nicht weiter mit demselben deaktivierten Befehl. Prüfe zuerst die Struktur. Besteht das SVG tatsächlich aus Pixeln in einem Container, rekonstruiere die ursprüngliche Grafik als bearbeitbare Vektorpfade und prüfe das Ergebnis, bevor du fortfährst.

Mehr aus dem Blog

Starte mit einer sauberen SVG,
die leichter zu bearbeiten ist