SVG für Designer: Skalierbare Vektorgrafiken im Web

SVG (Scalable Vector Graphics) ist ein XML-basiertes Vektorformat für den Browser, das Grafiken verlustfrei in jeder Größe darstellt und nativ animierbar, zugänglich und interaktiv ist.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: Web-Grundlagen · Niveau: Einsteiger Synonyme / Auch bekannt als: Scalable Vector Graphics, Vektorgrafik im Web, SVG-Format

Was ist SVG?

SVG ist das einzige Vektorformat, das nativ im Browser läuft. Während JPEG und PNG Pixel-Informationen speichern, beschreibt SVG Formen mathematisch: Ein Kreis ist kein Cluster aus Pixeln, sondern eine Definition mit Mittelpunkt, Radius und Farbe. Das bedeutet: Ein SVG-Logo ist auf einem 375 px Smartphone-Bildschirm genauso scharf wie auf einem 8K-Monitor, ohne dass eine größere Datei nötig wäre.

Für Designer ist SVG das bevorzugte Format für:

• Logos und Firmenzeichen
• Icons und Icon-Sets
• Infografiken und Diagramme
• Illustrationen
• Animierte Grafiken

Erklärung

Wie funktioniert SVG?

SVG-Dateien sind lesbare Textdateien (XML-Format). Ein einfaches Dreieck in SVG sieht so aus:

``xml <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <polygon points="50,5 95,95 5,95" fill="#3B82F6"/> </svg> ``

Das macht SVG einzigartig: Es kann im HTML-Code direkt eingebettet werden (Inline SVG), über <img>-Tags eingebunden werden, oder als eigene Datei mit <object> oder CSS background-image referenziert werden.

Einbindungsarten im Web

1. Als `<img>` Tag Die einfachste Methode. Das SVG wird wie ein normales Bild eingebunden. Vorteil: einfach, gecacht. Nachteil: Keine CSS-Anpassbarkeit, keine Animierbarkeit.

2. Als CSS Background Image Ideal für dekorative Elemente. Aber: kein direkter Zugriff für Animationen oder Farbänderungen.

3. Inline SVG (im HTML eingebettet) Das SVG-Markup ist direkt im HTML enthalten. Ermöglicht:

• Farbänderungen via CSS (z. B. Icon-Farbe an Thema anpassen)
• Hover-Animationen
• Barrierefreiheits-Attribute (title, desc)
• Kleine Datei ohne Netzwerkrequest

Inline SVG ist die bevorzugte Methode für Logos und interaktive Icons.

4. SVG-Sprite Mehrere SVG-Icons werden in einer Datei zusammengefasst. Mit dem <use>-Element können einzelne Symbole referenziert werden. Reduziert Netzwerkanfragen erheblich bei großen Icon-Sets.

Wichtige SVG-Konzepte für Designer

ViewBox Die viewBox definiert den internen Koordinatenraum des SVG. Sie ist unabhängig von der tatsächlichen Anzeigegröße. Ein viewBox="0 0 24 24" bedeutet, der Koordinatenraum ist 24 × 24 Einheiten groß – egal ob das Icon auf 16 px oder 200 px angezeigt wird.

currentColor Wenn eine Füllfarbe als fill="currentColor" definiert ist, übernimmt das SVG die Textfarbe des umgebenden Elements. Das ermöglicht es, Icons per CSS zu färben, ohne das SVG selbst anzupassen. Nützlich besonders im Dark Mode Design: Farben und Kontraste.

ViewBox vs. Width/Height Die Größe eines SVG wird über CSS oder Attribute gesteuert. Die viewBox skaliert den Inhalt. Fehlt die viewBox, ist ein SVG in vielen Kontexten nicht responsiv skalierbar.

Optimierung

Aus Illustrator oder Figma exportierte SVGs enthalten oft überflüssige Metadaten, Editor-IDs, unnötige Gruppen und Kommentare. Das erhöht die Dateigröße und erschwert die manuelle Bearbeitung. Tools zur SVG-Optimierung:

• SVGO (Node.js CLI): Automatische Optimierung, konfigurierbar
• SVGOMG (svgomg.net): Browser-basierte Oberfläche für SVGO
• Iconify: Große Open-Source-Icon-Bibliothek mit optimierten SVGs

Bildoptimierung für Web: WebP, AVIF, Lazy Loading vergleicht SVG mit anderen Webformaten.

