Der Internet Explorer 9 aus Entwicklersicht (Teil 8)
Kommentare

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

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.

     width=“120″ height=“90″>

    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
  


  
    
  
  
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -