PerfectVector
Von Claire Yoon9 Min. Lesezeit

SVG-Farben in einzelne Dateien aufteilen

Teile eine mehrfarbige SVG in eine ausgerichtete Datei pro exakter Farbe auf, erhalte viewBox und Größe und vermeide Ebenenversatz, Verläufe, Text und Schnittdateifallen.

Auf dieser Seite

Um SVG-Farben in einzelne Dateien aufzuteilen, gruppiere Formen nach exakter Füllfarbe und exportiere jede Gruppe auf derselben vollständigen Zeichenfläche wie das Original. Beschneide nicht jede Farbe auf ihre eigenen Grenzen. Der leere Raum hält die Teile ausgerichtet, wenn du sie importierst, schneidest, im Siebdruck druckst oder wieder zusammensetzt.

Für eine unterstützte SVG mit einfarbigen Füllungen erledigt PerfectVectors kostenloser SVG Color Separator das lokal in deinem Browser. Bei komplexer Grafik kannst du Objekte in einem Vektoreditor nach Füllung auswählen und jede Farbe manuell exportieren.

Die Regel für sichere Trennung
  • Erstelle eine unveränderte Kopie der Quell-SVG.
  • Entscheide vor der Trennung, ob fast identische Farben zusammengeführt werden sollen.
  • Gruppiere nach exakter Füllfarbe; behandle Verläufe, Muster oder Bilder nicht als einfache Farben.
  • Behalte ursprüngliche Breite, Höhe und viewBox in jeder Ausgabe.
  • Erhalte die ursprüngliche Position jeder Form und die Zeichenreihenfolge innerhalb derselben Farbe.
  • Importiere alle Dateien zusammen und prüfe Größe und Ausrichtung, bevor du Material schneidest.

Warum jede Farbdatei die vollständige Zeichenfläche behalten sollte

Stell dir eine Blume mit einem blauen Blütenblatt oben links und einem roten unten rechts vor. Wenn beide Dateien eng beschnitten werden, wandert jedes Blütenblatt in die obere linke Ecke seines neuen Dokuments. Die beiden SVGs teilen kein Koordinatensystem mehr, und das Zusammensetzen wird zum Ratespiel.

Wenn jede Datei die ursprüngliche Zeichenfläche behält, bleibt jede Farbe an ihrer vorgesehenen Koordinate. Die rein blaue Datei kann viel leere Fläche enthalten. Das sind beabsichtigte Ausrichtungsdaten, keine Verschwendung.

Konzept der gemeinsamen Zeichenfläche
Schematische mehrfarbige Blume, aufgeteilt in gleich große transparente Zeichenflächen, eine pro exakter Farbe, mit gemeinsamen Passerecken
Jede Farbe behält die ursprüngliche Zeichenfläche und Koordinaten. Enges Beschneiden der Ebenen würde ihre gemeinsame Ausrichtungsreferenz verwerfen.

Die SVG-viewBox definiert den internen Koordinatenraum. Erhalte sie zusammen mit einer verlässlichen physischen Breite und Höhe, wenn dein Plotter, deine Druckerei oder dein Produktionspartner reale Abmessungen braucht.

Exakte Farben sind nicht dasselbe wie visuell gleiche Farben

Eine SVG kann #ff0000 und #fe0000 enthalten. Sie sehen fast identisch aus, sind aber zwei exakte Werte und erzeugen in einem Ablauf nach exakter Farbe zwei Dateien. Das ist sicherer, als stillschweigend zu vermuten, dass der Designer sie als eine Produktionsfarbe gemeint hat.

Prüfe vor dem Trennen die Palette:

