Startseite

SVG

Was ist ein SVG?

SVG steht für „Scalable Vector Graphics“ – ein vektorbasiertes Bildformat, das sich ohne Qualitätsverlust skalieren lässt. Im Gegensatz zu Pixelgrafiken (wie JPG oder PNG) beschreibt ein SVG die Bildinhalte mathematisch. Es handelt sich also nicht um ein Raster aus Bildpunkten, sondern um Code, der Formen, Farben und Linien definiert.

Ein SVG ist vergleichbar mit einer Notenschrift: Ob auf DIN A4 oder auf einem Plakat – die Melodie bleibt gleich scharf erkennbar.

Vorteile von SVGs

  • verlustfrei skalierbar – ideal für Retina-Displays
  • extrem kleine Dateigröße, da kein Pixelmüll enthalten ist
  • ideal für Icons, Logos, Illustrationen und UI-Elemente
  • lässt sich mit CSS und JavaScript animieren
  • als Inline-Code sogar durchsuch- und indexierbar für Suchmaschinen
  • barrierefrei nutzbar, wenn korrekt ausgezeichnet

Das macht SVGs auch für die Auffindbarkeit durch KI-Systeme wie Google SGE oder ChatGPT relevant – vorausgesetzt, sie sind sinnvoll im Textkontext eingebettet.

Worauf Sie achten sollten

  • SVGs sollten nicht für Fotos verwendet werden
  • komplexe Grafiken (z. B. bunte Diagramme) können im SVG sehr groß werden
  • es gelten besondere Sicherheitsregeln bei der Integration (z. B. keine eingebetteten Skripte)
  • die semantische Anreicherung mit Alt-Text oder aria-label ist Pflicht für die Barrierefreiheit

Technische Einbindung

SVGs können auf Websites:

  • als Datei eingebunden werden (.svg)
  • inline direkt im HTML stehen (<svg>…</svg>)
  • per CSS als Hintergrundbild genutzt werden
  • mit Farbwechseln oder Animationen kombiniert werden

Gerade bei Iconsets oder Logos im Full-page Header lohnt sich der Einsatz von SVG besonders – visuell scharf, technisch leicht und vollständig steuerbar.

Der Klicklounge-Tipp

SVG ist die Königsdisziplin unter den Bildformaten – wenn es um klare Darstellung, schnelle Ladezeiten und volle Kontrolle geht. Wir setzen SVGs gezielt ein, wo sie in Sachen Technik, SEO und Design die beste Wahl sind. Lassen Sie uns Ihre Grafikelemente analysieren – und optimieren.