SVG-Illustrationen fürs Webdesign – Stil, Export, Pflege

Ein Icon-Set ist oft schnell gebaut – aber bei Illustrationen zeigen sich kleine Brüche sofort: unterschiedliche Strichstärken, unruhige Kurven, zu komplexe Formen oder ein Export, der im Browser plötzlich anders wirkt. Genau hier hilft ein klarer Prozess. Dieser Artikel erklärt, wie SVG-Illustrationen für Websites so entstehen, dass sie konsistent aussehen, performant bleiben und sich später ohne Chaos erweitern lassen.

Warum SVG-Illustrationen im Web so oft „fast richtig“ wirken

Illustrationen sind meist größer als Icons und haben mehr Details. Dadurch fallen Abweichungen stärker auf: ein Schatten ist anders, eine Linie wirkt dicker, Kurven sind „knickig“, Farben weichen minimal ab. Zusätzlich kommen technische Effekte dazu: Browser rendern feine Linien je nach Skalierung etwas unterschiedlich, und manche Export-Einstellungen erzeugen unnötig viele Punkte (Ankerpunkte) in den Pfaden.

Wer das früh plant, spart später viel Zeit: weniger Nacharbeit, weniger Diskussionen mit der Entwicklung und weniger „Warum sieht das auf mobilen Geräten anders aus?“. Besonders wichtig ist eine klare Definition für SVG-Illustrationen: Welche Stilelemente sind fix, welche dürfen variieren?

Typische Ursachen für inkonsistente Web-Illustrationen

• Uneinheitliche Strichstärken (z. B. mal 2 px, mal 2,5 px)
• Unterschiedliche Ecken und Kappen (rund vs. eckig)
• Zu viele Farben oder wechselnde Sättigung
• Komplexe Pfade mit sehr vielen Punkten (schwer zu pflegen, schlechter komprimierbar)
• Details, die in kleinen Größen „zumatschen“

Stil festlegen: Ein kleines Regelwerk reicht oft schon

Für konsistente Illustrationen braucht es kein 40-seitiges Brand-Manual. Ein schlankes Set an Regeln reicht – solange es wirklich eingehalten wird. Das Ziel: Jede neue Illustration soll aussehen, als käme sie aus derselben Hand, auch wenn mehrere Personen daran arbeiten.

Einfacher Stilbaukasten für Illustrationen

Diese Punkte lassen sich schnell definieren und später leicht prüfen:

• Stilguide: „Outline“, „Filled“, oder „Hybrid“ (Kontur + Flächen) – möglichst nicht mischen.
• Strich: feste Strichstärke(n), z. B. eine Hauptstärke und eine dünnere für Details.
• Linienenden und Ecken: „round“ oder „butt/miter“ – einheitlich bleiben.
• Formensprache: eher geometrisch (Kreise/Quadrate) oder organisch (weiche Freiformen).
• Farben: definierte Palette (Primär/Neutral/Akzent) und klare Regeln, wann Akzentfarben eingesetzt werden.
• Licht/Schatten: entweder keine Schatten oder immer gleiche Richtung/Intensität.

Hilfreich ist ein „Starter-Set“ aus 3–5 Beispielillustrationen, die als Referenz dienen. Diese Beispiele sollten typische Motive abdecken (Person, Objekt, Szene), damit neue Motive nicht aus dem Rahmen fallen.

Skalierung mitdenken: Detail-Level definieren

Illustrationen werden auf Websites oft in mehreren Größen genutzt: als Headergrafik, in Cards oder neben kurzen Absätzen. Deshalb lohnt sich eine Regel für den Detailgrad:

• Groß (Hero/Teaser): mehr Details möglich.
• Mittel (Abschnittsbilder): klare Silhouette, reduzierte Details.
• Klein (z. B. in Listen): stark vereinfachte Variante oder Icon verwenden.

Wenn es schon eine Icon-Bibliothek gibt, sollte der Illustrationsstil bewusst darauf abgestimmt werden. Passend dazu: UI-Icons erstellen – konsistente Sets für Web und App.

Produktion in Figma und Illustrator: sauber zeichnen, später leichter exportieren

Ob Figma oder Illustrator besser passt, hängt vom Team ab. Wichtig ist weniger das Tool, sondern die Disziplin beim Aufbau: klare Ebenen, sinnvolle Gruppen und wiederverwendbare Elemente. Das spart beim Export und bei späteren Änderungen.

