SVG AI
MCP-Dienst für Vektorverarbeitung und Bitmap-zu-SVG-Konvertierung.
Einführung
Die Vektorverarbeitung und die Konvertierung von Bitmap-Bildern in SVG stellen eine anhaltende technische Herausforderung im Bereich der digitalen Grafik dar. Bitmap-Bilder – Fotos, Scans, Screenshots – werden als Pixel gespeichert, ohne strukturelle Informationen über Formen, Konturen oder Objekte. Das SVG-Format (Scalable Vector Graphics) hingegen beschreibt ein Bild als eine Menge geometrischer Primitive – Linien, Bézierkurven, Kreise, Polygone – die durch präzise mathematische Beziehungen verbunden sind. Die Konvertierung einer Pixel- in eine Vektordarstellung erfordert daher eine komplexe inverse Analyse: die Extraktion der geometrischen Struktur aus einem Pixelraster, eine Operation, die das menschliche Gehirn intuitiv ausführt, die aber in der Computervision ein offenes Problem bleibt.
Die Grenzen bestehender Werkzeuge zeigen sich auf mehreren Ebenen. Manuelle Grafikeditoren wie Adobe Illustrator oder Inkscape bieten automatische Vektorisierungswerkzeuge, aber ihre Ergebnisse sind oft enttäuschend: Die generierten Pfade enthalten eine übermäßige Anzahl von Kontrollpunkten, die Kurven sind approximativ, und die Farben werden schlecht wiedergegeben. Eine einfache Strichzeichnung kann ein SVG von mehreren hundert Kilobyte produzieren, das mit Artefakten durchsetzt und schwer zu bearbeiten ist. Online-Automatiklösungen wiederum opfern Qualität zugunsten von Geschwindigkeit: Sie produzieren minderwertige Vektorisierungen ohne Optimierung, ohne Verständnis des semantischen Inhalts des Bildes und ohne Möglichkeit der Integration in professionelle Pipelines. Keiner dieser Ansätze erlaubt es, ein Logo von einem Foto, einen technischen Schaltplan von einer künstlerischen Illustration zu unterscheiden – jeder Bildtyp erfordert jedoch eine grundlegend andere Vektorisierungsstrategie.
SVG AI begegnet diesen Einschränkungen mit einem MCP-Dienst (Model Context Protocol), der auf Vektorverarbeitung und die Umwandlung von Bitmap-Bildern in SVG spezialisiert ist. Der Dienst bietet Fähigkeiten zur intelligenten Vektorisierung, Pfadvereinfachung, SVG-Code-Optimierung und Multiformat-Konvertierung über das MCP-Protokoll. Er unterscheidet sich von bestehenden Lösungen durch seine mehrschichtige Architektur, die Computervision, geometrische Analyse, künstliche Intelligenz und automatische Validierung kombiniert. Jede Stufe der Pipeline ist auf einen bestimmten Aspekt des Problems spezialisiert und optimiert, was eine für den professionellen Einsatz geeignete Ergebnisqualität gewährleistet.
Die Architektur von SVG AI basiert auf sechs miteinander verbundenen Verarbeitungsschichten. Die erste, die Erfassung und Vorverarbeitung, bereitet das Quellbild für die Vektoranalyse auf. Die Schritte umfassen die Größenänderung unter Beibehaltung des Seitenverhältnisses, die Konvertierung in Graustufen oder geeignete Farbräume, die Rauschreduzierung durch Gauß- oder Median-Filterung, die Anpassung von Kontrast und Helligkeit, die adaptive Binarisierung zur Trennung von Vorder- und Hintergrund sowie die Erkennung und Korrektur von Erfassungsfehlern wie Schräglage (Skew) oder Unschärfe. OpenCV ist der Eckpfeiler dieser Schicht und bietet eine umfassende Bibliothek bewährter Bildverarbeitungsalgorithmen.
Die zweite Schicht, die Analyse durch Computervision und Geometrie, untersucht das vorverarbeitete Bild, um eine strukturierte Repräsentation zu extrahieren. Sie erkennt Konturen mit Algorithmen wie Canny oder Sobel, identifiziert elementare geometrische Formen durch Hough-Transformation (Linien, Kreise, Ellipsen), segmentiert das Bild in homogene Regionen durch Region Growing oder Watershed, extrahiert Skelette und Mittellinien für längliche Formen und analysiert die Topologie der Objekte – Verwandtschafts-, Nachbarschafts- und Inklusionsbeziehungen zwischen den erkannten Formen. Diese Analyse erzeugt eine semantische Karte des Bildes, die als Grundlage für die Vektorkonturerstellung dient.
Die dritte Schicht, die eigentliche Vektorkonturerstellung, wandelt die Analysekarte in SVG-Primitive um. Sie beginnt mit der polygonalen Approximation der erkannten Konturen mit dem Douglas-Peucker-Algorithmus, um die Punktanzahl zu reduzieren und gleichzeitig die visuelle Treue zu bewahren. Die Bézierkurven werden dann durch Kleinste-Quadrate-Regression auf die Kontursegmente angepasst, mit Kontrolle der Tangenten und der Stetigkeit an den Verbindungsstellen. Die Schicht verwaltet die Rekonstruktion geschlossener Formen, die Erkennung von Löchern und Gegenformen sowie die Zuordnung visueller Attribute – Füll- und Konturfarben, Verläufe, Deckkraft. Jede generierte Primitive wird mit Vertrauensmetadaten gespeichert, die die Qualität der Anpassung angeben.
Die vierte Schicht, die Optimierung durch LLM, ist die zentrale Innovation von SVG AI. Ein spezialisiertes Mistral-Modell – feinabgestimmt auf einem Korpus von Millionen von SVG-Dateien – analysiert die rohe Vektorkontur, um geometrische Fehler zu erkennen: redundante Kontrollpunkte, degenerierte Kurven (Null-Länge), Selbstüberschneidungen, Tangentenunstetigkeiten, offene ungeschlossene Formen. Das LLM restrukturiert das SVG, indem es Primitive nach funktionaler Rolle gruppiert – Hintergrund, Ränder, Muster, Text – und redundante oder unnötige Elemente entfernt. Es ersetzt komplexe Pfadkombinationen durch einfachere SVG-Primitive, wenn möglich: Ein durch 16 Bézierpunkte angenäherter Kreis wird durch ein natives <circle>-Tag ersetzt, ein Rechteck durch ein <rect>-Tag, ein komplexer Pfad durch eine Kombination von Standardprimitiven. Schließlich reichert das LLM das SVG mit semantischen Metadaten an: Identifikation der dargestellten Objekte (Logo, Icon, Diagramm, Text), Annotation der Ebenen und Gruppen, Vorschlag von CSS-Klassennamen und logische Strukturierung des Dokuments.
Diese LLM-Optimierung bringt gegenüber rein algorithmischen Lösungen konkrete Vorteile. Die Größe der SVG-Dateien wird im Vergleich zu einer klassischen Potrace-Vektorisierung durchschnittlich um 40 bis 60 % reduziert, dank der Substitution von Primitiven und der intelligenten Eliminierung überflüssiger Punkte. Die Lesbarkeit des SVG-Codes wird erheblich verbessert: Die erzeugte Datei ist strukturiert, kommentiert und folgt den Domänenkonventionen, was sie für Menschen bearbeitbar macht. Die visuelle Qualität bleibt erhalten oder wird sogar verbessert, da das LLM geometrische Mängel korrigiert, die traditionelle Algorithmen nicht erkennen: mit bloßem Auge unsichtbare Kurvenverbindungen, die aber Mikrofehler bei der Darstellung erzeugen, suboptimal platzierte Kontrollpunkte, quasi-kreisförmige Formen, die nicht als Kreise erkannt werden.
Das Feintuning des Mistral-Modells auf einem spezialisierten SVG-Korpus ist ein Schlüsselaspekt der Systemleistung. Der Trainingskorpus umfasst Millionen von SVG-Dateien aus verschiedenen Quellen: Open-Source-Icon-Bibliotheken, technische Diagramme, Logos, Vektorillustrationen, Karten und Pläne. Jede Datei wird von ihrer Bitmap-Darstellung in verschiedenen Auflösungen begleitet, sodass das Modell die Beziehung zwischen einem Pixelbild und seiner optimalen Vektordarstellung lernen kann. Das Feintuning zielt auf mehrere Ziele ab: Korrektur geometrischer Fehler, Restrukturierung des SVG-Codes, Substitution von Primitiven, Generierung semantischer Metadaten und Größenoptimierung. Das Modell lernt auch, wiederkehrende Muster zu erkennen – Ränder, Hintergrundmuster, symmetrische Wiederholungen – und diese kompakt mit spezifischen SVG-Elementen wie <pattern>, <use> oder <symbol> darzustellen.
Die fünfte Schicht, die Validierung und Qualitätskontrolle, gewährleistet die Zuverlässigkeit des erzeugten Ergebnisses. Sie führt einen visuellen Vergleich zwischen dem Quell-Bitmap-Bild und der Darstellung des generierten SVGs durch und berechnet objektive Metriken: PSNR (Peak Signal-to-Noise Ratio) misst die Pixel-für-Pixel-Treue, SSIM (Structural Similarity Index) bewertet die Erhaltung der wahrgenommenen visuellen Struktur, und MSE (Mean Squared Error) quantifiziert den mittleren quadratischen Fehler. Die Akzeptanzschwellen sind je nach Verwendung parametrisierbar: Eine Logo-Vektorisierung erfordert einen SSIM über 0,98, während ein technischer Schaltplan eine niedrigere Schwelle tolerieren kann. Die Schicht erkennt auch strukturelle Anomalien – fehlende Primitive, übermäßige Verformungen, Farbinversionen, Positionsverschiebungen – und überprüft die Konformität des generierten SVG-Codes mit den W3C-Spezifikationen, einschließlich der Gültigkeit der XML-Syntax, des Fehlens veralteter Attribute und der Einhaltung der Best Practices für Barrierefreiheit. Ein zusammengesetzter Qualitätsscore wird aus all diesen Metriken berechnet, was die Einstufung jedes Ergebnisses und die automatische Wiederholung der Verarbeitung bei unzureichendem Score ermöglicht.
Die sechste Schicht, die Indexierung und Suche, ermöglicht die Nutzung der produzierten SVGs als wiederverwendbare Vektorbibliothek. Jedes SVG wird mit seinen semantischen Metadaten – dominante Formen, Farben, Inhaltstyp, Komplexität – in einer Vektordatenbank indexiert. Die Suchmaschine ermöglicht das Auffinden eines SVGs durch visuelle Ähnlichkeit: Ausgehend von einem Suchbild findet das System die ähnlichsten SVGs im latenten Raum. Die Suche durch Textbeschreibung wird ebenfalls unterstützt, dank der vom LLM generierten semantischen Embeddings. Diese Schicht verwandelt SVG AI in ein System zur Verwaltung von Vektor-Assets für Design- und technische Dokumentationsteams.
Die Orchestrierungs- und Workflow-Schicht über MCP bildet das Rückgrat von SVG AI. Das MCP-Protokoll stellt jede Fähigkeit – Vektorisierung, Optimierung, Validierung, Indexierung, Suche – als standardisiert aufrufbares Tool bereit. Workflows werden als Werkzeugsequenzen mit konfigurierbaren Parametern definiert: Ein typischer vollständiger Vektorisierungs-Workflow verkettet Erfassung, Analyse, Konturerstellung, LLM-Optimierung, Validierung und Indexierung in einer einzigen MCP-Anfrage. Teil-Workflows ermöglichen den Aufruf eines bestimmten Schritts, beispielsweise eine reine Optimierung eines bestehenden SVGs. Der Orchestrator verwaltet die Warteschlange, die Parallelisierung der Verarbeitungen, die Fehlerbehandlung und die Benachrichtigung über Ergebnisse. Jeder Workflow stellt Leistungsmetriken – Verarbeitungszeit, Ergebnisqualität, LLM-Kosten – über dedizierte MCP-Endpunkte bereit.
Die Anwendungsfälle von SVG AI decken ein breites Spektrum professioneller Anwendungen ab. Die Digitalisierung technischer Schaltpläne ist ein wiederkehrender Bedarf in Industrie und Technik: Architekturpläne, elektrische Schaltpläne, mechanische Diagramme, Prozesskarten. Diese Dokumente liegen oft in Papierform oder als eingescanntes Bild vor, und ihre Vektorisierung ermöglicht die Integration in technische Verwaltungssysteme, interaktive Handbücher oder weiterentwickelbare Dokumentationen. SVG AI bewahrt die Strichgenauigkeit, die Hierarchie der Beschriftungen und die Lesbarkeit technischer Symbole, wo generische Lösungen verworrene Konturen und unleserliche Legenden produzieren.
Die Vektorisierung von Logos und Illustrationen profitiert von der Fähigkeit von SVG AI, die semantische Struktur eines Bildes zu verstehen. Ein Logo ist keine bloße Ansammlung von Formen – es ist eine kohärente Menge von Symbolen, stilisierten Texten und grafischen Elementen, die mit absoluter Treue reproduziert werden müssen. SVG AI identifiziert Textbereiche, wiederholte Muster, Symmetrien und Ausrichtungen und produziert ein gebrauchsfertiges SVG für Druck, Web oder Beschilderung. Für Pläne und Karten bewältigt der Dienst die Vektorisierung von Bildern mit hoher Informationsdichte: geografische Karten, Grundrisse, Infrastrukturschaltpläne, Organigramme. Die LLM-Schicht ist in der Lage, eine kohärente visuelle Hierarchie wiederherzustellen, mit unterschiedlichen Strichstärken für Haupt- und Nebenadern, gleichmäßigen Füllfarben für homogene Bereiche und lesbarer Typografie für Beschriftungen.
Die technischen Vorteile von SVG AI sind auf mehreren Ebenen messbar. Die Vektorisierungsqualität übertrifft klassische Algorithmen dank der LLM-Optimierung, die strukturelle Mängel korrigiert und Primitive substituiert. Die Größe der SVG-Dateien wird um 40 bis 60 % reduziert, was die Lade- und Darstellungsleistung in Browsern und Anwendungen verbessert. Die semantische Strukturierung des SVG-Codes macht ihn für Designteams nutz- und veränderbar, im Gegensatz zu den unlesbaren Ausgaben automatischer Vektorisierer. Die MCP-Integration ermöglicht den Einsatz von SVG AI in jeder Pipeline, ohne grafische Oberfläche, ohne menschliche Interaktion und mit vollständiger Rückverfolgbarkeit der Operationen.
Die operativen Vorteile sind ebenso bedeutend. Die Stapelverarbeitung und Workflow-Orchestrierung automatisieren Vektorisierungsketten, die zuvor Stunden manueller Arbeit in Grafikeditoren erforderten. Die automatische Validierung garantiert ein konstantes Qualitätsniveau über alle Produktionen hinweg, ohne menschliches Eingreifen. Die Indexierung und Suche erleichtern die Wiederverwendung von Vektor-Assets und vermeiden die mehrfache Vektorisierung desselben Quellbildes. Der Einsatz als MCP-Dienst ermöglicht die Integration von SVG AI in CI/CD-Umgebungen: Grafische Assets werden bei Builds automatisch vektorisiert, mit einer Warnung bei Qualitätsverschlechterung. Schließlich bietet der Agentenansatz horizontale Skalierbarkeit: Der Dienst kann zur Verarbeitung großer Mengen dupliziert werden, mit einer vom Orchestrator verwalteten Warteschlange und Lastverteilung.
Fazit
Die Entwicklungsperspektiven des Projekts sind vielversprechend. Die kontinuierliche Verbesserung des spezialisierten SVG-Mistral-Modells durch Feintuning auf erweiterten Korpora wird noch höhere Qualitätsniveaus ermöglichen, insbesondere für schwierige Fälle wie komplexe Verläufe, Texturen, Schlagschatten und Transparenzen. Die Erweiterung auf andere Vektorformate als SVG – EPS, PDF, AI – wird für die Abdeckung von Verlagsketten und Druckflüssen untersucht. Die Generierung von SVGs aus Textbeschreibungen ohne Quellbild ist eine natürliche Weiterentwicklung, die vom Labor erforscht wird: Beschreibung eines Schaltplans in natürlicher Sprache und Erhalt eines strukturierten, gebrauchsfertigen SVGs. Schließlich wird die Integration mit Design-Assistenten einen Hin- und Rückweg zwischen KI und menschlichem Designer ermöglichen: Die KI schlägt eine Vektorisierung vor, der Designer passt an, die KI optimiert – eine Mensch-Maschine-Zusammenarbeit, die die Leistungsfähigkeit der automatischen Verarbeitung mit der menschlichen kreativen Expertise kombiniert.
Ziele
- 1Einen MCP-Dienst zur Bitmap-zu-SVG-Vektorisierung entwickeln
- 2Eine für den professionellen Einsatz geeignete Vektorisierungsqualität sicherstellen
- 3SVG-Ausgaben hinsichtlich Größe, Lesbarkeit und Leistung optimieren
- 4Batch-Verarbeitung und Pipeline-Integration unterstützen
- 5Fähigkeiten über das MCP-Protokoll für maximale Interoperabilität bereitstellen
Technische Architektur
MCP-Dienst implementiert in Python/TypeScript. Die Vektorisierungspipeline nutzt Vision-Modelle zur Bildanalyse, Kantenerkennungsalgorithmen und Bézierkurven-Vereinfachung sowie ein LLM zur Optimierung und Strukturierung des generierten SVG-Codes.
Technologien
MCP
Protokoll zur Bereitstellung des Vektorisierungsdienstes
Python
Verarbeitungskern und Vektorisierungspipeline
OpenCV
Bildvorverarbeitung und Kantenerkennung
Mistral
LLM zur SVG-Optimierung und -Strukturierung
SVGO
Optimierung und Minifizierung von SVG-Code