Pixelfans

10 Feb 2010

SVG Year 2010

geschrieben von Pawel

Shaun Inman begrüßte in seinem tollen Layout im CSS-Zengarden alle Besucher des IE 6 mit einer frechen Upgrade-Grafik. Seiner Ansicht nach entsprachen 3 Jahre 99 Internetjahren.

Die vergangenen 9 Jahre, seit der Verabschiedung des SVG-Standards, entsprächen also ganzen Generationen von märchenhaften Dornröschens. Es fällt schwer, eine böse Fee zu entdecken, die für den langen Schlaf verantwortlich ist. Am dauerknutschenden Prinz Opera hat es in jedem Fall nicht gelegen, dass das Aufwachen solange gedauert hat. Diese Anzeichen sind jetzt unübersehbar, weswegen ich spontan einen Hashtag auf Twitter kreiert habe.

Browserunterstützung

Das Format kann nur genutzt werden, wenn es im Browser auch angezeigt wird. Die Firma Adobe, die die Entwicklung der Sprache wesentlich vorangetrieben hat, stellte ein Plugin zur Verfügung. Mit der Übernahme von Macromedia (und dem Flashformat) hat sie den Support dafür eingestellt. Glücklicherweise bringen aber alle Browser, außer dem IE, eine native Unterstützung für das Format mit, wenn auch in unterschiedlichen Umfang. Für mich verbinden sich die größten Einschränkungen mit den Webkitbrowsern. Diese zeigen bei der Einbettung über den object-Tag einen weißen Hintergrund und verstehen keine filter-Anweisungen, so dass nicht mal ein einfacher Verwischeffekt möglich ist.Hier sind aber wesentliche Verbesserung für die nächsten Versionen angekündigt.

Die Firefoxentwickler hatten ihm zwar schon mit der Version 1.5 einen nativen-SVG-Support spendiert, der aber sehr lange auf geringem Niveau verharrte. Auch hier scheint es jetzt eine deutliche Weiterentwicklung zu geben. Firefox unterstützt bereits jetzt die Darstellung von Inline-SVG bei text/html, wenn in der about:config html5.enable auf true gesetzt wird.

Es gibt jetzt keine Entschuldigung mehr, warum SVG nicht verwendet werden sollten. Dem IE können alternativ VML serviert werden, die über einen kleinen Umweg konvertiert werden können.

Informationen

Wer sich vertiefend belesen möchte, findet ein eher übersichtliches Angebot vor. Als gute Onlinequellen kann ich

empfehlen. Ein Buch, was mich wesentlich vorangebracht hat, ist "SVG Programming: The Graphical Web" von Kurt Cagle. Es ist 2001 erschienen und nur noch gebraucht zu kaufen.

Programme

Natürlich beherrscht das Lieblingswerkzeug professioneller Designer einen 1a SVG-Export. Da ich über dieses (teure) Programm aber nicht verfüge, kann ich dazu wenig sagen.

Als Werkzeug meiner Wahl beherrscht Inkscape ab der Version 0.47 eine Hervorhebung des Pfades, wenn sich die Maus über ein Objekt bewegt und integriert eine optimierte SVG-Ausgabe. Diese ist sehr zu empfehlen, sonst speichert Inkscape alle Muster und Filter mit ab, auch wenn diese gar nicht genutzt werden. Zusätzlich wird der Inkscape-Namespace entfernt und der Quelltext etwas kompakter formatiert.

Einen Blick wert ist Amaya, der bei Positionierungen eine Hilfe sein kann. Ich habe mir aber angewöhnt, die Pfade und Filter in Inkscape zu erstellen und dann in einem Editor die Feinarbeit zu machen und dabei kontrollierend in einen Firefox-Tab zu schauen.

Webworker

Die Seite svg-wow.org zeigt beeindruckende Designs, die in einer gleichnamigen Session während der Konferenz "SVG Open 2009" entstanden sind.

Shelley Powers hat im Januar 2010 gleich zwei (englischsprachige) Artikel bei A List Apart veröffentlicht. Beide sind insgesamt empfehlenswert, der zweite Artikel erläutert detailliert Erstellungs- und Einbindungsmöglichkeiten. Das ist ein Paukenschlag in einem Onlinemagazin, um das es in den letzten Jahren etwas ruhiger geworden ist. Es zeigt, dass sich auch die Webworker zunehmend für das erwachende Dornröschen interessieren. Vielleicht hilft es ja auch, dass das iphone anhaltend kein Flash aber SVG versteht. Es gibt jetzt sogar eine Javascriptlösung um Flash in SVG zu wandeln.

Ich finde auch die Inline-SVG-Variante sehr spannend und habe auch noch ein Beispiel, welches zeigt, wie effektiv SVG genutzt werden könnten. Das Icon taucht in mehreren Farben auf, der Pfad wird jedoch nur einmal erstellt. Gleichzeitig ist damit auch klar, dass diese Variante doch sehr stark an Inline-CSS erinnert. Auch Shelley gibt voller Begeisterung die Trennung von Layout und Inhalt in ihrem Beispiel 3 auf.

Ausblick

Keine Frage - 2010 wird das Jahr in dem sich SVG in Webseiten ebenso durchsetzen wird, wie im vergangenen Jahr @font-face.

Wenn wir jetzt aus dem Vollen schöpfen können, bedeutet das nicht das es immer sinnvoll ist. Wenn ein SVG, wie in Shelleys aber auch in meinem Beispiel als schmückender Hintergrund gedacht ist, gehört es inhaltlich eben nicht ins Dokument. Dann muss noch gewartet werden, bis der Firefox auch die Einbettung per CSS gestattet. Es muss auch nicht jedes Pixelbild in ein SVG konvertiert werden, zumindest aber nicht so, wie es das assertTrue zeigt. Bildregionen in Rechtecke zu übersetzen, geht am Sprachcharakter, den SVG auch hat, glatt vorbei. Eine angemessene Abstraktion habe ich mal an einem Bild von Webkrautsgründer Jens Grochtdreis versucht. Die Grafik verliert sich nicht im Detail sondern will einen Gesamteindruck vermitteln. Durch Verzicht auf filter wirkt es in allen SVG-Browsern für PC und Mobiltelefon.

SVG eignet sich also bereits für mehr als ein Balkendiagramm.

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