Pixelfans

Vektorgrafik mit Javascript

Webdesign zwingt immer wieder zu Kompromissen. Die überwiegende Mehrheit der Nutzer ist immer noch mit irgendeinen Internet Explorer unterwegs. Auch wenn Ende des Jahres der IE9 mit der nativen Unterstützung für SVG kommt, sind seine älteren Geschwister noch eine Weile im Netz aktiv und zwingen zu Kompromissen, wenn Vektorgrafiken genutzt werden sollen.

Dabei kann Javascript zum Einsatz kommen. Nun ist Javascript nicht unbedingt ideal. Abgesehen davon, dass es aktiviert sein muss, müssen zusätzliche Bibliotheken geladen werden und der Vorteil der Zugänglichkeits des Vektormarkups ist auch nicht mehr (unbedingt) gegeben. Auf der anderen Seite gibt es so viele Webseiten, die aktiviertes Javascript voraussetzen, das es überwiegend genutzt wird. Wenn Vektorgrafiken mit Scripten agieren sollen, ist es sowieso nötig.

Drei unterschiedliche Lösungen konkurrieren hier miteinander.

Raphaël

Raphaël besteht aus einer 55,3 KB großen Datei und bringt eine SVG-nahe Syntax mit, die aber erst erlernt werden muss. Zwar entsprechen die Grundformen und Pfaddefinitionen dem von SVG, Animationen, Gradienten und ähnliches müssen aber spezifisch beschrieben werden. Das Framework nutzt bei der Ausgabe der Vektoren VML für den Internet Explorer und sonst SVG. Es gibt leider keinen Konverter für dieses Framework. Perspektivisch deutet sich eine Lösung an.

Die Beispiele sind recht beeindruckend und können leicht modifiziert werden. Wenn man sich bei seiner Arbeit in Inkscape auf Pade beschränkt können diese direkt aus dem XML-Editor exportiert und als Variable eingefügt werden. Eine Stärke von Raphaël besteht deshalb in der Darstellung von einfacheren Formen in Kombination mit Interaktionen, wie zum Beispiel bei dieser Karte der BRD oder Charts.

SVGWeb

Das Googleprojekt SVGWeb übersetzt für die Internet Explorer SVG in Flash und deckt dabei einen beeindruckenden Sprachumfang ab. Die einzubindende Javscriptdatei ist aber stattliche 121kb schwer. Die Einbindung ist allerdings sehr simpel und erfolgt über einen <script>-Tag, der dann auch direkt SVG-Markup ohne Änderungen aufnehmen kann

AmpleSDK

Relativ wenig bekannt, aber sehr mächtig ist AmpleSDK. Das Framework beschränkt sich nicht auf SVG sondern möchte auch andere GUI-Elemente für alle Browser nutzbar machen. Neben einer runtime.js, die ca. 100kb groß ist, müssen die genutzten Module eingebunden werden. Für den Internet Explorer wird die Vektorgrafik in VML übersetzt. Die Sprachunterstützung von SVG ist geringer als beim Googleprojekt, die Einbindung gelingt aber ebenso leicht. AmpleSDK gestattet 3 verschiedene Einbindungen über einen <script>-Tag, die empfehlenswerteste haben wir in dieser Grafik, die Jens Grochtdreis darstellen soll, angewendet. Etwas komplizierte ist sie, bei der Verwendung der Animationssprache SMIL. Dieses Beispiel einer Fortschrittsanzeige läuft dann aber auch im Firefox 3.6, der diese noch nicht nativ beherrscht.

Fazit

Die praktikabelste Lösung ist für mich AmpleSDK, da sie auf Javascript und DOM-Manipulation beschränkt bleibt und kein Plugin auf dem Zielrechner benötigt. Die Grafiken können einfach in Inkscape erstellt werden. Natürlich gibt es Grenzen, die sich durch die Grenzen von VML ergeben. Wenn die Einbindung der Javascriptdateien und der <script>-Tag zudem noch durch Conditional Comments geklammert werden, hat man eine sehr flexible Lösung, bis nur noch Browser existieren, die diesen Kompromiss nicht mehr brauchen.

geschrieben von Pawel

---

Kommentare

Kommentar verfassen

Dieser Eintrag kann nicht mehr kommentiert werden.