Was ist SVG?
SVG steht für Scalable Vector Graphics, also skalierbare Vektorgrafiken. Anders als ein Foto, das aus einzelnen Bildpunkten besteht, beschreibt eine SVG-Grafik Formen mathematisch, etwa als Linien, Kreise und Kurven. Dadurch lässt sie sich beliebig vergrößern oder verkleinern, ohne dass sie unscharf oder pixelig wird.
Ein SVG ist letztlich eine Textdatei, die der Browser in eine Grafik übersetzt, ähnlich wie er HTML in eine Seite verwandelt. Das macht das Format leichtgewichtig, vielseitig und sogar per CSS und JavaScript steuerbar.
Wofür eignet sich SVG?
SVG ist die erste Wahl für Logos, Icons, einfache Illustrationen und Diagramme. Überall, wo klare Formen und scharfe Kanten gefragt sind, spielt das Format seine Stärken aus. Auf hochauflösenden Bildschirmen bleibt ein SVG-Logo gestochen scharf, während ein normales Pixelbild verschwimmen kann.
Für Fotos ist SVG dagegen ungeeignet, da diese aus unzähligen Farbverläufen bestehen. Hier sind Pixelformate wie WebP die bessere Wahl. Auch ein Favicon lässt sich heute als SVG umsetzen, damit es in jeder Größe scharf erscheint.
SVG und SEO
SVG-Dateien sind oft sehr klein, was die Ladezeit verkürzt und den Core Web Vitals zugutekommt. Da sie als Text vorliegen, lassen sie sich gut komprimieren und sogar direkt in den Seitencode einbetten, was zusätzliche Anfragen an den Server spart.
Für die Suchmaschinenoptimierung ist zudem vorteilhaft, dass Texte innerhalb eines SVG von Suchmaschinen gelesen werden können und sich Barrierefreiheits-Informationen hinterlegen lassen. Sauber eingesetzt verbindet SVG damit Schärfe, Geschwindigkeit und Zugänglichkeit.