SVG (Scalable Vector Graphics) ist ein Vektorformat fürs Web: Es bleibt beim Skalieren scharf, lässt sich oft per CSS einfärben und ist für Icons oder Logos meist die beste Wahl. Trotzdem kommen SVGs aus Adobe Illustrator häufig „aufgebläht“ im Code an oder machen im Browser Probleme (falsche Größe, unscharfe Kanten, fehlende Schriften). Der Schlüssel liegt weniger im „Export klicken“, sondern in sauberen Ausgangsdaten und ein paar gezielten Einstellungen.
Diese Anleitung zeigt einen robusten Workflow, der in Teams und Projekten zuverlässig funktioniert: von der Datei-Vorbereitung über den Export bis zu Checks, damit das SVG im Web wirklich so ankommt, wie es gedacht ist.
Warum SVG aus Illustrator manchmal Probleme macht
Viel zu großer Code trotz „kleiner Grafik“
Illustrator kann beim Export zusätzliche Informationen mitschreiben: Metadaten, unnötige Gruppen, unsichtbare Objekte oder komplexe Pfade. Für Web-Projekte zählt aber: Je weniger Knoten (Ankerpunkte) und je weniger „Ballast“, desto kleiner und besser wartbar ist das Ergebnis.
Falsche Größe im Browser (zu groß/zu klein)
Ein häufiger Stolperstein ist das Zusammenspiel aus Zeichenfläche (Artboard), ViewBox und festen Breiten/Höhen. Wenn die Zeichenfläche nicht sauber zur Grafik passt oder der Export fixe Maße setzt, kann das SVG im Layout schwer kontrollierbar werden.
Schriften und Linien verhalten sich anders als erwartet
Text ist im Web nur dann stabil, wenn er als Webfont verfügbar ist oder als Pfad exportiert wird. Und Linien (Strokes) können je nach Skalierung unerwartet dick wirken, wenn sie nicht bewusst behandelt werden. Für UI-Icons ist oft ein Umwandeln in Flächen sinnvoll.
Datei vorbereiten: So wird das SVG „webtauglich“
Zeichenfläche auf Inhalt trimmen
Vor dem Export sollte die Zeichenfläche exakt die gewünschte Grafik umschließen. Das ist wichtig, weil der SVG-Ausschnitt meist von der Zeichenfläche bestimmt wird. Ist die Zeichenfläche zu groß, bekommt das SVG zu viel „Luft“ und wirkt im Web falsch ausgerichtet.
Tipp: Eine präzise Zeichenfläche spart später CSS-Korrekturen und vermeidet Layout-Überraschungen.
Pfade vereinfachen (ohne Qualität zu verlieren)
Icons und Logos profitieren von möglichst einfachen Pfaden. In Illustrator entstehen unnötig viele Punkte oft durch Import (z. B. aus PDF), durch übertriebene Effekte oder durch manuelles Zeichnen ohne Raster/Guides.
Praktisch ist das Reduzieren von Punkten, wo es ohne sichtbaren Qualitätsverlust möglich ist. Das verbessert die Dateigröße und macht das SVG leichter zu bearbeiten, falls später Anpassungen nötig sind.
Transparenzen, Effekte und Aussehen bewusst „flach“ halten
Viele Illustrator-Effekte sind fürs Web nicht 1:1 geeignet. Manche werden beim SVG-Export in komplexe Konstrukte übersetzt oder wirken im Browser anders. Für UI-Grafiken gilt: lieber klare Flächen, simple Formen, wenige Ebenen.
Text und Konturen: früh entscheiden
Für Logos/Icons ist Text als Pfad am robustesten, weil keine Schriftdatei nötig ist. Für editierbare Web-Texte ist SVG-Text dagegen selten die beste Lösung. Bei Linien gilt: Wenn ein Icon in vielen Größen genutzt wird, kann es sinnvoll sein, Konturen in Flächen umzuwandeln, damit die Optik konstant bleibt.
Illustrator-Export: Die wichtigsten Einstellungen verständlich erklärt
„Exportieren als“ vs. „Für Bildschirme exportieren“
Für einzelne SVGs funktioniert „Exportieren als“ zuverlässig. Bei mehreren Icons/Varianten ist „Für Bildschirme exportieren“ praktisch, weil mehrere Zeichenflächen in einem Rutsch ausgegeben werden können. Entscheidend sind jedoch die SVG-Optionen danach.
SVG-Optionen, die wirklich zählen
Beim SVG-Export entscheidet ein kleiner Dialog über die Web-Qualität. Diese Punkte sind in der Praxis am wichtigsten:
- SVG-Export Einstellungen: Ziel ist ein schlanker, kompatibler Output (nicht „alles mitspeichern“).
- ViewBox: Aktiv lassen, damit das SVG responsiv skalieren kann. Ohne ViewBox wird das Verhalten im Web oft unflexibel.
- Dezimalstellen: Weniger Dezimalstellen machen Dateien kleiner. Für viele Icons reichen wenige Stellen; bei sehr feinen Illustrationen kann mehr nötig sein.
- Schriften: Entweder als Pfade exportieren (robust) oder konsequent als Text lassen (nur sinnvoll, wenn Webfonts sauber eingebunden sind).
- Bilddaten: Eingebettete Rasterbilder (z. B. Texturen) blähen das SVG stark auf. Für Web-Icons besser vermeiden.
Mehrere Icons sauber ausgeben: Zeichenflächen als „Einheiten“
Wenn ein Icon-Set exportiert wird, sollten Icons jeweils auf eigenen Zeichenflächen liegen. So entstehen mehrere Dateien mit konsistenter Größe und Ausrichtung. Ein sauberer Startpunkt ist z. B. ein Dokument, in dem alle Zeichenflächen die gleiche Grundgröße haben (etwa für ein Icon-System).
So geht’s: Schlankes SVG aus Illustrator in 7 Schritten
- Grafik finalisieren: keine versteckten Elemente, keine unnötigen Duplikate.
- Zeichenfläche an Inhalt anpassen (zu viel Rand vermeiden).
- Pfade prüfen und vereinfachen (unnötige Punkte entfernen, wo möglich).
- Text festlegen: entweder in Pfade umwandeln oder bewusst als Text behalten.
- Export: „Exportieren als…“ und Format SVG wählen.
- Im Optionsdialog ViewBox aktiv lassen und Dezimalstellen sinnvoll reduzieren.
- SVG im Browser testen (Drag & Drop in ein Browserfenster) und bei Bedarf nachjustieren.
Qualitätscheck nach dem Export: Was im Web sofort auffällt
Skalierung und Schärfe
SVG sollte beim Zoomen sauber bleiben. Wenn Kanten „wackeln“ oder unsauber wirken, liegt das oft an halben Pixeln. Für UI-Icons hilft es, Formen am Pixelraster auszurichten und mit klaren Größen zu arbeiten.
Farben: CSS-freundlich bleiben
Wenn ein SVG später per CSS eingefärbt werden soll, ist eine einfache Struktur wichtig. Häufig wird dafür eine einheitliche Füllfarbe genutzt, die im SVG als „currentColor“ gedacht ist. In Illustrator entstehen jedoch schnell mehrere Farbfelder oder harte Farbcodes pro Form. Je einheitlicher die Farbe im Export, desto leichter lässt sich später stylen.
Dateigröße und Lesbarkeit
Eine SVG-Datei ist im Kern Text. Wenn die Datei extrem groß wirkt, ist meist zu viel Detail enthalten (zu viele Pfadpunkte, eingebettete Bilder oder unnötige Gruppen). Für Web-Projekte lohnt sich ein kritischer Blick: Muss wirklich jedes Detail Vektor sein?
Mini-Tabelle: Typische Probleme und schnelle Lösungen
| Problem | Woran es meist liegt | Pragmatische Lösung |
|---|---|---|
| SVG hat zu viel Rand | Zeichenfläche ist größer als die Grafik | Zeichenfläche an Inhalt anpassen und neu exportieren |
| SVG lässt sich schlecht skalieren | ViewBox fehlt oder feste Maße dominieren | ViewBox aktiv exportieren und im Web ohne feste Höhe testen |
| Datei ist unerwartet groß | Zu viele Pfadpunkte/Metadaten/Bilddaten | Pfade vereinfachen, unnötige Elemente löschen, erneut exportieren |
| Schrift sieht im Browser anders aus | Schrift nicht verfügbar oder falsch eingebettet | Text in Pfade umwandeln (Logo/Icon) oder Webfont korrekt einbinden |
FAQ: Häufige Fragen zum SVG-Export aus Illustrator
Wann ist SVG besser als PNG?
Für Logos, Icons und einfache Illustrationen ist SVG meist ideal, weil es ohne Qualitätsverlust skaliert. Für Fotos oder sehr komplexe Texturen sind Rasterformate wie PNG/JPEG häufig sinnvoller.
Kann ein SVG „unscharf“ sein?
Ja, vor allem bei UI-Icons kann es passieren, dass Kanten durch ungünstige Positionen (halbe Pixel) nicht sauber wirken. Abhilfe schaffen klare Maße, Ausrichtung am Pixelraster und reduzierte Details.
Sollten Konturen in Flächen umgewandelt werden?
Für Icons, die in vielen Größen eingesetzt werden, ist das oft sinnvoll: Das Icon sieht dann konsistenter aus. Für Illustrationen mit variablen Strichstärken kann es besser sein, Konturen zu behalten.
Empfehlung der Redaktion: Einheitlicher Workflow für Teams
Wenn mehrere Personen SVGs liefern, entstehen schnell unterschiedliche Größen, uneinheitliche Farben und schwer wartbare Dateien. Bewährt hat sich ein gemeinsamer Standard: gleiche Zeichenflächen, klare Benennung, einheitliche Farbstrategie und eine kurze Prüfroutine. Für wiederkehrende Aufgaben hilft außerdem eine saubere Datei-Struktur in Illustrator, zum Beispiel mit klaren Ebenen und konsistenten Elementnamen.
Wer parallel oft für Web und Print exportiert, profitiert von einem klaren Export-Setup. Passend dazu hilft der Beitrag Photoshop Datei-Export für Web und Print, um Formate und Anforderungen besser einzuordnen. Und wenn häufig Layout-Assets zentral gesammelt werden, kann ein strukturierter Ansatz mit Adobe Bibliotheken für Markenassets den Abstimmungsaufwand deutlich senken.
Für Illustrator-spezifische Ordnung im Dokument ist außerdem ein aufgeräumter Aufbau entscheidend, ähnlich wie bei Ebenen organisieren für schnelle Workflows (Prinzip: klare Benennung, Gruppenlogik, keine „Leichen“ im Dokument). So wird auch der SVG-Export planbarer.
SVG aus Illustrator ist dann stark, wenn die Datei bewusst vorbereitet wird. Saubere Zeichenflächen, reduzierte Pfade und passende Export-Optionen sorgen dafür, dass das Ergebnis im Web leicht, scharf und gut zu stylen bleibt.