SituationVorgehen
Zwei Werte sind versehentlich fast identische Farben aus einer verrauschten NachzeichnungBewusst zusammenführen, dann trennen
Ähnliche Farben stellen Licht und Schatten darGetrennt lassen
Farben stehen für unterschiedliche Schnitt-, Ritz- oder DruckoperationenGetrennt lassen und Dateien kennzeichnen
Grafik verwendet einen VerlaufBewusst reduzieren, durch gewählte einheitliche Farbflächen ersetzen oder den ursprünglichen Arbeitsablauf beibehalten
Die SVG enthält ein RasterbildDas Quellbild vor der Vektorisierung trennen oder als Pfade rekonstruieren

Der Arbeitsablauf zur Palettenreduktion erklärt, wie du nahe Farben anhand ihrer visuellen und produktionstechnischen Rolle zusammenführst. Triff diese Entscheidung zuerst. Ein Farbtrenner sollte sie nicht für dich treffen.

Methode 1: den kostenlosen Browser-Farbtrenner nutzen

Der SVG Color Separator akzeptiert einen bewusst engen SVG-Umfang, damit er die Datei erhalten kann, statt plausibel wirkende, aber falsche Ebenen zurückzugeben.

1. Wähle die SVG

Wähle eine SVG bis 5 MiB. Das Dokument wird in einem kurzlebigen Browser-Worker geprüft, bevor eine sichere Vorschau oder ein Download erstellt wird. SVG-Inhalt, Dateiname, Pfade, Farben, Vorschauen und erzeugte Dateien werden nicht an PerfectVector gesendet.

Die aktuelle Version ist für deckende Vektorgrafik mit einfarbigen Füllungen gedacht: Pfade, Rechtecke, Kreise, Ellipsen, Polygone und unterstützte Polylinien mit gängigen Transformationen. Sie verarbeitet unterstützte direkt gesetzte und geerbte einfarbige Füllungen.

2. Prüfe Kompatibilität und Größe

Prüfe die akzeptierte Gesamtgrafik, physischen Abmessungen, viewBox, Pfadzahl, Palette exakter Farben und Warnungen. Wenn die Datei eine viewBox, aber keine verlässliche physische Breite und Höhe hat, bestätige eine Abmessung; die andere bleibt proportional.

Die Verarbeitung stoppt, statt nicht unterstützte Inhalte zu entfernen. Aktuelle Stoppbedingungen sind sichtbare Konturen, Verläufe, Muster, Filter, Beschneidungspfade, Masken, bearbeitbarer Text, eingebettete Bilder, wiederverwendbare Referenzen, verschachtelte SVGs, externe Ressourcen, Stylesheets oder Klassen, Skripte, Ereignishandler und transparente Schnittfarben.

Diese Grenze folgt dem SVG-Modell selbst. Die SVG-2-Spezifikation zur Farbdarstellung unterscheidet einheitliche Farben von Verläufen, Mustern, Fülldeckkraft und Konturverhalten. Eine sichtbare „Farbe“ ist nicht immer ein einzelner flächiger Wert, der sich sicher in eine Datei verschieben lässt.

3. Prüfe jede Vorschau einer exakten Farbe

Das Werkzeug erzeugt eine Vorschau pro exakter deckender Farbe. Prüfe, dass:

  • die erwarteten Formen in der richtigen Farbdatei erscheinen;
  • keine beabsichtigten Konturen, Texte oder Bildinhalte fehlen;
  • die Abmessungen der Gesamtgrafik der Vorlage entsprechen;
  • jede Ebene an ihrer ursprünglichen Position bleibt;
  • die Palette die beabsichtigte Anzahl von Produktionsfarben enthält.

Eine einfarbige SVG ist weiterhin gültig; sie ist bereits getrennt. Dateien mit zwei bis 24 exakten Farben erhalten die normale Ebenenansicht. Höhere unterstützte Anzahlen bleiben bis zur Sicherheitsgrenze zulässig, doch Dutzende Farben deuten meist darauf hin, dass zuerst die Palette bereinigt werden sollte. Mehr als 256 exakte Farben werden abgelehnt.

4. Lade die Dateien herunter

