Der Internet Explorer 9 aus Entwicklersicht (Teil 8)

Scalable Vector Graphics (SVG)

Lange Zeit wurden Scalable Vector Graphics nicht vom Internet Explorer unterstützt. Mit der aktuellen Version wird endlich eine umfassende Unterstützung für das Format eingeführt. Der IE9 ermöglicht die direkte Einbettung von SVG-Grafiken, ohne dass ein zusätzliches Plug-in oder ein Viewer notwendig ist. Umgesetzt wurde eine Unterstützung basierend auf der Version SVG 1.1, (Second-Edition-)Draft-Spezifikation für Desktopbrowser. Wie auch die bereits beschriebenen HTML5-Funktionalitäten nutzt SVG ebenfalls die Hardwarebeschleunigung. Zu den umgesetzten SVG-Funktionalitäten zählt u. a. Folgendes:

SVG-Dokumentenstruktur
Interaktivität
Style-Manipulation (inline und über CSS)
Basisformen
Fill-, stroke-, marker- und color-Eigenschaften
Gradient- und Pattern-Eigenschaften
Pfade
Text

Die Einbettung einer SVG-Grafik kann auf vier unterschiedlichen Arten erfolgen, die in Tabelle 3 gezeigt und erläutert werden.

HTML	Beschreibung
Hier SVG Markup … …	Fügt eine SVG-Grafik per Inline HTML ein.
Hier SVG Markup …	Fügt eine SVG-Grafik per Inline XHTML ein.
	Einbettung einer SVG-Grafik mittels object-Tag.
Hier SVG-Markup …	Bereitstellung/Auslieferung einer SVG-Grafik als *.svg-Dokument.

_{Tabelle 3: Einbettung von SVG-Grafiken}

Durch die Möglichkeit der Interaktivität über Ereignisse können mithilfe von JavaScript-Funktionen animierte SVG-Grafiken realisiert werden. Über diesen neuen Weg können Benutzerschnittstellen realisiert werden, die zuvor nur mit Flash möglich waren. Listing 6 zeigt, wie eine SVG-Grafik erzeugt wird und auf Ereignisse reagiert. Beim Klick auf die Grafik wird die Hintergrundfarbe des gefüllten Kreises verändert.

Listing 6


  Internet Explorer 9 Features

Scalable Vector Graphics (SVG)

Relevante Beiträge