EMZETT.
Login

Emzett Wiki

SVG: Vektorgrafiken im Web

Properties1
tagsglossar, web, grafik

2 Min. Lesezeit

SVG: Vektorgrafiken im Web

Kurz: SVG beschreibt Grafiken als Text mit Formen und Linien statt als Pixel, sodass sie in jeder Größe scharf bleiben und sich mit CSS und JavaScript gestalten lassen.

Genauer: Pixelbilder (JPEG, PNG) haben eine feste Auflösung und werden beim Vergrößern unscharf. SVG (Scalable Vector Graphics) speichert stattdessen Anweisungen: „Zeichne einen Kreis bei (50,50) mit Radius 40.“ Das ist ein XML-Format, das Browser direkt darstellen.

Im Detail

Ein einfaches Beispiel

<svg viewBox="0 0 100 100" width="120" height="120" role="img" aria-label="Roter Kreis mit Stern">
  <circle cx="50" cy="50" r="40" fill="#e11d48" />
  <path d="M50 20 L58 42 L82 42 L62 56 L70 80 L50 65 L30 80 L38 56 L18 42 L42 42 Z" fill="white" />
</svg>

Das viewBox legt ein eigenes Koordinatensystem fest, das auf jede Größe skaliert. Grundformen: rect, circle, ellipse, line, polyline, polygon, path (beliebige Kurven), text, Gruppen g.

Vorteile

  • Skalierbar ohne Qualitätsverlust, ideal für Logos, Icons, Diagramme und Illustrationen auf allen Bildschirmen.
  • Oft sehr klein, besonders bei einfachen Formen.
  • Mit CSS färbbar und animierbar (fill, stroke, Übergänge), mit JavaScript interaktiv.
  • Text im SVG ist durchsuchbar und lässt sich mit Screenreadern vorlesen, wenn man Beschriftungen setzt.
  • Wird von Design-Werkzeugen (Figma, Inkscape, Illustrator) exportiert.

Einbinden

  • <img src="bild.svg">: wie ein Bild, einfach, keine Gestaltung von außen.
  • Inline im HTML: volle Kontrolle durch CSS/JS, aber mehr Markup.
  • Als CSS-Hintergrund (background-image) oder <symbol>-Sprite mit <use>. Für Farbwechsel passend zum Theme nutzt man fill="currentColor", sodass das Icon die Textfarbe übernimmt.

Grenzen und Sicherheit

Für Fotos eignen sich Pixelformate (JPEG, WebP, AVIF), SVG wird bei sehr komplexen Motiven groß und langsam. SVG kann Skripte enthalten: Fremde SVG-Dateien nie ungeprüft inline einbinden und hochgeladene SVGs bereinigen (XSS-Gefahr); als <img> eingebunden werden Skripte nicht ausgeführt. Optimiere Dateien mit SVGO und gib Bedeutungsträgern einen Text (title, aria-label).

Siehe auch: CSS, HTML, Barrierefreie Webseiten, XSS

Backlinks