vis4.net

Hi, I'm Gregor, welcome to my blog where I mostly write about data visualization, cartography, colors, data journalism and some of my open source software projects.

Kurzes Fazit zu SVG-Infografiken und RaphaelJS

#code

Hab heute mal zur Übung meine Parteispendenvisualisierung in JavaScript/SVG nachgebaut. Das Ergebnis befindet sich hier.

Fazit:

  • RaphaelJS ist ein geiles Framework. Hat richtig Spaß gemacht damit zu arbeiten. Einarbeitung hat keine 10 Minuten gedauert.
  • Die Entwicklung ging wesentlich schneller als ich dachte. Ohne irgendwelchen Code zu portieren hat mich der komplette rewrite from scratch nur vier Stunden gekostet.
  • Leider ist das SVG-Rendering zwischen den Browsern nicht 100% einheitlich.
  • Das Text-Rendering sieht in allen Browsern merkwürdig aus, besonders wenn der Text gedreht wird. In Chrome wirkt der Text verwaschen, in Firefox scheinen sich die Buchstaben mitten im Wort nach oben und unten zu verschieben. Das kann Flash deutlich besser (siehe Bild).
  • Einige Effekte lassen sich nur über CSS realisieren und sind nur eingeschränkt benutzbar. Firefox kann z.B. kein text-shadow für SVG-Text, und transparente Schatten kennt die CSS3 überhaupt nicht.
  • Für komplizierte Vektorgrafiken wie Bögen oder Bezierkurven bietet SVG bessere Unterstützung an als Flash. Auch das Darstellen von Liniendicken unter 1px sieht bei SVG besser aus als in Flash.

Hat also alles seine Vor- und Nachteile. Am sinnvollsten erscheint mir daher, Info-Visualisierungen sowohl in Flash als auch in SVG anzubieten, Flash als Standard und SVG als Fallback für IPhone/IPad-Benutzer.