Was ist SVG? — Das Vektorformat einfach erklärt

SVG ist ein offener Standard des World Wide Web Consortium (W3C), erstmals veröffentlicht im Jahr 2001. Es beschreibt zweidimensionale Vektorgrafiken in XML-Syntax:

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

Dieses einfache Beispiel zeichnet einen violetten Kreis. Der Browser interpretiert die XML-Anweisungen und rendert die Grafik in beliebiger Auflösung.

SVG bietet einzigartige Vorteile gegenüber Pixelformaten:

• Unendlich skalierbar — Ob 16×16 px oder auf einem 10-Meter-Banner: kein Qualitätsverlust
• Extrem kleine Dateigröße — Ein Logo als SVG: ~2-50 KB; als PNG in hoher Auflösung: 500+ KB
• Textbasiert — SVGs können mit jedem Texteditor bearbeitet werden
• Durchsuchbar — Text in SVGs wird von Suchmaschinen indiziert
• Animierbar — Per CSS oder JavaScript können SVG-Elemente animiert werden
• Barrierefreiheit — SVGs unterstützen ARIA-Attribute und <title>/<desc>-Tags

Die wichtigsten SVG-Grundelemente:

• <rect> — Rechteck
• <circle> — Kreis
• <ellipse> — Ellipse
• <line> — Linie
• <polyline> — Linienzug
• <polygon> — Vieleck
• <path> — Beliebige Pfade (das mächtigste Element)
• <text> — Text
• <g> — Gruppierung von Elementen

SVG ist allgegenwärtig in der digitalen Welt:

• Logos & Icons — Das Hauptanwendungsgebiet für SVG
• Infografiken — Interaktive, skalierbare Datenvisualisierungen
• UI-Elemente — Buttons, Illustrationen, Hintergründe
• Karten — Interaktive Landkarten und Gebäudepläne
• Animationen — Von subtilen Hover-Effekten bis komplexem Motion Design
• Druck — SVG als Basis für hochauflösende Druckvorlagen

SVG wird von allen modernen Browsern vollständig unterstützt:

• Chrome, Firefox, Safari, Edge — volle Unterstützung seit Jahren
• iOS Safari, Android Chrome — perfekte mobile Darstellung
• IE 11 — grundlegende Unterstützung (einige CSS-Features fehlen)

Du kannst SVG heute bedenkenlos für jedes Webprojekt verwenden.