(übersetzt von Arne Nordmann)
Es wird benutzt von Google Maps, Microsoft Visio, von Nintendo Wii, für Hintergrundbilder, für Live-Charts, SMS-Animationen, die Druckvorstufe, Desktop-Icons, Wikipedia, (Handy-)Layouts, Spiele, technische Zeichnungen und mehr. Der Finanzminister der Niederlande braucht es auf seinem Computer und denen von Tausenden seiner Mitarbeiter. Es hat viel gemein mit weltbekannten Technologien wie HTML, CSS, Javascript, XML, Flash, PDF und kann leicht mit ihnen kombiniert werden. Tatsächlich blickt man häufig darauf, und noch häufiger wird es im Gestaltungsprozess selbst verwendet. Trotzdem ist nicht unwahrscheinlich, dass Sie noch nie davon gehört haben: SVG – Scalable Vector Graphics.
Wenig bekannt ist SVG wahrscheinlich vor allem deshalb, weil klassisches Marketing für offene Standards selbst nicht funktioniert. Sehr viel interessanter ist jedoch, was SVG ist und warum es so häufig eingesetzt wird:
Bilder werden in der Regel als Ansammlung von Pixeln gespeichert: eine Farbe pro Punkt. Je mehr Pixel ein Bild hat, desto mehr Speicherplatz wird es benötigen und desto mehr Details können abgebildet werden, aber die Detailgenauigkeit ist niemals unendlich. Will man später ein Bild in eine andere Auflösung konvertieren, wird es immer ein Stückweit unschärfer. Mit Vektorgrafiken hingegen wird der Inhalt des Bildes mit Hilfe von Formen und Koordinaten beschrieben. Pixel entstehen erst, wenn das Bild in der gewünschten Größe angezeigt wird. Im folgenden ist zu sehen, was das zum Beispiel fürs Zoomen bedeutet (rot umrandet im mittleren Bild):
| Zoom mit Pixelgrafik: | Original: | Zoom mit Vektorgrafik: |
|
|
||
Das Originalbild wurde (auf dem Server) aus der folgenden Datei erzeugt:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px" height="200px" viewBox="0 0 200 200">
<rect fill="yellow" x="0" y="0" width="200" height="200" />
<text stroke="black" fill="black" font-family="Arial" font-size="40" x="100" text-anchor="middle" y="40">try to read</text>
<text stroke="black" fill="black" font-family="Arial" font-size="40" x="100" text-anchor="middle" y="80" font-weight="bold">this</text>
<!-- the arrow --> <path d="M110,95 v40 h20 l -30,30 l -30,-30 h20 v-40 z" fill="black" />
<text font-size="3" font-weight="bold" text-anchor="middle" x="100" y="170">Vector text</text>
</svg>
Öffnet man diese Datei in einem SVG-Betrachter, sieht man das Bild; öffnet man sie in einem Text-Editor, sieht man den Quelltext, ähnlich wie bei HTML ("Quelltext betrachten" im Webbrowser). Die meisten Zeichenprogramme besitzen mittlerweile die Möglichkeit, Inhalte als SVG zu speichern (das vielverwendete Inkscape wurde sogar genau dafür programmiert). Man muss den Quelltext also nicht unbedingt betrachten, aber als Benutzer hat man wegen seiner Möglichkeiten und Einfachheit für Programmierer (indirekt) viele Vorteile davon. Wie sich aus der Liste der Anwendungen schließen lässt, ist SVG mehr als nur ein weiteres Grafikformat. “Scalable” (Skalierbar) im Namen deutet darauf hin, wie sehr es auf anderen Technologien, anderer Software und unseren Vorkenntnissen aufbaut. SVG ist nämlich nicht nur offen hinsichtlich seiner Verfügbarkeit und der Lizenz der Spezifikation, sondern auch hinsichtlich Zugänglichkeit, Gestaltung und Bewahrung von Informationen.
Google kann den Quelltext von SVGs lesen, der Wortlaut “Vector text” aus dem Beispiel kann somit von Suchmaschinen gefunden werden. Sogenannte Web 2.0 Mash-Ups, die geschickt Informationen verschiedener Websites kombinieren, können so davon profitieren. Blinde oder sehbehinderte Menschen können Text über Sprach- oder Braille-Ausgabe trotzdem lesen. Nicht zu vergessen, dass der Text über kunstvolle Zeichen verfügen kann und nicht zwingend auf einer geraden Linie verlaufen muss, aber trotzdem in Dokumente oder E-Mails kopiert werden kann. Lesbarer Quelltext kann darüber hinaus weitere Informationen bieten als nur den sichtbaren Text. So lassen sich den einzelnen Elementen Titel, Beschreibung und Daten(links) zuweisen, wie man es von XML gewohnt ist.
Neben all den Offline- und serverbasierten SVGs und dem SVGs zu Designzwecken werden mehr und mehr SVGs direkt ins Internet gestellt (bisweilen zusammen mit dem SVG-Logo zur Linken), denn dort kann es optimal interaktiv genutzt werden. Nichtsdestotrotz ist der Webbrowser einer der letzten und schwierigsten Hürden, die SVG nehmen muss. Da es sich bei Browsern um eine universelle, weitverbreitete Software handelt, dürfen sie sich entgegen anderen Programmen nicht auf eine unvollständige Implementierung der Spezifikationen beschränken, auch wenn diese schon viele Inhalte anzeigen können. Alle modernen Browser
haben für die nahe Zukunft Releases mit großen Schritten in Richtung
100%iger SVG-Unterstützung geplant. Einzig der Internet Explorer benötigt nach wie vor ein Plug-in zum Anzeigen von SVGs.
Durch Live-Anfragen und -Manipulation von SVGs werden grafisch anspruchsvolle Applikationen möglich, die sich und damit das SVG, das sie selbst sind, auf Basis live empfangener Daten selbst aktualisieren. "Grafisch anspruchsvoll" beschränkt sich dabei nicht allein auf geometrische Objekte, sondern kann Fotos, Farbverläufe, Animationen und Videos beinhalten. Auch dabei ist der Erhalt von Informationen von wesentlicher Bedeutung. So muss man Animationen nicht mehr in Form von Bildern pro Sekunde betrachten, sondern als Anfang, Ende und einem gleichmäßigen Prozess dazwischen. Der Betrachter kann dann selbst die optimale Ausgabe bestimmen, abhängig davon, ob er es auf einem schnellen Computer oder einem Mobiltelefon betrachtet.
Nun wollen Sie wahrscheinlich einige Beispiele sehen. Das geschieht am besten in Form einiger Videos, die die SVG-Verwendung demonstrieren.
Wenn Sie Interesse daran und an den neuesten Entwicklungen haben und/oder die SVG-Community kennenlernen wollen, dann melden Sie Sich schnell für die weltweite Konferenz SVG Open an, die in diesem Jahr in Deutschland in der schönen Stadt Nürnberg ausgerichtet wird.
SVG ist kein magisches Allheilmittel, aber definitiv ein plattformübergreifendes Vielheilmittel, das Kooperation zwischen Programmierern, Designern und Benutzern erleichtert. Mit voller SVG-Unterstützung auf dem iPhone, SVG in dem wichtigstem Browsertest und browserübergreifenden Webapplikationen darf man noch auf vieles weitere hoffen.
Auf wiedersehen
Ruud Steltenpool
Ruud Steltenpool hat Vorträge auf der SVG Open in Tokio gehalten, Events in Enschede organisiert und ist außerdem an der Organisation der diesjährigen SVG Open in Nürnberg beteiligt. Er hat Artikel für Opera geschrieben, hat Feedback gegeben, das in Updates der W3C Spezifikations Anwendung fand und hat die SVG-Linksammlung svg.startpagina.nl erstellt. Er ist außerdem aktiv beteiligt an svg.org, IRC, bald auch svgplanet.com und – gemäß Google – noch Vielem mehr. Er hat den Artikel “Magical pictures” auf livre.nl geschriebenund schreibt in dem Blog der Universität Twente über offene Standards im Allgemeinen.
