Was ist SVG?

SVG steht für „Scalable Vector Graphics“ und bezeichnet ein XML-basiertes Format für zweidimensionale Vektorgrafiken. Statt ein Bild als festes Pixelraster zu speichern, beschreibt SVG Formen, Linien, Pfade, Text und Farben mathematisch. Dadurch lassen sich Grafiken ohne sichtbaren Qualitätsverlust vergrößern oder verkleinern. Ein professioneller Webdesigner wählt SVG gezielt für skalierbare Interface-Grafiken und berücksichtigt dabei Dateigröße, Zugänglichkeit und Sicherheit.

Wie funktioniert SVG?

• Grundelemente: <svg>, <path>, <circle>, <text> → definieren die Inhalte.
• Gestaltung: Attribute und CSS bestimmen Position, Größe, Füllung und Kontur.
• Integration: Inhalt ist textbasiert – kann direkt in HTML eingebettet, als externe Datei geladen oder mit Tools erzeugt werden.
• Skalierung:
  – viewBox definiert das interne Koordinatensystem.
  – Ermöglicht flexible Anpassung an verschiedene Displaygrößen.

Typische Einsatzbereiche

Geeignet für:

• Logos
• Icons
• Diagramme
• Karten und Illustrationen mit klaren Konturen

Vorteile für Nutzer & Entwickler:

• Ein einziges Asset bleibt auf Displays mit unterschiedlichen Auflösungen scharf.
• Elemente sind per CSS gestaltbar.
• Inhalte können über JavaScript verändert werden.
• Ermöglicht Animationen und interaktive Visualisierungen.

Vorteile des Formats

• Stärken bei einfachen Motiven:
  – Dateien sind oft kompakt.
  – Keine Varianten für unterschiedliche Pixeldichten nötig.
• Flexibilität & Anpassung:
  – Text bleibt maschinenlesbar.
  – Farben und Größen lassen sich zentral ändern.
• Wichtige Einschränkungen:
  – Dateigröße hängt von Pfaden, Punkten, Filtern und eingebetteten Ressourcen ab.
  – Komplexe Grafiken können größer und rechenintensiver sein als Rasterbilder.

Barrierefreiheit und Sicherheit

Bedeutungstragende SVG-Grafiken benötigen einen zugänglichen Namen oder eine passende Textalternative. Rein dekorative Grafiken sollten für assistive Technologien ausgeblendet werden. Da SVG aktive Inhalte, Verweise oder Skripte enthalten kann, dürfen Dateien aus nicht vertrauenswürdigen Quellen nicht ungeprüft inline eingebunden werden. Sichere Verarbeitung und passende Content-Security-Policy-Regeln sind wichtig.

SVG oder Rastergrafik?

Für Fotos und detailreiche Texturen sind JPEG, WebP oder AVIF meist geeigneter, weil SVG jeden visuellen Bestandteil beschreiben müsste. Für skalierbare Formen und Interface-Grafiken bietet SVG dagegen hohe Flexibilität. Die Wahl richtet sich nach Motiv, Dateigröße, Darstellungsqualität, Browserlast und gewünschter Interaktivität.