SVG im Webdesign: Vorteile, Einsatz und Optimierung

SVG (Scalable Vector Graphics) ist ein Vektorformat, das Grafiken als Text beschreibt: Linien, Kurven, Flächen und Farben statt einzelner Pixel. Deshalb bleiben SVG-Grafiken bei jeder Größe und auf jedem Bildschirm scharf, sind für einfache Motive meist sehr klein und lassen sich mit CSS einfärben oder animieren. SVG ist das richtige Format für Logos, Icons, Diagramme und Illustrationen, nicht aber für Fotos.

Wie sich Raster- und Vektorgrafik grundsätzlich unterscheiden, erklärt der Ratgeber Pixel, Auflösung und Bildformate. Hier geht es um die Praxis: wann SVG passt, wie es eingebunden wird und wie Sie die Dateien schlank halten.

So sieht SVG von innen aus

Eine SVG-Datei ist ein XML-Dokument, das sich mit jedem Texteditor öffnen lässt. Ein violetter Kreis mit weißem Quadrat in der Mitte besteht nur aus wenigen Zeilen:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="48" fill="#5b21b6"/>
  <rect x="35" y="35" width="30" height="30" fill="#ffffff"/>
</svg>

Das Attribut viewBox legt das interne Koordinatensystem fest, hier 100 mal 100 Einheiten. Wie groß die Grafik am Ende angezeigt wird, entscheidet die Website. Der Browser rechnet die Formen bei jeder Größe neu, auch auf hochauflösenden Displays.

Wann SVG die richtige Wahl ist

Ein in SVG „eingepacktes“ Foto bleibt ein Rasterbild und bringt keinen Vorteil. Welches Rasterformat für Fotos am besten passt, vergleicht der Artikel WebP, AVIF, JPG oder PNG.

Vier Wege, SVG einzubinden

Als Bild mit img

<img src="/logo.svg" alt="PlanetPixel" width="160" height="40">

Der einfachste und sicherste Weg. Der Browser kann die Datei zwischenspeichern, sie wird wie ein normales Bild behandelt und eventuell enthaltene Skripte werden nicht ausgeführt. Externe Ressourcen wie nachgeladene Schriften lädt der Browser in diesem Modus ebenfalls nicht, Schriftzüge in Logos sollten deshalb vorher in Pfade umgewandelt werden. Der Nachteil: Mit dem CSS der Website lässt sich die Grafik nicht einfärben.

Inline im HTML

Der SVG-Code steht direkt im HTML der Seite. Damit ist jedes Element per CSS erreichbar, etwa für Hover-Effekte oder Farben, die mit dem Dunkelmodus wechseln. Mit fill="currentColor" übernimmt ein Icon automatisch die Textfarbe seiner Umgebung. Inline-SVG verursacht keine zusätzliche Anfrage an den Server, wird aber auch nicht separat zwischengespeichert. Für große Grafiken, die auf vielen Seiten erscheinen, ist das ein Nachteil.

Als Sprite mit use

Für Icon-Sets werden viele Symbole in einer Datei gesammelt und einzeln abgerufen:

<svg width="24" height="24" aria-hidden="true">
  <use href="/icons.svg#suche"></use>
</svg>

So wird die Datei einmal geladen und zwischengespeichert, die Icons bleiben trotzdem über currentColor einfärbbar. Wie ein einheitliches Icon-System aufgebaut wird, beschreibt Icons im Webdesign.

Über CSS

Als background-image eignet sich SVG für dekorative Muster, Trennlinien oder Hintergrundformen. Mit der Eigenschaft mask lässt sich ein SVG zudem als Form verwenden, die mit einer beliebigen CSS-Farbe gefüllt wird. Für Inhalte, die eine Bedeutung tragen, ist CSS ungeeignet, weil Screenreader Hintergrundbilder nicht erfassen.

SVG-Dateien optimieren

Grafikprogramme exportieren SVG oft mit viel überflüssigem Code: Metadaten des Programms, Kommentare, versteckte Ebenen, unnötig viele Nachkommastellen und leere Gruppen. Optimierungswerkzeuge wie das quelloffene SVGO, das es als Kommandozeilenprogramm und mit grafischen Oberflächen gibt, entfernen diesen Ballast. Bei typischen Exporten schrumpft die Datei dadurch oft deutlich, ohne dass sich das Aussehen ändert.

Darauf sollten Sie beim Optimieren achten:

