Ich habe mich eines Tages gefragt, ob man eine Website mit etwas anderem schreiben kann, als HTML. HTML, die Auszeichnungssprache des Internet, des Planeten. Kaum eine Website ist ohne HTML. Alternativen wären Flash, Silverlight oder Java, was aber auf dem meisten solchen Websites erst mittels HTML eingebunden wird. Wieder HTML.
Ein Website kann auf Basis jeder Datei oder mehrerer Dateien bestehen. Eigentlich könnte es einfach eine Bilddatei sein. Aber was ist schon ein Bild? Eine Website mit quasi nur einer Seite? Natürlich recht sinnlos, wenn man viel zu sagen hat. Die Suche ging weiter.
Wieder einmal zurück zu den Bildern. Noch einmal scharf nachgedacht. Ein nettes scharfes vektorbasiertes Bild gesehen und noch einmal nachgedacht. Die erste Idee entfacht. Wieder zurück zu dem Bild geschaut. Es ist natürlich eine SVG (Scalable Vector Graphics). Solche Bilder, im internen Aufbau von XML-Dateien. XML schön und gut. Bis hierhin war mir das Potenzial von SVG nicht bewusst.
Das erste was jeder gute Informatiker anstellt ist googeln. Herausfinden, was SVG kann. An erster Stelle die Wikipedia mit wichtigen Informationen. SVG kann... . Animationen, SMIL - was?, Javascript - klingt schon besser, DOM - kenne ich irgendwo her. Der drehende Ball gab mir ein lächeln und ein kleiner Test erwies mir die Interaktivität mit SVG. Es war endlich ein Zeitpunkt gekommen, von dem an ich das DOM-Prinzip, SVG mit XML und Javascript lerne.
Viele Tests bedurfte es um sicherzustellen, dass alle Pläne umsetzbar sind. Ein schwieriges unterfangen, da die einzig wirklich hilfreiche Dokumentation die des W3C ist. Die HTML-Übermacht im Web verschlingt alles andere in den Suchergebnissen. Kaum jemand wagt daran zu denken, dass Javascript zur Manipulation von XML-Daten und damit auch SVG per DOM gedacht ist. Dank dieser Tatsache wird es glücklicherweise von all den relevanten Browsern unterstützt. Ich habe eine alternative zu HTML gefunden!
Die kleinen Probleme:An erster Stelle der Internet-Explorer 9 (Wer hätte das [nicht] gedacht?! ) der immer noch keine importNode-Funktion des DOM2 besitzt, die seit dem Jahr 2000 beim W3C als Standard lagert. Es ist womöglich möglich, dass animierte SVG's im IE9 funktionieren. Aber bis dahin benötige ich noch einen Ersatz für die fehlende Funktion.
Irgendwie ist Opera etwas besonderes zwischen den ganzen Browsern. Ein Programmierer kennt das Paradigma: Programmieren, programmieren, programmieren, testen. Viele Tests sind wichtig, aber manchmal geht es nicht anders. Wenn es einmal nicht anders geht, kann man nur noch beten, dass der Code am Ende läuft. Bestenfalls in allen Testumgebungen beziehungsweise Browsern. Oder zumindest in einem Browser wäre schon recht nett. Witzigerweise hatte ich diese Situation. Nur Opera führte es aus. Was war es? Warum? Ich schätze mal, dass man das auf der Wort "Street-HTML", was Opera irgendwie fern unterstützen vermag, zurückführen kann. Nun im Bezug auf DOM/XML. Denn Opera benötigt die importNode-Funktion nicht, welche eigentlich nur dafür da ist, um einem Dokument entsprechende "Nutzungsrechte" einzuräumen. Dank dessen wusste ich schon mal, dass der Code fasst richtig ist. Ich fand anhand der Fehlermeldung von Chromium den Grund beim W3C und wusste nun die importNode-Funktion für andere Browser zu nutzen.
Die nächste Schlacht drehte sich um Firefox 4. Allerdings nur ein kleines Problem. Firefox mag keine Animation in SVG's, die sich in SVG's befinden. Ist an sich erlaubt und funktioniert in Chromium und Opera. Beim anlegen in die DOM-Struktur musste eine eingefügte SVG zu einer Ebene umgewandelt werden. 5 Zeilen mehr Code ist nicht die Welt.
Jetzt wurden die anderen Browser diskriminiert, aber Opera kommt auch nicht ungeschoren davon. Ich weiß nicht, ob es richtig, wenn ein svg:use erstellt wird, bevor das dazugehörige Symbol vorhanden ist, welches das "use" nutzen will. Es kam daher zu Timing-Problemen in Opera, da ein Objekt genutzt werden sollte, bevor es da war. Das Problem ließ sich sehr schnell lösen, aber die Frage bleibt offen, ob das so richtig oder falsch ist.
Testapplikation - mittlerweile schon wieder alt und der Code ist unschön. Keine Interaktion enthalten. Aber man kann bestenfalls sehen, dass Animationen funktionieren.
sun.svg