@media in SVG

geschrieben von Pawel

Immer mehr Seiten nutzen SVG zur Darstellung von Diagrammen. Das hat einen großen Vorteil, lassen sich doch SVG's direkt aus Datenbanken erzeugen. Das ist zwar nach meiner Meinung bisher nur ein Bruchteil, was damit machbar ist, aber ein typisches Problem wird jetzt schon deutlich: Die Ausgabe der Grafik an verschiedene Ausgabegeräte.

Hier zeigt sich ein weiterer Vorteil des Formates - @media-Regeln werden interpretiert.

Ebenso, wie bei HTML ist es dazu nötig, innerhalb des CSS z.B @media print zu formulieren. Verwirrend ist es vielleicht, das CSS in SVG nicht ganz so mächtig ist. Viele Stile lassen sich auch als Atrribute formulieren, was typischerweise die älteren Programme zur Erstellung von SVG-Grafiken nutzen. Ein fill="red" ähnelt style="fill:red". Stile überschreiben die Attribute, wie

dieses Beispiel

illustriert. Filter, Farben usw. lassen sich bequem über Styles zuweisen und damit zwischen Druckansicht und Bildschirmansicht differenzieren.

Diese Geschenkebox

zeigt, wie so etwas aussehen könnte. In Verbindung mit media-queries sind hier auch unterschiedliche Größen der Grafik in Abhängigkeit vom Endgerät vorstellbar.

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

Workaround für den Webkitbug

geschrieben von Pawel

object ist das Containerlement für Multimediaelemente schlechthin. Es ermöglicht die Angabe von Alternativinhalten, die angezeigt werden, wenn sich der Browser auf den Medientyp nicht versteht. Häufig wird der Tag bei Flashfilmen, etwa von Youtube eingesetzt, aber er eignet sich auch hervorragend für die Einbindung von SVG, die fast jeder moderne Browser anzeigen kann. Der Internet Explorer benötigt bis einschließlich der Version 8 dafür ein Plugin. Selbst die Einbindung des SVG via data/uri ist möglich, was zusätzliche Requests spart.

Das Designerherz könnte nicht höher schlagen, wenn die Webkitbrowser, ab der Version 4 nicht einen hässlichen Bug mitbringen würden. Wenn keine Hintergrundfarbe angegeben wird, zeigen sie das eingebette Objekt in seiner ganzen Eckigkeit mit blütenweißen Hintergrund. Das ist so gut wie nie erwünscht, es sei denn ein Diagramm ist rechteckig oder die Website hat einen weißen Hintergrund.

Als Workaraund mag manchmal das bewußte Verwenden von Farben oder Biildhintergründen dienen, ich habe noch einen weiteren Vorschlag.

Der Workaround beruht darauf, dass Webkitbrowser diese Darstellungsprobleme, bei der Einbindung als img nicht haben. Der object-Tag kann also zur Laufzeit mit JavaScript umgeschrieben werden, was eigentlich recht simpel ist.

Ich hatte den Anspruch

• kein JavaScript-Framework zu verwenden
• das Umschreiben nur für Webkit zu veranlassen
• nur SVG's zu erfassen, bei anderen Medieninhalten den Tag zu belassen
• ein mehrfach verwendbares Skript zu entwickeln

Teil des JavaScripts

var i=document.createElement("img");
i.src=e.data;
if(e.firstChild.nodeType == 3){
i.alt=e.firstChild.nodeValue;}
else i.alt="Die SVG-Grafik kann nicht angezeigt werden."; 
p = e.parentNode;	
p.replaceChild(i,e);

Es wird ein neues Bildelement erzeugt und der Inhalt des data-Feldes, welches den Pfad zur SVG enthält auf das src übertragen. Es wird noch überprüft, ob der Alternativinhalt aus Text besteht, der dann Inhalt der Alternativbeschreibung des Bildes wird. Sollte der Alternativinhalt kein Text sein, wird er ersetzt. Nachdem das Skript das Elternelement ermittelt hat wird das object durch ein img ersetzt.

Wäre nur ein Tag zu ersetzen, würde diesen kurzen Anweisungen schon ausreichen. Kniffliger ist es, alle obigen Voraussetzungen umzusetzen, was ich ohne einen Programmiermuttersprachler wie Thomas Meinke nicht geschafft hätte. Die Prüfung, ob das Element SVG-Content enthält

e.type=="image/svg+xml"

scheitert innerhalb einer einfachen Schleife, da die length-Eigenschaft sich zur Laufzeit ändert. Der finale Code erfüllt alle Anforderungen:

Demo des Workarounds für Webkit

Der Workaround ist eher dort geeignet, wo SVG als Bilder verwendet werden und ist ein weiteres Argument dafür, SVG's auch heute schon einzusetzen.

Nachtrag 10.10.2010: Die aktuelle Beta vom Chrome 7 hat den Bug behoben.

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

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 | Trackbacks (0) | Permalink