Pixelfans

9 Jul 2010

Spielerei in SVG

geschrieben von Pawel

SVG ist in diesem Jahr der erhoffte Durchbruch gelungen. Beim Gestalten einiger Grafiken habe ich einige Überraschungen erlebt. Die SVG-Unterstützung ist nicht nur ein kontinuierlicher Prozess, der Schritt für Schritt der Gesamtstandard implementiert. Alle Browserhersteller setzen andere Schwerpunkte. Jeff Schillers Blog stellt die aktuelle Fähigkeiten aller Browser dar.

Idee

Mich hat gereizt, ob sich durch das Ausnutzen der Unterschiede eine Browserweiche nur in SVG möglich wäre. Hier ist das aktuelle Ergebnis:

Demo

Die Weiche unterscheidet zwischen folgenden Browsern:

  • Safari 4+5
  • Chrome 5
  • Firefox 3.6
  • Firefox 4
  • Opera 10

Beschreibung:

Zunächst wird ein weisses Rechteck als Hintergrund definiert. Weiss ist zwar häufig die Standardfarbe. Darauf wollte ich mich aber nicht verlassen. Die jeweiligen Browsernamen werden in Textfeldern definiert und übereinander gestapelt. Der Kniff besteht darin, dass der jeweilige Browser nur seinen Text anzeigen sollte.

Chrome 5 versteht schon einige filter und unterscheidet sich dadurch von Safari. Ich habe als Schriftfarbe weiss festgelegt. Dadurch ist die Schrift auf dem Hintergrund nicht sichtbar. Durch Verwendung von feFlood erhält der Text für Chrome, jedoch nicht für Safari eine andere Farbe für den Textr. Chrome zeigt Elemente nicht an, wenn auf diese und das gruppierende Element ein filter angewendet sind.

Firefox 3.6 versteht noch keine Animationen über die Beschreibungssprache SMIL. Über diese Anweisungen wird der Text für die Webkitbrowser eingeblendet, welches Firefox nicht interpretieren kann. Gleichzeitig wird via SMIL festgelegt, dass der Text für den Firefox 3.6 ausgeblendet werden soll, was er nicht interpretiert und dadurch sichtbar bleibt.

Safari 4+5 zeigen auch den Text an, der für Chrome unsichtbar wird, da filter komplett ignoriert werden.

Firefox 4 gewinnt wesentliche SMIL-Fähigkeiten dazu und interpretiert filter beinahe so gut, wie Opera. Ich habe ausgenutzt, dass man auch filter animieren kann. Der schon oben genutzte feFlood wird kombiniert mit feComposite, wodurch der filter im Chrome nicht sichtbar wird. Zusätzlich wird er noch per Animation eingeblendet. Dadurch wird er im Firefox 3.6 nicht gerendert. Damit wird ein weisse Schicht über die anderen Texte gelegt. Aus einem weiteren Rechteck wird mittels clipPath nur der Text "ausgestanzt".

Opera 10 ist der SVG-Browser schlechthin. Auch bei Opera führt der doppelt angewandte filter für Element und Elternelement (wie bei Chrome beschrieben) dazu, dass es nicht dargestellt wird. Als bisher einziger Browser beherrscht er aber die Verwendung von externen Text via tref. Durch den verwendeten Platz überdeckt es noch sichtbare Texte.

Das Beispiel ist keine echte Browserweiche oder ein Hack. Er funktioniert zwar ohne Javascript, dient aber mehr der Demonstrationen der unterschiedlichen Fähigkeiten der Browser, die man als Gestalter berücksichtigen muss.

Kategorie: CSS , Ideen , Layout , SVG | Trackbacks (0) | Permalink