So konvertierst du AI (Adobe Illustrator) in SVG
Was sind AI- und SVG-Dateien und warum sollte man sie konvertieren?
Eine AI-Datei ist das native Format von Adobe Illustrator und speichert Vektorgrafiken in einer proprietären Struktur, die nur Illustrator und einige wenige andere Apps vollständig verstehen können. Es ist leistungsstark und unterstützt Illustrator-spezifische Funktionen wie Live-Effekte, bearbeitbaren Text und komplexe Füllmethoden. Aber all diese Power ist in einer Blackbox eingeschlossen. AI-Dateien sind ein geschlossenes Ökosystem. Versuch mal, eine in einem Browser, einer Web-App oder in der Build-Pipeline eines Entwicklers zu verwenden, und du wirst feststellen, dass sie einfach gar nichts tut. SVG (Scalable Vector Graphics) hingegen ist der offene Standard. Dieses XML-basierte Format wird vom W3C gepflegt und von jedem modernen Browser nativ gerendert. Es skaliert von einem winzigen 16×16-Favicon bis zu einer riesigen 4K-Werbetafel, ohne auch nur ein bisschen an Schärfe zu verlieren. Da sein Inhalt nur aus reinem Text besteht, können Entwickler sogar Pfade, Farben und Animationen direkt im Code manipulieren. Ein als 8 KB großes SVG exportiertes Logo sieht in jeder Größe perfekt aus; dasselbe Logo als hochauflösendes PNG könnte leicht 200 KB oder mehr groß sein. Diese Konvertierung von AI zu SVG ist eine tägliche Aufgabe in realen Workflows. Ein Designer übergibt ein Logo an einen Webentwickler. Ein UI-Team benötigt Icon-Assets. Eine Druckagentur möchte Branding auf eine Website bringen. Das Problem ist nur, dass die Übersetzung nicht immer perfekt ist. Für Illustrator-spezifische Magie – Rasterfilter, bestimmte Verlaufsgitter, verknüpfte Schriftarten – gibt es kein direktes Äquivalent in SVG. Diese Elemente müssen entweder vor dem Export vereinfacht werden, oder sie werden von automatisierten Tools nur angenähert, manchmal schlecht. Wenn du das von Anfang an verstehst, ersparst du dir eine Menge Nacharbeit.
Die sauberste Methode: SVG direkt aus Adobe Illustrator exportieren
Wenn du Adobe Illustrator hast, ist der direkte Export der beste Weg, um ein sauberes, kontrollierbares Ergebnis zu erhalten. Der Prozess selbst ist einfach, aber im Einstellungsfenster kann einiges schiefgehen. Gehe zu **Datei > Exportieren > Exportieren als**, wähle SVG aus dem Format-Dropdown-Menü und klicke auf „Exportieren“. Illustrator zeigt dir dann den Dialog „SVG-Optionen“ an. Achte genau auf diese Einstellungen, denn sie sind wichtig. - **Styling**: „Präsentationsattribute“ ist die bessere Wahl, wenn das SVG später mit CSS gestaltet oder animiert werden soll. Wenn es sich um ein statisches Bild handelt, funktionieren beide Optionen gut. - **Schrift**: Stelle dies auf „In Pfade konvertieren“ ein. Ich sage es noch einmal: Wenn du nicht absolut sicher bist, dass die Umgebung des Endbenutzers genau die von dir verwendete Schriftart hat, wandle sie einfach in Pfade um. Dadurch werden die Buchstabenformen als Vektorpfade eingebettet und Probleme mit Schriftart-Abhängigkeiten vollständig umgangen. - **Bilder**: Wenn deine Grafik Rasterbilder wie Fotos oder Texturen enthält, wähle „Einbetten“. Das Verknüpfen erzeugt kleinere Dateien, schafft aber eine fragile Abhängigkeit von einem externen Dateipfad, der leicht kaputtgehen kann. - **Objekt-IDs**: Verwende „Ebenennamen“, wenn Entwickler bestimmte Elemente mit JavaScript oder CSS ansprechen müssen. Für statische Assets, bei denen jedes Byte zählt, ist „Minimal“ in Ordnung. - **Dezimalstellen**: Ein Wert von 2 ist für Bildschirmgrafiken fast immer die richtige Wahl. Eine Reduzierung auf 1 spart ein paar Bytes, kann aber komplexe Kurven sichtbar verzerren. Bleib bei 2. - **Minimieren**: Aktiviere diese Option immer für Produktions-Assets. Sie entfernt Leerräume und Kommentare und verringert die Dateigröße um beachtliche 10–20 %. Bevor du überhaupt zum Exportdialog kommst, gibt es einen entscheidenden Vorbereitungsschritt. Du musst alle Live-Effekte, die sich nicht gut in SVG übersetzen lassen, reduzieren oder umwandeln (mit **Objekt > Aussehen umwandeln**). Ein Schlagschatten-Effekt aus Illustrator zum Beispiel wird entweder verschwinden oder in ein klobiges Rasterbild in deinem SVG umgewandelt. Jeder, der schon mal eine sogenannte Vektordatei geöffnet hat, nur um ein verschwommenes JPEG darin zu finden, kennt diesen Schmerz nur zu gut. Keines dieser Ergebnisse ist das, was du für eine skalierbare Grafik willst.
AI online in SVG konvertieren mit CocoConvert
Seien wir mal ehrlich: Nicht jeder hat ein aktives Adobe Creative Cloud-Abonnement. Selbst wenn, manchmal braucht man einfach eine schnelle Konvertierung auf einem Rechner ohne installiertes Illustrator. Für diese Momente ist ein Online-Konverter die praktischste Lösung, und CocoConvert erledigt den Job. Der Prozess bei [CocoConverts AI-zu-SVG-Konverter](/convert/ai-to-svg) ist total einfach: Lade deine AI-Datei hoch, warte einen Moment, bis sie verarbeitet ist, und lade das resultierende SVG herunter. Keine Software, keine Anmeldung für Standardkonvertierungen. Natürlich gibt es ein paar Grundregeln. CocoConvert verarbeitet Dateien bis zu 100 MB, was für die meisten AI-Dokumente mehr als genug ist. Nur die komplexesten Druckdateien, die mit hochauflösenden Bildern vollgestopft sind, werden dieses Limit überschreiten, und diese sollten sowieso in Illustrator bearbeitet werden. Was funktioniert am besten? Flache Vektorgrafiken. Logos, Icons und Illustrationen, die aus einfachen Pfaden und simplen Verläufen aufgebaut sind, werden wunderbar konvertiert. Wenn deine AI-Datei hauptsächlich aus sauberen Vektorformen mit soliden Füllungen und Konturen besteht, kannst du ein sehr genaues SVG erwarten. Wo du auf Probleme stoßen wirst, ist bei der proprietären Magie von Illustrator. Verlaufsgitter, komplexe Füllmethoden und Live-Effekte wie „Aufrauen“ haben kein direktes SVG-Äquivalent. CocoConvert nähert sie an, aber bei Grafiken, die stark auf diese Funktionen setzen, muss die Ausgabe möglicherweise manuell bereinigt werden. Dasselbe gilt für Schriftarten. Wenn deine AI-Datei Live-Text verwendet, der nicht in Pfade umgewandelt wurde, wird der Konverter eine Ersatzschriftart verwenden. Für präzise Typografie solltest du deinen Text in Illustrator immer in Pfade umwandeln, bevor du ihn hochlädst.
Kostenlose Alternativen verwenden: Inkscape und andere Tools
Inkscape ist ein fantastischer, kostenloser Open-Source-Vektoreditor, der AI recht gut in SVG konvertieren kann. Es ist ein unverzichtbares Tool für jeden, der regelmäßig mit Vektoren arbeitet, aber außerhalb des Adobe-Ökosystems lebt. In Inkscape öffnest du einfach die AI-Datei über **Datei > Öffnen** und speicherst sie sofort über **Datei > Speichern unter** wieder ab, wobei du SVG als Format wählst. Du wirst Optionen für „Einfaches SVG“ und „Inkscape SVG“ sehen; für die beste Kompatibilität mit Browsern und anderen Tools wähle immer „Einfaches SVG“. Aber es gibt einen riesigen Haken: die PDF-Kompatibilität. Die meisten Drittanbieter-Tools, einschließlich Inkscape, lesen nicht wirklich die nativen AI-Daten. Sie lesen einen PDF-Stream, den Illustrator in die Datei einbettet. Wenn die AI-Datei ohne die aktivierte Option „PDF-kompatible Datei erstellen“ gespeichert wurde, kann Inkscape sie nicht öffnen. Du bekommst nur eine leere Leinwand oder einen Fehler. Wenn dir ein Kunde eine AI-Datei schickt, die sich nicht öffnen lässt, ist das fast sicher der Grund. Du musst ihn bitten, sie mit aktivierter Option erneut zu speichern. Es gibt auch andere Tools. Affinity Designer, das man für einen einmaligen Kauf von etwa 70 € bekommt, hat einen ausgezeichneten AI-Import und erzeugt sehr sauberes SVG. Meiner Meinung nach ist es die beste langfristige Investition, wenn du nicht auf den Adobe-Zug aufgesprungen bist. Für Kommandozeilen-Junkies gibt es Tools wie `cairosvg` und `svg-convert`, aber sie erfordern oft, dass die AI-Datei zuerst in ein anderes Format konvertiert wird, was den Zweck eines einfachen Workflows zunichtemacht. Für eine schnelle, einmalige Konvertierung ist das Online-Tool von CocoConvert immer noch schneller, als Inkscape zu installieren und zu lernen. Wenn du das jedoch wöchentlich tun musst, wird es sich auszahlen, die Zeit in Inkscape oder das Geld in Affinity Designer zu investieren.
Häufige Probleme und wie du sie behebst
Die Konvertierung ist abgeschlossen, aber das SVG sieht ... falsch aus. Das passiert. Hier sind die üblichen Verdächtigen und wie du sie behebst. **Fehlende oder ersetzte Schriftarten**: Du öffnest das SVG und deine wunderschöne, sorgfältig ausgewählte Schriftart wurde durch eine generische Systemschrift ersetzt. Die Lösung ist, die Schriftart irrelevant zu machen. Wähle vor der Konvertierung deinen gesamten Text in Illustrator aus und wandle ihn in Pfade um (**Schrift > In Pfade umwandeln** oder Shift+Ctrl+O / Shift+Cmd+O). Das verwandelt Buchstaben in einfache Vektorpfade und beseitigt die Schriftartabhängigkeit. **Raster-Artefakte im SVG**: Die Datei soll ein Vektor sein, aber du siehst verschwommene Pixel oder die Dateigröße beträgt schockierend viele Megabytes. Das ist ein klassisches Anzeichen dafür, dass Illustrator-Effekte beim Export gerastert wurden. Die Lösung ist, es selbst zu tun, aber besser. Gehe in Illustrator vor dem Export zu **Objekt > Aussehen umwandeln**. Dies wandelt die meisten Live-Effekte in ihre Vektorpfad-Äquivalente um. **Farben sehen anders aus**: Das leuchtende Blau deiner Marke sieht jetzt matt und gedämpft aus. Das ist wahrscheinlich ein Problem mit dem Farbraum. Illustrator verwendet für Druckarbeiten oft standardmäßig CMYK, aber SVG ist ein Webformat und lebt in einer RGB-Welt. Die Lösung ist, den Farbmodus des Dokuments in Illustrator über **Datei > Dokumentfarbmodus > RGB-Farbe** zu ändern, bevor du exportierst. **SVG-Datei ist riesig**: Ein einfaches Logo, das 15 KB groß sein sollte, ist irgendwie 2 MB groß. Das deutet normalerweise auf eingebettete Rasterbilder, eine übermäßige Dezimalpräzision oder komplexe Verlaufsgitter hin, die nicht vereinfacht wurden. Die Lösung ist, mit aktivierter Minimierung neu zu exportieren, die Dezimalstellen auf 2 zu reduzieren und komplexe Objekte zu vereinfachen oder umzuwandeln, bevor du beginnst. **Leere Ausgabe von Online-Konvertern**: Du lädst deine AI-Datei hoch und bekommst ein leeres SVG zurück. Erinnerst du dich an die PDF-Kompatibilitätseinstellung, über die wir gesprochen haben? Genau hier rächt es sich. Die AI-Datei wurde wahrscheinlich ohne das aktivierte Kästchen „PDF-kompatible Datei erstellen“ gespeichert, und der Konverter hat nichts zu lesen. Die einzige Lösung ist, die ursprüngliche AI-Datei mit dieser aktivierten Option neu zu speichern.
Dein SVG nach der Konvertierung optimieren
Veröffentliche das SVG noch nicht einfach so. Eine frisch exportierte Datei, selbst aus Illustrator, ist oft mit redundantem Code aufgebläht, der das Gewicht ohne visuellen Nutzen erhöht. Für die Webnutzung ist es ein nicht verhandelbarer Schritt, dein SVG durch einen Optimierer laufen zu lassen. **SVGO** ist der Industriestandard für die SVG-Optimierung. Es ist ein Node.js-Tool, aber seine Engine treibt das unglaublich nützliche Web-Tool auf jakearchibald.github.io/svgomg an. Lade einfach dein konvertiertes SVG hoch, und SVGOMG gibt dir eine Live-Vorschau und einen Schieberegler, um die Dateigrößeneinsparungen in Echtzeit zu sehen. Bei den meisten Assets kannst du sicher Optionen aktivieren, um Kommentare und Metadaten zu entfernen, nutzlose Gruppen zusammenzufassen, Pfade zusammenzuführen und leere Attribute zu entfernen. Es ist nicht ungewöhnlich, dass die Dateigröße um 30–60 % reduziert wird. Sei nur vorsichtig bei Optionen wie „IDs entfernen“, wenn deine Entwickler planen, bestimmte Elemente mit Code anzusprechen. Vermeide ebenfalls aggressives Zusammenführen von Pfaden, wenn das SVG für eine Animation bestimmt ist; du kannst keine Pfade animieren, die zu einem einzigen Klecks zusammengefügt wurden. Für Produktions-Web-Assets musst du auch entscheiden, ob das SVG inline (Code direkt ins HTML eingefügt) oder extern (über ein `<img>`-Tag oder CSS verlinkt) sein wird. Inline-SVGs sind großartig, weil sie von deiner Haupt-CSS-Datei gestylt werden können, aber sie vergrößern das HTML-Dokument und werden nicht separat zwischengespeichert. Externe SVGs werden vom Browser gecacht, sind aber schwieriger mit CSS zu manipulieren. Ein letzter Check: Validiere dein endgültiges SVG mit einem Tool wie dem W3C Markup Validation Service. Jeder, der schon mal eine Stunde damit verbracht hat, ein SVG zu debuggen, das in Chrome perfekt, aber in Safari eine totale Katastrophe ist, kennt den Wert dieses Schritts. Eine schnelle Validierung fängt fehlerhaften Code ab, bevor er zu einem Notfall in der Produktion wird.
Die richtige Methode für deine Situation wählen
Also, was ist der beste Weg, eine AI-Datei in SVG zu konvertieren? Letztendlich kommt es darauf an, wer du bist und was du erreichen willst. **Für professionelle Designer mit Illustrator:** Mach es selbst. Der einzige Weg, eine perfekte Übersetzung komplexer Grafiken mit Effekten, Verläufen und benutzerdefinierten Schriftarten zu garantieren, besteht darin, die Vorarbeit zu leisten – Text in Pfade umwandeln, Aussehen umwandeln, auf RGB umschalten – und den eigenen SVG-Exportdialog von Illustrator zu verwenden. Du hast die ultimative Kontrolle – nutze sie. **Für Entwickler mit einer Deadline:** Dein Designer hat dir gerade eine AI-Datei zugeworfen und ist gegangen. Keine Panik. Für unkomplizierte Assets wie Logos und Icons ist das [CocoConvert AI-zu-SVG-Tool](/convert/ai-to-svg) dein schnellster Weg. Es ist schnell, erfordert keine Software und erledigt den Job, wenn du es nicht mit hyperkomplexen Grafiken zu tun hast. **Für Open-Source-Enthusiasten oder preisbewusste Kreative:** Du machst das öfter, willst aber nicht die Adobe-Steuer zahlen. Inkscape ist deine Antwort. Es ist eine leistungsstarke und kostenlose Alternative, aber du musst die Anforderung der PDF-Kompatibilität im Auge behalten. Wenn deine Quelldateien nicht korrekt gespeichert sind, wird es nicht funktionieren. Egal, für welche Methode du dich entscheidest, überprüfe immer deine Arbeit. Öffne das endgültige SVG mindestens in Chrome und Firefox. Stelle sicher, dass die Farben stimmen, der Text scharf ist und es sauber skaliert. Eine zweiminütige Sichtprüfung fängt die meisten Konvertierungsprobleme ab, bevor sie zu einem Problem werden, das jemand anderes debuggen muss.