Pixelfans

Vektorgrafik mit Javascript

geschrieben von Pawel

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.

Kategorie: JS , SVG | Kommentare (0) | Trackbacks (0) | Permalink

---

You could see happy faces

geschrieben von carsten

, if you had thought about your wordpress plugins.

Nein jetzt mal ehrlich. Man kann tolle Sachen mit wordpress Plugins machen, aber nur solange man dabei sein Ziel nicht aus den Augen verliert.

You could see clickable smiley faces here if you had JavaScript activated

ist eine der häufigsten Seitenbeschreibungen, die ich in den vergangenen Tagen im Netz gelesen habe. Immer wieder taucht dieser merkwürdige Text in meinen google-Suchergebnisslisten auf. Eigentlich suche ich aber weder clickable noch smiley faces, als vielmehr wordpress-eigene Funktionen und Template-Tags, die ich in - als php getarntem - JavaScript verwenden kann. Meine Phrase also, vielleicht laienhaft aber doch technisch orientiert 'wordpress is_home javascript'. Und das Ergebniss ernüchternd bis amüsant. Aktuell habe ich eher keine Lust und Zeit auszuwerten woher dieser Blödsinn rührt und reihe mich damit als einer mehr in die Reihe der über 200.000 Seiten zu diesem Thema. Gute Nacht.

Kategorie: News | Kommentare (0) | Trackbacks (0) | Permalink

---

Halbzeit im SVG-Jahr 2010

geschrieben von Pawel

Die Halbzeit ist Anlass für mich eine kleine Bilanz zu ziehen. Ich nehme damit Bezug zu meinem Artikel vom Anfang des Jahres.

Warum setzt sich der Standard nach 9 Jahren durch?

Der Brower aus Redmond ist zwar nicht mehr in der Lage „...sie alle zu knechten...“, hat aber anhaltend eine hohe Bedeutung. Das hat auch mit der hohen Verbreitung des Microsoft-Betriebssystems zu tun. Das der IE 9 SVG direkt unterstützen wird, hilft der Verbreitung des Webstandards SVG.

Egal wie sich jeder Webentwickler in der Auseinandersetzung Apple vs. Adobe positioniert, die Kunden wünschen Seiten, die auch auf dem Iphone und dem Ipad gut aussehen. Auf der SVG-Developer-Liste stellen sich jetzt wiederholt Newcomer vor, die bisher für Flash entwickelt haben.

Was muss ein Gestalter beachten?

(vermutete) Browserverteilung Ende 2010

Am Ende des Jahres werden die Browserstatistiken vermutlich so aussehen:

• IE bis 8 30%
• IE9 10%
• Firefox4 30%
• Chrome 15%
• Safari 6 %
• Opera 10.6 6%

Design

Safari und der IE verstehen keine filter-Anweisungen. Das betrifft auch den Unschärfefilter. Als workaround kann auf einen Farbverlauf ausgewichen werden. Ansonsten gilt das selbe, wie bei CSS und HTML: Browser, die höhere Darstellungsfähigkeiten haben, zeigen die Grafiken eben etwas hübscher an.

Zum Gestalten der Grafiken eignen sich der Adobe Illustrator und Inkscape. Beide Programme haben eine unterschiedliche Logik und erfordern eine gewisse Einarbeitungszeit. Beim Printdesign spielen die Dateigrößen von Vektorgrafiken normalerweise keine Rolle, da sie im Vergleich zu den Fotos verschwindend klein sind.Dateigrößen über 150 kb sind im Web jedoch nicht hinnehmbar.

Der Optimierungsprozess beginnt in der Gestaltung schon mit einer vernünftigen Reduktion auf die wesentlichsten Gestaltungselemente. Im AI ist die Grafik unbedingt für das Web abzuspeichern und in Inkscape ist die Einstellung optimiertes SVG zu wählen.

Einbettung

Inline – direkt ins (X)HTML

SVG können Inline in ein HTML5, XHTML5 und XHTML1.1 eingebettet werden. In der letzten Variante müssen alle Elemente den Namespace mitführen. Aus <svg> wird dann <svg:svg>, aus <g> wird <svg:g> u.s.w. Das geht zwar auch per Suchen und Ersetzen ist aber unkomfortabel. Alle o.g. Browser zeigen bei XHTML5 die eingebetteten Grafiken an. Erforderlich ist dafür, aber eine weitestgehende Kontrolle über das Markup, da jeder Fehler zu einem Lesefehler der Seite führt. Der Einsatz eines WYSIWYG-Editors scheidet damit aus.

Firefox4 und IE9 zeigen direkt eingebettete Grafiken auch bei HTML5 an. Durchsetzen wird sich diese spannendste Form, wenn Opera und die Webkitbrowser es auch darstellen.

Einbettung per object-Tag

Diese Variante funktioniert in alle Browsern.

<object type="image/svg+xml" data="Grafik.svg"><img src="Grafikt.png" alt="Grafik" /></object>

Bei Infografiken läßt sich das uneingeschränkt empfehlen. Anhaltend haben die Webkitbrowser einen Bug, dass sie dem Hintergrund eines so eingebetten SVG unbedingt einen weißen Hintergrund mitgeben müssen. Sollte man die gesamte eckige Pracht nicht so mögen, kann mit einer anderen Hintergrundfarbe ein bisschen getrickst werden. Unter Linux kann mit einem beherzten

gzip -c < Grafik.svg t> Grafik.svgz

die Grafik gepackt werden. Damit diese angezeigt wird, muss aber der Apache dies verstehen, was am einfachsten mit einer Anpassung der .htaccess gelingt:

AddType image/svg+xml svgz
AddEncoding gzip .svgz 

Einbettung per CSS

Kaum zu glauben aber wahr. Am Ende des Jahres sollen dies alle Browser beherrschen. Opera und Webkit können das schon länger, die Preview des IE beherrscht es und für den Firefox4 steht es auf der ToDo-Liste. Das geht sogar mit data/uri. Ich rate im Moment aber noch davon ab, komplette Hintergründe damit zu gestalten. Opera 10.6 „friert“ dabei regelmäßig ein.

Eine empfehlenswerte Testseite findet sich bei deveria.com. Dort können alle Browser auf ihre Fähigkeiten überprüft werden. Zusätzlich werden noch weitere Einbettungsformen vorgestellt.

Fazit:

Am Ende des Jahres gibt es eine breite Unterstützung des Formates durch die Browser. Damit sind jetzt die Gestalter gefragt, um neue Ideen umzusetzen.

Kategorie: Ideen , Layout , SVG | Kommentare (0) | Permalink

---