SVG

TL;DR

SVG ist ein vektorbasiertes Bildformat. Es ist skalierbar, oft kleiner als Pixel-Formate und perfekt für Icons, Logos und Grafiken.

Was ist SVG?

SVG (Scalable Vector Graphics) ist ein XML-basiertes Vektorformat. Statt Pixeln werden mathematische Formen beschrieben. Das Ergebnis: Scharfe Grafiken bei jeder Größe.

Vorteile von SVG

• Skalierbar: Verlustfrei vergrößerbar
• Oft kleiner: Besonders bei einfachen Grafiken
• Bearbeitbar: Mit CSS und JavaScript manipulierbar
• Barrierefrei: Text bleibt durchsuchbar
• Animierbar: Für Animationen geeignet

Wann SVG nutzen?

• Icons und Icon-Systeme
• Logos
• Illustrationen mit klaren Formen
• Diagramme und Infografiken
• Animierte Grafiken

Wann nicht SVG?

• Fotos (JPEG, WebP, AVIF)
• Komplexe Grafiken mit vielen Details
• Bilder mit Farbverläufen (wenn komplex)

SVG und Nachhaltigkeit

SVG ist nachhaltig:

• Oft kleinere Dateigrößen
• Ein File für alle Auflösungen
• Inline-Einbindung möglich (spart Requests)
• Komprimierbar mit SVGO

Best Practices

• Mit SVGO optimieren
• Inline für wichtige Icons
• Sprite-Sheets für viele Icons
• Accessible: title und desc nutzen

Fazit

SVG ist das perfekte Format für skalierbare Grafiken. Es vereint Qualität, Flexibilität und Nachhaltigkeit.