Intern
Was ist SVG?
sobes.tech KI
Antwort von AI
SVG (Skalierbare Vektorgrafik) ist ein auf XML basierendes Vektorbildformat zur Erstellung zweidimensionaler Grafiken. Im Gegensatz zu Rasterbildern beschreibt SVG Grafiken mit mathematischen Formeln, was das Skalieren von Bildern ohne Qualitätsverlust ermöglicht.
Hauptmerkmale von SVG:
- Vektorformat: Bilder werden durch geometrische Primitive (Punkte, Linien, Kurven, Formen) beschrieben, nicht durch Pixel.
- XML-Basis: Die Struktur des SVG-Dokuments basiert auf der XML-Syntax, was es leicht lesbar und bearbeitbar macht.
- Skalierbarkeit: Bilder können vergrößert oder verkleinert werden, ohne an Schärfe oder Qualität zu verlieren.
- Interaktivität: SVG-Elemente können interaktiv sein und auf Ereignisse (Klicks, Hover usw.) mit JavaScript reagieren.
- Styling: Das Styling der SVG-Elemente kann mit CSS erfolgen.
- Animation: SVG unterstützt die Animation von Elementen mit eingebauten Mitteln oder CSS/JavaScript.
Vorteile der Verwendung von SVG im Web:
- Ideal für Icons und Logos: Skalierbarkeit sorgt für scharfe Darstellung auf allen Bildschirmauflösungen.
- Kleinere Dateigröße: Für viele Grafiktypen können SVG-Dateien kleiner sein als vergleichbare Rasterformate.
- SEO-freundlich: Text in SVG wird von Suchmaschinen indexiert.
- Barrierefreiheit: Dank der textbasierten Natur ist SVG zugänglicher für assistive Technologien.
- Einfache Modifikation: Da es sich um XML handelt, kann der Inhalt dynamisch geändert werden.
Beispiel für eine einfache SVG-Grafik (Kreis):
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>