Ein Schwarz-Weiß-Bild in ein SVG umzuwandeln ist vor allem die Frage, wo die Kante verläuft. Ein Farbbild ist schwieriger: Jedes Pixel muss einer Farbfläche zugeordnet werden, jede Fläche braucht einen sauberen Umriss, und benachbarte Flächen müssen exakt aneinanderstoßen. Die meisten unsauberen Farbvektoren – Farbsäume um Formen, Hunderte winziger Krümel, haarfeine Lücken, riesige Dateien – gehen auf eine Handvoll vorhersehbarer Probleme zurück.
Dieser Artikel erklärt diese Probleme nacheinander: wie sie in einer fertigen Datei aussehen und wie SvgCraft damit umgeht, wenn es ein KI-Bild in ein farbiges SVG umwandelt. Wenn sich eine nachgezeichnete Illustration nur schwer schneiden, drucken oder bearbeiten lässt, steckt meist eines dieser fünf Probleme dahinter.
Warum sich ein Farbbild nicht sauber in Vektorformen übersetzen lässt
Ein Rasterbild ist ein Raster aus Pixeln. Ein SVG beschreibt Formen: Pfade mit einer Füllfarbe. Um vom einen zum anderen zu kommen, muss ein Konverter entscheiden, welche Pixel zusammengehören, um jede Gruppe eine Grenze ziehen und ihr eine Farbe zuweisen.
Bei Schwarz-Weiß-Motiven gibt es nur zwei Gruppen, die Hauptaufgabe sind also glatte Kanten. Bei Farbmotiven muss der Konverter zusätzlich entscheiden, wie viele Farben es gibt, welches Pixel zu welcher Farbe gehört und wie die Grenzen aneinanderstoßender Flächen zusammenpassen. Jede dieser Entscheidungen kann so danebengehen, dass man es in der fertigen Datei sieht.
Die fünf Probleme hinter unsauberen Farb-SVGs
1. Geglättete Kanten erzeugen Farbsäume und zusätzliche Farbstreifen
Bilder werden mit Kantenglättung (Anti-Aliasing) dargestellt: An der Grenze zwischen einer roten und einer blauen Form sind die Pixel Mischungen beider Farben, damit die Kante auf dem Bildschirm glatt wirkt. Diese Zwischenpixel sind weder rot noch blau. Ein einfacher Tracer behandelt sie als eigene Farbe und zeichnet einen dünnen zusätzlichen Streifen entlang der Kante.
In der fertigen Datei sieht das aus wie eine dunkle oder schmutzige Kontur um die Formen oder wie ein heller Saum um Motive, die auf weißem Hintergrund lagen. Wenn du hineinzoomst oder das Design schneidest, wird der Streifen zu einer eigenen, sehr dünnen Form.
2. Verläufe, Schattierungen und Texturen haben keine flachen Flächen
Ein Farbverlauf ändert die Farbe mit jedem Pixel ein wenig. Weiche Schattierungen, Bildrauschen und Papiertextur tun dasselbe, nur unregelmäßiger. Es gibt keine flache Fläche, die sich nachzeichnen ließe. Ein Konverter fasst deshalb entweder alles zu wenigen Stufen zusammen, die wie posterisiert aussehen, oder er erhält die Details, indem er Hunderte oder Tausende winziger Formen erzeugt.
Der zweite Fall ist der häufigere. Die Datei wird groß, öffnet sich langsam und lässt sich kaum bearbeiten, weil du für eine einzige Farbänderung Dutzende Fragmente auswählen musst.
3. Benachbarte Flächen brauchen eine gemeinsame Grenze
Wo zwei Farben aneinanderstoßen, braucht die Vektordatei eine einzige Grenze, der beide Formen folgen. Zeichnet ein Tool jede Farbe getrennt nach, wird jeder Umriss für sich berechnet, und die beiden passen selten genau zusammen. Das Ergebnis ist entweder eine haarfeine Lücke, durch die der Hintergrund scheint, oder eine kleine Überlappung.
Lücken übersieht man am Bildschirm leicht, im Druck, auf einem Sticker oder auf einer geschnittenen Ebene fallen sie sofort auf. Ungewollte Überlappungen, also schmale Streifen, die nicht zum Design gehören, machen das Schneiden in Ebenen weniger berechenbar.
4. Beim Entfernen des Hintergrunds können weiße Details verschwinden
Die meisten Farbdesigns brauchen einen transparenten Hintergrund, damit sie auf ein Shirt, einen Stickerbogen oder eine Webseite passen. Der einfache Ansatz ist, jede weiße Fläche zu löschen. Damit verschwinden aber auch weiße Details, die zum Motiv gehören: das Weiß der Augen, Glanzlichter, weiße Schrift in einem Badge.
Richtig ist, nur den Hintergrund rund um das Design zu entfernen und weiße Flächen zu behalten, die vom Motiv umschlossen sind. So arbeitet SvgCraft: Der Seitenhintergrund wird entfernt, während umschlossene weiße Details wie Augen und Glanzlichter erhalten bleiben.
5. Krümel und gezackte Ecken machen Dateien schwer nutzbar
Kleine Gruppen verirrter Pixel werden zu winzigen, isolierten Formen. Ecken, die scharf sein sollten, werden rund oder treppenförmig, und Kurven bekommen kleine Wellen. Am Bildschirm ist das kaum der Rede wert. Auf einem Schneideplotter ist jeder Krümel ein eigener Schnitt, und im Editor ist jeder ein Objekt, das du suchen und löschen musst. Bei Farbmotiven verfeinert SvgCraft das Ergebnis mit Modellen des maschinellen Lernens: schärfere Ecken, weniger verirrte Krümel und sauberere Formen.
Wie SvgCraft mit farbigen SVGs umgeht
Im Tab Farbe bittet SvgCraft das externe Bildmodell zuerst um flache Motive mit höchstens 8 Vollfarben und ohne Verläufe. Damit ist der Großteil von Problem 2 vermieden, bevor das Nachzeichnen überhaupt beginnt. SvgCraft nutzt seine eigene, intern entwickelte Vektorisierungs-Engine, um das generierte Bild in ein sauberes SVG umzuwandeln. Bei Farbmotiven baut sie flache Farbflächen mit sauberen gemeinsamen Kanten auf und zielt damit auf die Probleme 1 und 3: keine dünnen zusätzlichen Farbstreifen an den Kanten und keine haarfeinen Lücken zwischen benachbarten Formen. Verfeinerung und Hintergrundentfernung kümmern sich dann wie oben beschrieben um die Probleme 5 und 4. Den kompletten Ablauf Schritt für Schritt findest du unter Wie SvgCraft KI-Bilder in saubere SVGs umwandelt.
Wo die Grenzen liegen
Farbige SVGs sind in SvgCraft für flache, grafische Motive gedacht. Die 22 Farbstile – darunter Flat Illustration, Sticker, Kawaii, Vintage Badge, Stained Glass, Low Poly und Pixel Art – bauen alle auf Vollfarbflächen auf; der Überblick über die farbigen SVG-Stile erklärt, wann du welchen nimmst. Brauchst du fotografische Details, weiches Licht oder malerische Textur, ist ein flacher Vektor für dieses Bild das falsche Format, egal mit welchem Tool.
Bei einem hochgeladenen Bild spielt die Vorlage weiterhin eine Rolle. Das Bild wird zuerst als flache Flächen neu gezeichnet, fotografische Feinheiten und subtile Tonwertunterschiede werden also vereinfacht. Eine Vorlage mit klaren Formen und deutlich unterscheidbaren Farben behält mehr von ihrem Charakter als ein unruhiges, kontrastarmes Foto. Was du bei Textprompts angeben solltest, zeigt So schreibst du Prompts für saubere farbige SVGs.
Für einfarbige Arbeiten – Schneideplotter, Vinylfolie, Lasergravur – passt der Tab Schwarz-Weiß besser. Ein Schwarz-Weiß-Design besteht nur aus schwarzen Motivflächen auf transparentem Hintergrund, es gibt also keine Farbentscheidungen zu treffen. Die 8 Schwarz-Weiß-Stile kosten 1 Credit pro Generierung, die Farbstile 2 Credits.
So prüfst du ein farbiges SVG selbst
Egal mit welchem Tool die Datei entstanden ist: Diese drei Prüfungen zeigen, ob die oben genannten Farbprobleme gelöst sind.
- Zoome an eine Kante zwischen zwei Farben heran. Achte auf eine dünne dritte Farbe entlang der Grenze oder eine haarfeine Lücke, durch die der Hintergrund scheint.
- Prüfe die weißen Details. Augen, Glanzlichter und weiße Schrift sollten weiß sein und keine transparenten Löcher.
- Wähle eine Farbe aus. In einer sauberen Datei sind das eine oder wenige Formen, nicht Dutzende Fragmente.
Für Krümel, Dateigröße und den Rest gehst du die vollständige Checkliste für saubere SVGs durch. In SvgCraft kannst du diese Prüfungen im Editor SVG bearbeiten direkt im Browser machen und gefundene Fehler beheben.
Probier es mit deinem eigenen Design aus
Um das Ergebnis mit deiner eigenen Idee zu sehen, öffne die SvgCraft-Projekte, wähle im Tab Farbe einen Stil und probiere einen Prompt aus.
So ist dieser Artikel entstanden: mit KI-Unterstützung entworfen und vom SvgCraft-Team anhand des aktuellen Produktverhaltens von SvgCraft geprüft.