SVG-Animationen

SVG kann mit CSS animiert werden – Farbänderungen, Transformationen, Pfadanimationen. Für komplexere Animationen (zum Beispiel animierte Illustrationen) eignet sich die JavaScript-Bibliothek GSAP oder Lottie (JSON-basierte Animationen aus After Effects). CSS-Animationen für Designer verstehen erklärt die technischen Grundlagen von CSS-Animationen.

Beispiele

Logo-Einbindung: Ein Firmenlogo als Inline SVG im Header erlaubt, die Logofarbe bei Hover-Effekten oder im Dark Mode Design: Farben und Kontraste per CSS anzupassen.

Icon-System: Ein Design System enthält 80 Icons als SVG-Sprites. Entwickler referenzieren Icons über IDs. Design Systems: Von Figma zu Code zeigt, wie Icons Teil eines Systems werden.

Animierte Illustration: Eine Onboarding-Grafik mit wandernden Elementen und pulsierenden Kreisen – umsetzbar mit CSS-Animationen direkt auf SVG-Pfaden.

Infografik: Ein Balkendiagramm als SVG kann mit CSS-Transitions beim Einblenden seine Höhe animieren – kein Canvas-JavaScript notwendig.

In der Praxis

Export aus Figma

Figma exportiert Vektorgrafiken direkt als SVG. Empfehlungen:

• Umrisse konvertieren: Text in Pfade umwandeln, um Schriftabhängigkeiten zu vermeiden (außer bei Inline-SVG, wo currentColor genutzt wird)
• Flatten: Überlappende Pfade zusammenführen, wenn nicht interaktiv
• Export-Einstellungen: In Figma gibt es keine SVG-Qualitätsstufe – SVG ist immer verlustfrei

Anschließend mit SVGOMG optimieren.

Barrierefreiheit

Inline SVG sollte einen <title> und optional ein <desc> enthalten, damit Screenreader die Grafik beschreiben können:

``xml <svg aria-labelledby="logoTitle" role="img"> <title id="logoTitle">Lazi Akademie Logo</title> ... </svg> ``

Dekorative SVGs, die keinen inhaltlichen Wert tragen, sollten aria-hidden="true" erhalten. Barrierefreiheit im Web (WCAG 2.2) für Designer beschreibt WCAG-Anforderungen für visuelle Inhalte.

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Wann sollte ich kein SVG verwenden? Bei komplexen, detailreichen Fotos. Fotos sind pixelbasierte Inhalte, SVG ist für geometrische Formen optimiert. Ein Foto als SVG wäre enorm groß. Außerdem bei sehr komplexen Illustrationen mit Hunderten Pfaden: Da kann WebP manchmal kleiner sein.

Kann ich SVG direkt in Figma bearbeiten? Ja. Figma kann SVG-Dateien importieren und als Vektorpfade bearbeiten. Komplexe SVGs (z. B. aus Illustrator mit vielen Gruppen) sind aber manchmal unübersichtlich.

Brauche ich für SVG Browser-Fallbacks? Nicht mehr. SVG wird von allen Browsern (auch IE9+) unterstützt. Bei sehr alten Zielgruppen kann ein PNG-Fallback sinnvoll sein, ist aber heute kaum noch relevant.

Verwandte Einträge

• Bildoptimierung für Web: WebP, AVIF, Lazy Loading – SVG im Vergleich mit anderen Bildformaten
• CSS-Animationen für Designer verstehen – SVG-Elemente animieren
• Dark Mode Design: Farben und Kontraste – currentColor für theme-adaptive SVGs
• Design Systems: Von Figma zu Code – Icon-Systeme in Design Systems
• Barrierefreiheit im Web (WCAG 2.2) für Designer – Zugängliche SVG-Grafiken
• Handoff an Entwickler: Figma, Zeplin, Storybook – SVG-Spezifikationen im Handoff

Weiterführend

• Amelia Bellamy-Royds, Kurt Cagle & Dudley Storey (2017). Using SVG with CSS3 and HTML5. O'Reilly Media.
• Coyier, C. (2022). Using SVG. CSS-Tricks.
• MDN Web Docs (2024). SVG: Scalable Vector Graphics.
• Penney, T. (2019). Optimizing SVGs in data URIs. CSS-Tricks.
• SVGOMG (2024).