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. |
|
|
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
Meinungen zu diesem Beitrag