Scalable Vector Graphics (SVG)
Scalable Vector Graphics (SVG) ist ein vektorbasiertes Bildformat, das vor allem im Webdesign und in der UI-Entwicklung eingesetzt wird. Im Gegensatz zu pixelbasierten Formaten wie JPG oder PNG bestehen SVG-Dateien aus mathematisch beschriebenen Formen – Linien, Kurven, Flächen – und lassen sich beliebig skalieren, ohne Qualitätsverlust.
SVG ist ein offener Webstandard und wird direkt vom Browser gerendert. Das macht es ideal für Logos, Icons, Infografiken oder Animationen, die auf allen Geräten gestochen scharf erscheinen sollen – von Smartphone bis 4K-Monitor.
Vorteile:
- Beliebig skalierbar ohne Pixelmatsch
- Kleine Dateigröße → schneller Seitenaufbau
- Einfach mit CSS und JavaScript steuerbar
- Ideal für barrierefreies Webdesign (mit title, desc, aria-label etc.)
- Unterstützt Animationen und Interaktivität
Herausforderung:
- Nicht ideal für komplexe Fotos oder realistische Bilder
- Verständnis von XML-Struktur oder Vektorgrafik-Tools erforderlich
- Kann bei zu vielen Details schnell unübersichtlich werden
Zurück