Lade die benötigten Farbdateien einzeln herunter oder nutze das lokale Archiv. Jede Ausgabe behält dieselbe Breite, Höhe, viewBox und dasselbe Koordinatensystem. Dateinamen und Ebenenreihenfolge sind deterministisch, sodass die Übergabe wiederholbar ist.

Für den Farbtrenner oder seine Ebenendownloads sind weder Registrierung noch Credits erforderlich. Das ist getrennt von PerfectVectors kostenpflichtigem Raster-zu-Vektor-Downloadablauf.

Methode 2: Farben in einem Vektoreditor trennen

Nutze Illustrator, Inkscape, Affinity oder einen anderen Vektoreditor, wenn die SVG vor dem Trennen Korrekturen braucht.

  1. Öffne eine Kopie und notiere Dokumentbreite, Höhe und viewBox oder Zeichenfläche.
  2. Wandle bearbeitbaren Text in Pfade um, wenn das Ziel Formen verlangt.
  3. Wandle nicht unterstützte Konturen, Verläufe, Muster, Masken und Beschneidungsstrukturen um oder ersetze sie bewusst.
  4. Wähle eine repräsentative Form und nutze dann den Editorbefehl Select Same Fill Color.
  5. Kopiere die ausgewählten Formen auf eine duplizierte Zeichenfläche mit denselben Abmessungen und demselben Ursprung.
  6. Lösche oder verstecke die anderen Farben, ohne die ausgewählten Formen zu bewegen.
  7. Exportiere die Farbdatei als SVG und wiederhole den Vorgang.
  8. Importiere jede Datei zusammen mit den anderen erneut, um die exakte Überlagerung zu prüfen.

Erstelle nicht für jede Auswahl ein neues, eng angepasstes Dokument. Dupliziere die ursprüngliche Zeichenfläche oder nutze eine Exporteinstellung, die ihre Grenzen erhält.

Manuelle Bearbeitung erlaubt dir auch, gleichfarbige Formen zusammenzuführen, wenn das die Produktion erleichtert. Vereinige sie nicht automatisch, wenn Löcher, Überlappungen, ursprüngliche Zeichenreihenfolge oder spätere Bearbeitung von getrennten Objekten abhängen.

Bereite die Dateien für Cricut vor

Cricuts aktuelle Anleitung zum Bild-Upload erklärt, dass SVGs mit Ebenen wie gestaltet hochgeladen werden und als gruppiertes Bild erscheinen, dessen Ebenen nach dem Aufheben der Gruppierung separat verschoben und skaliert werden können. Sie dokumentiert außerdem eine Grenze von 5.000 SVG-Pfaden.

Vor dem Schneiden:

  1. Lade alle getrennten Dateien hoch.
  2. Füge sie ohne Maßänderungen derselben Canvas hinzu.
  3. Bestätige, dass jede dieselbe Breite und Höhe meldet.
  4. Nutze Positionsregler oder eine gemeinsame Passermethode, wenn der Arbeitsablauf exakte Überlagerung braucht.
  5. Weise jeder Ebene die richtige Operation und Materialfarbe zu.
  6. Führe einen kleinen Test mit günstigem Material aus.

Cricuts Anleitung zu nicht unterstützten Elementen nennt Musterfüllungen, Verläufe, Beschneidungspfade, bearbeitbaren Text, verknüpfte Bilder und eingebettete nicht unterstützte Bilder ausdrücklich als Probleme bei Vektor-Uploads mit Ebenen. Wandle Text in Formen um und vereinfache diese Merkmale bewusst vor dem Export.

Gehe für eine breitere Prüfung die Anleitung zur SVG-Prüfung vor dem Schneiden durch. Wenn die getrennten Dateien in unerwarteter Größe importiert werden, nutze die Diagnose für falsch skalierte SVGs, bevor du einzelne Ebenen skalierst.

Häufige Fehler beim Trennen

Die Ebenen passen nicht mehr zusammen

