SVG – Scalable Vector Graphics

Das Wichtigste auf einen Blick

• SVG ist ein XML-basiertes Vektorformat für zweidimensionale Grafiken.
• Es ermöglicht verlustfreie Skalierung ohne Qualitätsverlust.
• SVG unterstützt Interaktivität und Animationen durch CSS und JavaScript.
• Das Format ist textbasiert und somit gut editierbar und suchmaschinenfreundlich.
• SVG wird breit von modernen Webbrowsern unterstützt.
• Es eignet sich für Logos, Icons, Diagramme und komplexe Illustrationen.
• SVG-Dateien sind oft kleiner als vergleichbare Rasterbilder bei einfachen Grafiken.

Überblick: Svg

SVG (Scalable Vector Graphics) ist ein offener Standard, der von der World Wide Web Consortium (W3C) entwickelt wurde, um zweidimensionale Vektorgrafiken in einem textbasierten XML-Format zu beschreiben. Im Gegensatz zu Rastergrafiken, die aus Pixeln bestehen, basieren SVG-Grafiken auf mathematischen Beschreibungen von Formen, Linien und Kurven. Dadurch sind sie verlustfrei skalierbar und eignen sich besonders für responsive Webdesigns, Animationen und interaktive Anwendungen.

Was ist SVG?

SVG steht für Scalable Vector Graphics und ist ein offener Standard zur Darstellung von zweidimensionalen Vektorgrafiken in einem textbasierten XML-Format. SVG-Grafiken bestehen aus geometrischen Formen wie Linien, Kreisen, Pfaden und Text, die mathematisch beschrieben werden.

Vorteile von SVG gegenüber Rastergrafiken

Im Gegensatz zu Rastergrafiken (z.B. JPEG, PNG), die aus Pixeln bestehen, sind SVG-Grafiken vektorbasierend. Das bedeutet, sie können ohne Qualitätsverlust beliebig skaliert werden. Außerdem sind SVG-Dateien oft kleiner, leichter editierbar und unterstützen Interaktivität und Animationen.

Vergleich SVG und Rastergrafiken

Anwendungsbereiche von SVG

SVG wird vor allem im Webdesign für Logos, Icons, Diagramme und Illustrationen verwendet. Es eignet sich auch für Animationen, interaktive Karten und Benutzeroberflächen. Darüber hinaus findet SVG Einsatz in der Druckvorstufe und bei technischen Zeichnungen.

Technische Grundlagen und Struktur

SVG-Dateien sind XML-Dokumente, die aus Elementen wie <svg>, <circle>, <rect>, <path> und <text> bestehen. Diese Elemente definieren die Formen, Farben, Linien und Texteigenschaften. SVG unterstützt auch Filter, Masken und Transformationen.

Interaktivität und Animationen in SVG

Durch die Integration von CSS und JavaScript können SVG-Grafiken animiert und interaktiv gestaltet werden. Beispiele sind Hover-Effekte, Klick-Events oder komplexe Bewegungsabläufe. SMIL (Synchronized Multimedia Integration Language) wird ebenfalls unterstützt, ist aber weniger verbreitet.

Integration von SVG in Webseiten

SVG kann direkt in HTML-Dokumente eingebettet werden, entweder inline im Code oder als externe Datei per <img>-Tag, CSS-Hintergrund oder <object>-Element. Dies ermöglicht flexible Nutzung und einfache Anpassung.

Nachteile und Grenzen von SVG

SVG ist weniger geeignet für fotorealistische Bilder oder sehr komplexe Grafiken mit vielen Details, da die Dateigröße stark ansteigen kann. Die Performance kann bei sehr komplexen SVGs in Browsern leiden.

Wichtiger Hinweis

Zusatzinformationen