SVG: das Vektorformat verstehen

SVG steht für Scalable Vector Graphics. Anders als JPEG, PNG, WebP oder AVIF speichert SVG nicht primär ein Raster aus Pixeln, sondern grafische Anweisungen: Linien, Kurven, Formen, Texte, Farben und Transformationen.

Darum kann ein SVG-Logo sehr klein oder sehr groß dargestellt werden, ohne die typischen Rasterartefakte einer hochskalierten Bitmap.

Ein einfaches SVG

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="#2563eb" />
</svg>

Dieses Dokument beschreibt einen Kreis. Es enthält keine Liste von Millionen Pixeln.

Der Browser rendert die Form für die aktuelle Ausgabegröße.

SVG ist XML

SVG verwendet eine XML-basierte Syntax. Elemente wie <rect>, <circle>, <path> oder <text> bilden eine Baumstruktur.

Das macht SVG:

• editierbar,
• durchsuchbar,
• per CSS stylbar,
• per JavaScript manipulierbar,
• gut automatisierbar.

Es bedeutet aber auch, dass SVG komplexer sein kann als ein rein passives Rasterbild.

Grundformen

SVG kennt unter anderem:

<rect />
<circle />
<ellipse />
<line />
<polyline />
<polygon />
<path />

Für viele Icons reichen wenige Elemente.

Der path ist besonders mächtig

Ein <path> kann komplexe Linien und Kurven beschreiben. Sein d-Attribut enthält Befehle für Bewegungen, Linien, Bézier-Kurven und Schließen von Formen.

Exportierte Logos bestehen deshalb häufig aus einigen wenigen path-Elementen.

Was macht viewBox?

viewBox definiert das interne Koordinatensystem:

viewBox="0 0 100 100"

Das bedeutet: Der relevante Zeichenbereich beginnt bei x=0, y=0 und umfasst 100 × 100 interne Einheiten.

Die tatsächliche Darstellung kann 24 × 24 Pixel, 300 × 300 Pixel oder mehrere Meter groß sein.

Warum viewBox für Responsive Design wichtig ist

Wenn viewBox vorhanden ist, kann der Browser die internen Koordinaten auf unterschiedliche Ausgabegrößen abbilden.

Ein SVG kann beispielsweise so eingebunden werden:

.logo {
  width: 12rem;
  height: auto;
}

Ohne sinnvoll definiertes viewBox kann responsive Skalierung schwieriger werden.

Breite und Höhe

Ein SVG kann feste width- und height-Attribute besitzen. Für responsive Nutzung werden diese manchmal entfernt, solange viewBox erhalten bleibt.

Der SVG-Optimierer bietet genau solche Bereinigungsoptionen.

SVG und CSS

Farben können direkt im Markup stehen:

<path fill="#2563eb" />

oder über CSS gesteuert werden.

Ein verbreitetes Muster für Icons ist:

fill="currentColor"

Dann übernimmt die Grafik die CSS-Textfarbe ihres Kontexts.

Das ist besonders praktisch für Komponentenbibliotheken.

SVG und HSL/RGB/HEX

SVG-Farben folgen im Web denselben CSS-Konzepten. Der Farbkonverter kann Werte zwischen RGB, HEX und HSL umrechnen.

Mehr Hintergrund liefert RGB, HEX oder HSL: Welche Notation ist sinnvoll?.

SVG vs PNG

SVG eignet sich gut für:

• Logos,
• Icons,
• Diagramme,
• technische Illustrationen,
• einfache Vektorzeichnungen.

PNG eignet sich besser, wenn echte Rasterdaten, komplexe Malerei oder pixelgenaue Screenshots gespeichert werden sollen.

SVG vs Foto

Ein Foto als SVG zu speichern ist meist unsinnig. Man könnte ein Rasterbild in ein SVG einbetten, erhält dadurch aber nicht die Vorteile einer echten Vektorgrafik.

Vektorisierung eines Fotos erzeugt wiederum viele Formen und kann sehr komplex werden.

Dateigröße hängt von der Komplexität ab

Ein einfaches Logo kann als SVG extrem klein sein. Eine hochkomplexe Illustration mit tausenden Pfaden kann dagegen größer sein als ein gut komprimiertes Rasterbild.

„Vektor“ bedeutet also nicht automatisch „klein“.

Text in SVG

SVG kann <text> enthalten. Das hat Vorteile für Editierbarkeit und teilweise Zugänglichkeit.

Bei Logos kann allerdings eine externe Schrift fehlen. Deshalb werden Texte bei Exporten häufig in Pfade umgewandelt.

Das erhöht die Anzahl der Pfade und macht den eigentlichen Textinhalt unlesbar für Maschinen.