Vermutlich wurde jede Farbe auf ihre eigenen Grenzen beschnitten oder in ein Dokument mit anderem Ursprung eingefügt. Exportiere erneut mit der ursprünglichen Zeichenfläche, Breite, Höhe und viewBox.

Aus einer „Farbe“ wurden mehrere Dateien

Die SVG enthält fast identische Werte. Entscheide, welche Werte dieselbe Rolle spielen, führe sie bewusst zusammen und wiederhole die Aufteilung.

Ein Verlauf ist verschwunden oder wurde abgelehnt

Ein Verlauf ist ein Paint Server, keine einzelne exakte einfarbige Füllung. Ersetze ihn durch bewusst gewählte flächige Bereiche, behalte den ursprünglichen Verlaufsablauf oder nutze eine Rasterproduktionsmethode, wenn Tonwerttreue wichtig ist.

Text oder Konturen fehlen

Bearbeitbarer Text und sichtbare Konturen haben andere Strukturen als gefüllte Umrisspfade. Wandle sie in einem Vektoreditor nur dann in Formen um, wenn das den Anforderungen des Ziels entspricht.

Cricut lehnt die Datei ab

Prüfe zuerst nicht unterstützte Funktionen und Pfadzahl. Eine Datei kann gültige SVG sein und trotzdem außerhalb des von Design Space akzeptierten Umfangs liegen.

FAQ

Kann eine SVG mehrere Farben enthalten? Ja. SVG-Formen können unterschiedliche Füllungen und Konturen nutzen, und SVG unterstützt auch Verläufe, Muster, Deckkraft und referenzierte Farbe. Trennung nach exakten Farben ist bei deckenden einfarbigen Füllungen am einfachsten.

Warum enthalten die getrennten Dateien so viel leeren Raum? Der leere Raum erhält die ursprüngliche Zeichenfläche und Koordinaten. So bleibt jede Farbe beim Import oder Zusammensetzen der Dateien ausgerichtet.

Werden ähnliche SVG-Farben automatisch zusammengeführt? Nein. PerfectVectors Farbtrenner gruppiert nur exakte Farben. Führe fast identische Farben vor dem Trennen bewusst zusammen, wenn sie zu einer Produktionsfarbe werden sollen.

Kann ich Verläufe in Farbdateien trennen? Nicht als Ebenen mit jeweils einer exakten einheitlichen Farbe, ohne die Grafik zu ändern. Ersetze den Verlauf durch gewählte flächige Bereiche, behalte den ursprünglichen Verlaufsablauf oder nutze eine Rasterausgabe, wenn weiche Tonwertdetails wichtig sind.

Ist der SVG Color Separator kostenlos? Ja. Unterstützte SVGs werden lokal ohne Konto oder Credits geprüft, in der Vorschau gezeigt, getrennt und heruntergeladen. Statische Seitenressourcen werden normal geladen, aber die Dokumentdaten bleiben im Browser.

Quellen

  1. PerfectVector — SVG Color Separator — Aktuelle Regeln für lokale Verarbeitung, exakte Farben, Ausrichtung, Kompatibilität und Download.
  2. W3C — SVG 2 painting — Definiert Füllungen, Konturen, einheitliche Farben, Verläufe, Muster, Deckkraft und referenzierte Farbe.
  3. Cricut — Bilder in Design Space hochladen — Aktuelles Importverhalten von SVGs mit Ebenen und Pfadgrenze.
  4. Cricut — Bild-Uploads: nicht unterstützte Elemente — Aktuelle Einschränkungen bei Verläufen, Mustern, Beschneidung, Text und Bildern für Vektor-Uploads mit Ebenen.

Bereit, jede Farbe ausgerichtet zu halten? Öffne den kostenlosen SVG Color Separator, prüfe die Vorschauen exakter Farben und die Abmessungen und lade erst herunter, wenn die gemeinsame Zeichenfläche deine Prüfung bestanden hat.

Mehr aus dem Blog

SVG in passgenaue Farbdateien aufteilen