4.2.10 SVG-Grafiken verwenden

Grafiken sollten auf allen Endgeräten und in allen Auflösungen optimal dargestellt werden. Hierzu sind die bisher behandelten Pixelgrafiken (jpg und gif) eigentlich ungeeignet. Bei Abbildungen sollte, wenn möglich, Scalable Vector Graphics (= SVG) verwendet werden. Bei SVG handelt es sich um ein XML-basiertes Dateiformat, das ohne Qualitätsverlust skalierbar ist.

Vorteile von SVG-Grafiken

  • Skalierbarkeit: SVG-Grafiken können ohne Qualitätsverlust auf jede Größe angepasst werden.

  • Bearbeitbarkeit: Als XML-basierte Dateien lassen sich SVG-Grafiken leicht in Code bearbeiten oder anpassen.

  • Interaktivität: SVG ermöglicht die Integration von Animationen und Interaktionen, die mit CSS und JavaScript gesteuert werden können.

Einbindung von SVG-Grafiken

SVG-Grafiken können auf verschiedene Weisen in Webseiten eingebunden werden:

  1. Verwendung des <img>-Elements:

    <img src="grafik.svg" alt="Beschreibung der Grafik">

    Dies ist die einfachste Methode, um SVG-Grafiken einzufügen.

  2. Direkte Einbindung im HTML-Code:

    <svg width="100" height="100">
    <!-- SVG-Inhalt hier -->
</svg>

    Diese Methode ermöglicht eine direkte Manipulation der SVG-Grafik mit CSS und JavaScript.

Aktuelle Relevanz von SVG

SVG ist keineswegs eine Nische, sondern wird in vielen Bereichen eingesetzt, darunter:

  • Webdesign: Für Logos, Icons und Illustrationen, die in verschiedenen Größen benötigt werden.

  • Datenvisualisierung: Erstellung von interaktiven Diagrammen und Grafiken.

  • Kartografie: Darstellung von Karten, die ohne Qualitätsverlust skaliert werden können.

Die Verwendung von SVG-Grafiken bietet zahlreiche Vorteile, insbesondere in Bezug auf Skalierbarkeit und Interaktivität, und ist daher in vielen modernen Webprojekten von Bedeutung.

Weitere Informationen

Note

SVG-Grafiken können auch mit dem Element <svg> eingebunden werden. SVG ist (ähnlich wie HTML) eine XML-Anwendung. Wenn Sie das <svg>-Element verwenden, dann binden Sie den SVG-Sourcecode direkt ein. Im Rahmen des Moduls soll aber darauf verzichtet werden, denn mit der direkten Einbindung wird es schnell unübersichtlich. Ein Beispiel dazu finden Sie bei selfhtml.

Bei mediaevent werden sieben Möglichkeiten SVG einzubinden genannt.