1. viewBox behalten. Ohne viewBox skaliert die Grafik nicht mehr richtig.
2. Nachkommastellen begrenzen. Ein bis zwei Stellen reichen für die meisten Motive.
3. IDs prüfen. Werden IDs für CSS, Animationen oder Sprites gebraucht, dürfen sie nicht umbenannt oder entfernt werden.
4. Text in Pfade umwandeln, wenn die Schrift nicht garantiert verfügbar ist, etwa bei Logos.
5. Ergebnis vergleichen. Optimierte und originale Grafik nebeneinander öffnen, bevor Sie die alte Datei ersetzen.

Da SVG Text ist, lässt sich die Datei auf dem Server zusätzlich mit Gzip oder Brotli komprimieren. Bei den meisten Hostern geschieht das automatisch.

Beim Export aus dem Grafikprogramm

Viele Probleme entstehen schon beim Speichern. Die Bezeichnungen unterscheiden sich je nach Programm, die Grundsätze sind gleich:

• Stile als Attribute oder inline exportieren, nicht als eingebettetes Stylesheet mit allgemeinen Klassennamen. Mehrere SVGs mit gleichen Klassennamen auf einer Seite können sich sonst gegenseitig umfärben.
• Zeichenfläche passend zuschneiden, damit die viewBox keinen leeren Rand enthält und sich die Grafik exakt ausrichten lässt.
• Rasterbilder nicht einbetten. Ein eingebettetes Foto macht aus einer kleinen Vektordatei eine große, meist schlecht komprimierte Datei.
• Ebenen und Elemente sinnvoll benennen, wenn einzelne Teile später per CSS oder Animation angesprochen werden sollen.

Schon beim Zeichnen lässt sich Dateigröße sparen: wenige, saubere Pfade statt vieler übereinanderliegender Formen, keine eingebetteten Rasterbilder und keine Effekte, die das Programm nur als Pixel exportieren kann.

Größe angeben und Layoutsprünge vermeiden

Wie bei Rasterbildern sollte die Website wissen, wie viel Platz ein SVG einnimmt, bevor es geladen ist. Geben Sie width und height am img-Element an oder legen Sie die Größe per CSS fest. Fehlen alle Angaben, kann ein inline eingebundenes SVG ohne Breite die volle Containerbreite einnehmen. Ein riesiges Icon beim ersten Laden ist die Folge. Ladezeit und Layoutstabilität vertieft der Artikel Ladezeit von Bildern und Schriften.

Barrierefreiheit

SVG-Grafiken, die eine Information tragen, brauchen eine Textalternative:

• Mit img: ein aussagekräftiges alt-Attribut, bei Logos meist der Name.
• Inline: role="img" am svg-Element, dazu ein <title> als erstes Kindelement und aria-labelledby, das auf die ID dieses Titels verweist. Für längere Beschreibungen, etwa bei Diagrammen, kann zusätzlich ein <desc> genutzt oder der Inhalt im umgebenden Text erklärt werden.
• Dekorativ: aria-hidden="true" am svg-Element oder ein leeres alt="" am img-Element, damit Screenreader die Grafik überspringen.
• Icons in Buttons: Steht neben dem Icon kein sichtbarer Text, braucht der Button selbst einen zugänglichen Namen, etwa über aria-label.

Achten Sie auch auf Farbkontraste: Linien und Flächen, die eine Bedeutung tragen, müssen sich ausreichend vom Hintergrund abheben, auch im Dunkelmodus.

Sicherheit

SVG kann Skripte, Ereignis-Attribute und Verweise auf fremde Ressourcen enthalten. Für eigene Grafiken ist das unkritisch. Erlaubt eine Website Uploads durch Nutzer, sollten SVG-Dateien entweder nicht angenommen, vor der Speicherung bereinigt oder ausschließlich über das img-Element ausgeliefert werden. Ungeprüft inline ins HTML eingefügte Fremd-SVGs sind ein bekannter Weg für Cross-Site-Scripting.

SVG als Favicon

Moderne Browser akzeptieren SVG auch als Favicon. Der Vorteil: Eine einzige Datei passt für alle Größen, und über eine Media Query im SVG kann das Symbol im Dunkelmodus die Farbe wechseln. Für ältere Browser und Apple-Geräte bleiben zusätzliche Rasterdateien nötig. Welche das sind, steht im Artikel Favicon erstellen.

Checkliste SVG

• Nur für Vektormotive eingesetzt, nicht für Fotos
• Datei optimiert, viewBox erhalten, benötigte IDs geschützt
• Schriften in Logos in Pfade umgewandelt
• Einbindungsart passend gewählt: img für Bilder, inline oder Sprite für einfärbbare Icons
• Breite und Höhe angegeben
• Textalternative oder aria-hidden gesetzt
• Server liefert image/svg+xml und komprimiert die Datei
• Fremde SVG-Uploads bereinigt oder nur als img ausgeliefert