Pfadqualität: weniger Punkte, bessere Kurven

Viele „wabbelige“ Illustrationen entstehen, weil Pfade zu viele Punkte haben. Das erschwert Anpassungen und erhöht oft auch die Dateigröße. Gute Praxis: Kurven lieber mit wenigen, gut gesetzten Punkten bauen. Wenn eine Form „zittert“, ist das meist ein Zeichen für zu viele oder schlecht positionierte Punkte.

Auch hilfreich: Wiederkehrende Elemente als Komponenten/Symbole anlegen (z. B. Hände, Blätter, Geräte), damit Proportionen und Stil konstant bleiben.

Strokes und Outlines: früh entscheiden

Eine häufige Frage ist, ob Striche (strokes) im SVG als echte Striche bleiben oder in Flächen umgewandelt werden (outline). Beides ist möglich:

• Striche beibehalten: leichter anpassbar (Farbe, Stärke), aber sensibler bei Skalierung.
• In Flächen umwandeln: stabiler in der Darstellung, aber schwerer zu editieren.

Für Teams mit häufiger Weiterentwicklung ist es oft sinnvoll, die editierbare Originaldatei (Figma/AI) als Quelle zu behalten und den Web-Export als „Build-Artefakt“ zu betrachten.

Export, der wirklich webtauglich ist

Ein SVG ist nicht automatisch „leicht“ oder „sauber“. Viele Exporte enthalten unsichtbare Metadaten, unnötige Gruppen oder doppelte Pfade. Saubere Exporte sind ein Mix aus korrekten Einstellungen und einer kurzen Qualitätskontrolle.

Praktische Schritte für einen robusten SVG-Export

• Vor dem Export: ungenutzte Elemente löschen, Gruppen sinnvoll benennen, unnötige Masken vermeiden.
• Formen prüfen: überlappende Pfade vermeiden, wenn sie keinen Zweck haben.
• ViewBox kontrollieren: Der sichtbare Bereich soll eng, aber nicht „abgeschnitten“ sein.
• Nach dem Export: SVG öffnen und kurz prüfen, ob es ohne Editor korrekt rendert.
• Optional: Optimieren (z. B. mit einem SVG-Optimizer im Build-Prozess), um unnötige Daten zu entfernen.

Wichtig: Für Webprojekte sollte das SVG so exportiert werden, dass es ohne Nacharbeit in Komponenten genutzt werden kann. Wenn Illustrationsteile animiert oder per CSS gefärbt werden sollen, müssen relevante Elemente erkennbare IDs/Klassen bekommen (oder zumindest als Gruppen sauber getrennt sein).

Einbettung im UI: inline oder als Datei?

Für Illustrationen gibt es zwei gängige Wege:

• Inline-SVG im HTML: gut für gezieltes Styling, Hover-Effekte, Animationen; kann HTML aufblähen.
• Als externe Datei (img/object): gut für Caching und saubere Templates; weniger direktes Styling möglich.

Die Entscheidung hängt vom Einsatz ab: Muss die Illustration z. B. per CSS auf Dark Mode reagieren, ist Inline oft praktischer. Geht es um dekorative Bilder, ist eine Datei meist leichter zu handhaben.

Dateigröße und Performance: Illustration ohne Ballast

Illustrationen werden schnell zu groß, wenn zu viele Details, Verläufe oder komplexe Masken verwendet werden. SVG kann dann schwerer sein als erwartet. Zusätzlich kann ein komplexes SVG das Rendering belasten, vor allem bei vielen Elementen auf einer Seite.

Was SVGs unnötig schwer macht

• Sehr viele kleine Pfade (z. B. „Texturen“ aus hunderten Formen)
• Verläufe, Filter und Masken in hoher Komplexität
• Duplizierte Elemente statt Wiederverwendung
• Metadaten aus dem Export (Editor-Infos, Kommentare)

Wenn Bildmaterial generell ein Thema ist (auch Rasterbilder), lohnt sich ein Blick in: UI-Design mit Bildmaterial – Webbilder gezielt planen sowie Bildkompression fürs Web – PNG, JPG, WebP richtig wählen.

Vergleich: SVG vs. PNG/WebP für Illustrationen

Qualitätsprüfung im Browser: die 10-Minuten-Kontrolle

Ein Export ist erst fertig, wenn er im echten Einsatz geprüft wurde. Das bedeutet: in typischen Breakpoints, auf hellem und dunklem Hintergrund (wenn relevant) und im Kontext von Text und Layout.