Transformationen

Elemente können verschoben, skaliert und gedreht werden:

transform="translate(...) scale(...) rotate(...)"

Editoren erzeugen dabei manchmal verschachtelte Transformationen. Eine Optimierung kann solche Strukturen vereinfachen, muss aber den sichtbaren Output erhalten.

Gruppen

Mit <g> lassen sich Elemente gruppieren. Das ist nützlich für gemeinsame Eigenschaften oder Transformationen.

Zu viele unnötige Gruppen aus Designsoftware können das Markup jedoch aufblähen.

IDs, Klassen und Definitionen

SVG kann wiederverwendbare Definitionen enthalten:

• Verläufe,
• Masken,
• Clip-Pfade,
• Filter,
• Symbole.

Sie werden oft in <defs> gesammelt und über IDs referenziert.

Eine aggressive Optimierung muss solche Referenzen korrekt erhalten.

Verläufe und Filter

SVG kann lineare und radiale Verläufe sowie Filtereffekte beschreiben.

Das macht das Format mächtig, kann aber Renderingkosten erhöhen. Ein extrem komplexer Schatten- oder Unschärfefilter sollte im echten Browser getestet werden.

SVG kann animiert werden

SVG-Elemente können über CSS oder JavaScript animiert werden. Das ist für Icons, Diagramme und Illustrationen nützlich.

Animation ist jedoch ein weiteres Beispiel dafür, dass SVG mehr als eine statische Bilddatei sein kann.

Sicherheitsaspekt: SVG ist potenziell aktiver Inhalt

Ein SVG-Dokument kann Scripts, externe Referenzen oder andere aktive Mechanismen enthalten.

Darum sollten nicht vertrauenswürdige SVG-Dateien nicht blind inline in HTML eingefügt werden.

Eine Bereinigung oder Sanitization ist besonders wichtig, wenn Nutzer Dateien hochladen können.

Das ist ein anderer Sicherheitsaspekt als bei JPEG oder PNG.

SVG als <img>

Ein SVG kann wie ein normales Bild eingebunden werden:

<img src="/logo.svg" alt="Firmenlogo">

Das begrenzt einige Interaktionsmöglichkeiten und ist für einfache Grafiken oft die unkomplizierteste Variante.

Inline-SVG

Inline:

<svg>...</svg>

ermöglicht direkten Zugriff per CSS und JavaScript.

Dafür wird der SVG-Code Teil des HTML-Dokuments und muss entsprechend vertrauenswürdig sein.

Zugänglichkeit

Ein dekoratives SVG sollte nicht unnötig von Screenreadern angekündigt werden. Ein bedeutungstragendes SVG braucht dagegen eine zugängliche Benennung.

Welche Technik geeignet ist, hängt von der Einbindung ab.

SVG optimieren

Designprogramme exportieren häufig:

• Kommentare,
• Editor-Metadaten,
• unnötige Gruppen,
• sehr viele Dezimalstellen,
• redundante Attribute.

Der Leitfaden SVG optimieren, ohne die Darstellung zu verändern erklärt, welche Bereinigungen sinnvoll sind.

SVG und responsive Bilder

Ein echtes SVG benötigt wegen seiner Vektornatur oft keine srcset-Varianten für unterschiedliche Breiten. Trotzdem kann sein Layout responsive sein.

Rasterbilder benötigen dagegen häufig mehrere Pixelbreiten. Das wird im Leitfaden Responsive Bilder mit srcset und sizes behandelt.

Wann SVG vermeiden?

SVG ist weniger geeignet für:

• natürliche Fotografien,
• sehr komplexe Pixelkunst,
• Inhalte, die als komprimiertes Raster deutlich kleiner sind,
• unkontrollierte Drittanbieterdateien ohne Sanitization.

Praktische Auswahl

Frage:

1. Besteht die Grafik aus geometrischen Formen?
2. Muss sie frei skalieren?
3. Soll sie per CSS einfärbbar sein?
4. Bleibt die Pfadkomplexität überschaubar?
5. Ist der Inhalt vertrauenswürdig?

Wenn die Antworten überwiegend ja lauten, ist SVG oft eine ausgezeichnete Wahl.

Fazit

SVG speichert grafische Struktur statt eines festen Pixelrasters. Das macht es ideal für skalierbare Logos, Icons, Diagramme und viele Webillustrationen.

viewBox, saubere Pfade und eine bewusste Einbettungsstrategie sind zentral. Gleichzeitig sollte SVG wegen seiner möglichen aktiven Inhalte sicherheitstechnisch nicht wie ein gewöhnliches JPEG behandelt werden.