Kompakte Prüfpunkte für konsistente Darstellung

• Wirken Linien bei 100% und bei kleiner Darstellung gleichmäßig?
• Sind Abstände harmonisch oder „kleben“ Details zu eng?
• Passt die Farbwirkung zum UI (Buttons, Links, Hintergründe)?
• Ist die Ausrichtung im Layout sauber (Baseline, Zentrierung, optische Mitte)?
• Gibt es abgeschnittene Bereiche (ViewBox zu eng)?

Wenn im Projekt ohnehin UI-Qualität regelmäßig geprüft wird, kann dieser Schritt ins generelle Audit integriert werden: Design Audit im Webdesign – UI schnell prüfen und verbessern.

Pflege im Team: Versionen, Benennung, Erweiterbarkeit

Illustrationen werden oft unterschätzt, wenn es um Wartung geht. Spätestens wenn neue Motive dazukommen oder ein Rebranding ansteht, zeigt sich, ob das System tragfähig ist.

Benennung und Ablage, die Änderungen erleichtern

• Dateinamen nach Zweck: z. B. „illu-onboarding-step-1“ statt „final_final2“
• Pro Motiv eine Quelle (Figma/AI) und ein Export-Ordner (SVG)
• Wiederkehrende Bauteile als Komponenten/Symbole
• Kurze Notiz, welche Farben „Brand“ sind und welche neutral bleiben

Mini-Fallbeispiel aus typischen Webprojekten

Ein SaaS-Team nutzt Illustrationen in Feature-Abschnitten und in leeren Zuständen (Empty States). Anfangs werden Motive einzeln erstellt, jedes Mal mit leicht anderer Strichstärke und unterschiedlichen Blautönen. Nach drei Monaten wirkt die Website unruhig, obwohl alle Illustrationen „schön“ sind.

Die Lösung ist selten ein kompletter Neuentwurf. Meist reicht eine kontrollierte Vereinheitlichung: Strichstärken auf zwei feste Werte reduzieren, Farben auf eine kleine Palette bringen, wiederkehrende Elemente (z. B. Geräte-Rahmen) als Baustein standardisieren und alte SVGs neu exportieren. Danach lassen sich neue Motive schneller erstellen, weil die Regeln klar sind.

Häufige Fragen: Sicherheit, Barrierefreiheit, Dark Mode

Sind SVGs im Web „sicher“?

SVG ist ein Dateiformat, das mehr kann als nur Formen. Für Websites sollte ein SVG aus vertrauenswürdiger Quelle kommen und idealerweise im Build-Prozess bereinigt werden. In vielen Teams gilt: Nur Design-Exporte aus dem eigenen Workflow werden eingebunden, keine beliebigen SVGs aus unbekannten Quellen.

Wie helfen SVGs bei Barrierefreiheit?

Bei dekorativen Illustrationen reicht oft ein leerer Alternativtext (damit Screenreader nicht unnötig vorlesen). Bei erklärenden Grafiken braucht es eine sinnvolle Textalternative im Kontext. Wichtig ist die klare Entscheidung: Ist die Illustration nur Schmuck oder trägt sie Information?

Für UI-Bausteine, die generell barrierefrei geplant werden, passt der Blick in: Barrierefreiheit im Web – WCAG verständlich, Design praxisnah.

Wie funktionieren Illustrationen im Dark Mode?

Wenn ein Dark Mode genutzt wird, sollten Illustrationen nicht einfach „gleich bleiben“. Oft reicht es, Hintergründe zu entfernen, Kontraste anzupassen und Akzentfarben zu prüfen. Inline-SVGs sind dabei flexibler, weil Farben gezielter steuerbar sind. Entscheidend ist, dass die Illustration im dunklen Kontext nicht blendet und wichtige Konturen sichtbar bleiben.

Ein klarer Ablauf, der sich bewährt

• Motive sammeln und 3–5 Referenzillustrationen definieren
• Stilregeln festlegen (Strich, Ecken, Farben, Detailgrad)
• Illustrationen in Komponenten/Teilen aufbauen (wiederverwendbar)
• Sauber exportieren, ViewBox prüfen, unnötige Elemente entfernen
• Im Browser in realen Layouts testen (Größen, Hintergründe, Kontrast)
• Ablage/Benennung so gestalten, dass Erweiterungen leicht bleiben