Abb. 1: Erfolglose Suche nach SVG bei Sony Ericsson und Siemens
Der Einsatz von Scalable Vector Graphics ist keineswegs auf den Desktop beschränkt. Die Profile Tiny und Basic der SVG-Spezifikation 1.1 sind für den Einsatz auf mobilen Endgeräten wie Handys oder PDAs ausgelegt. Konkrete Anwendungen lassen sich jedoch nur umsetzen, wenn solche Geräte auch zur Anzeige von SVG fähig sind. Bei neueren Handy-Modellen ist das der Fall, was Grund genug zur Beschäftigung mit mobilen SVG-Anwendungen ist.
von Thomas Meinike
Im September 2001 wurde vom W3C die SVG-Spezifikation in der Version 1.0 offiziell auf den Weg gebracht [1]. Das für 2D-Vektorgrafiken geschaffene XML-Vokabular zog gleichermaßen Designer und Entwickler in seinen Bann, konnte aber bisher den etablierten Technologien wie Macromedia Flash nur wenig Konkurrenz machen. Dennoch besitzt SVG ein großes Potenzial und wird durchaus vielfach praktisch eingesetzt, oft in nicht so offensichtlichen Bereichen wie Firmen-Intranets im Rahmen von XML-Publikationsprozessen. Im Januar 2003 wurde SVG 1.1 als Empfehlung veröffentlicht. Dabei standen keine neuen Funktionalitäten im Mittelpunkt des Interesses, sondern die Modularisierung in so genannte Profile für mobile Anwendungen mit den Bezeichnungen SVG Tiny bzw. SVG Basic [2]. Beide sind Untermengen der Hauptspezifikation. Das Tiny-Profil ist wiederum eine Untermenge von SVG-Basic. Zur Vervollständigung dieses kurzen Exkurses in die SVG-Geschichte sei noch auf den Status von SVG 1.2 verwiesen: die im Endstadium befindlichen Working Drafts [3] stehen laut [4] für Mitte 2005 zur Verabschiedung an. Details zu den wesentlichen Neuerungen sind in [5] zu finden.
Für Desktop-Anwendungen auf leistungsfähigen Rechnern ist weiterhin das Gesamtpaket SVG 1.1 maßgebend. Da auf mobilen Endgeräten weitaus weniger Rechenleistung, Grafikfunktionen und Bandbreite zur Verfügung stehen, wurden die genannten SVG-Profile eingeführt. SVG Basic ist für PDAs und vergleichbare Systeme gedacht, während SVG Tiny entsprechend für „winzige“ Handy-Displays ausgelegt ist. Interessant wird eine Technologie jedoch erst, wenn man sie auch tatsächlich einsetzen kann. Obwohl die mobilen SVGProfile bereits seit mehr als zwei Jahren existieren, sind SVG-Anwendungen auf Handys noch weitgehend unbekannt. Anzeigesoftware gibt es zwar ebenso lange und auch „out-of-the-box“ SVG-fähige Handys wurden zeitnah zumindest auf den asiatischen Markt gebracht. In unseren Breiten dürfte ein Handy-Verkäufer die Frage nach SVG wie „vom anderen Stern“ vorkommen, obwohl mittlerweile eine Reihe von Modellen mit Tiny-Viewer zur Verfügung steht [6, 7]. Gängige Modelle wie das K700i von Sony Ericsson oder das S65 von Siemens bieten seit Mitte 2004 SVG-Unterstützung. Dennoch ergab die Abfrage der Firmen-Websites im Februar 2005 keinen Treffer zum Stichwort „SVG“ (Abbildung 1).
Abb. 1: Erfolglose Suche nach SVG bei Sony Ericsson und Siemens
Da die genannten Modelle offenbar SVG-fähig sein sollten, lag die Befragung von Bekannten und Kollegen nahe und ein Kollege hatte sich tatsächlich im Herbst 2004 das K700i zugelegt. Innerhalb weniger Minuten war dann das obligatorische „Hallo Welt!“-Dokument bestehend aus einem Textfragment, je einem Kreis (Element circle), Rechteck (Element rect) und Dreieck (Element polygon) sowie drei zusätzlichen rect-Elementen mit animierter Breite (Attribut width) im Notepad-Editor fertig gestellt und auf einen Webspace hochgeladen. Die zum Aufruf der Adresse über das Handy-Display erforderliche Fingerübung dauerte dann fast schon länger als die Erstellung der eigentlichen Grafik ;-). Dennoch hatte sich die Mühe gelohnt, da das Ergebnis des auf die wesentlichen Bestandteile reduzierten Listings 1 der Darstellung von Abbildung 2 entsprach. Allerdings war der rote Text zunächst nicht zu sehen, weil keine speziellen Schriftdefinitionen vorgesehen waren und offenbar die wenigsten Handys bei text-Elementen direkt auf Systemschriften zurückgreifen können. Eine gefundene Ausnahme ist das Modell E1000 von Motorola. Das Tool SVG Font Splicer [8] war beim Erstellen alternativer Font-Definitionen behilflich. Dieses Aha-Erlebnis machte die anstehende Suche nach einem neuen Handy für ein Familienmitglied leicht. Im örtlichen T-Punkt war einige Überzeugungsarbeit nötig, um auf den ausgestellten Geräten die präparierte Test-URL aufrufen zu dürfen. Nach zwei Stunden hatte eine bereits ziemlich gestresste Beraterin die erhoffte Vertragsverlängerung im Kasten und ein S65 weniger im Bestand. Weiteren Entwicklungen stand nun nichts mehr im Wege, zumal die im Lieferumfang des Handys enthaltene MMC-Karte mit 32 MB Kapazität via Kartenleser einen einfachen Zugang zu SVG-Dokumenten bot, ohne ständig online gehen zu müssen.
Abb. 2: Die erste "Hallo Welt!"-Grafik
Die Möglichkeiten von SVG Tiny erschließen sich nicht nur erfahrenen SVG-Entwicklern relativ schnell. Diese müssen lediglich lernen, welche Techniken von SVG 1.1 nicht zur Verfügung stehen, während der im Folgenden genannte verbleibende „Rest“ wie bisher verwendet werden kann:
Zum grundsätzlichen Verständnis der entwickelten Beispielanwendung sollten diese Angaben ausreichen. Weitere Details können bei Bedarf der Spezifikation entnommen werden.
Listing 1
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg version="1.1" baseProfile="tiny"
xmlns="http://www.w3.org/2000/svg"
width="132" height="176" viewBox="0 0 132 176">
<title>SVGT-Testbeispiel</title>
<desc>Beschreibungstext</desc>
<defs>
<font horiz-adv-x="1233">
<font-face font-family="Sera Sans Mono" .../>
<missing-glyph d="..."/>
<glyph unicode="H" glyph-name="H" d="..."/>
<!-- weitere Zeichen -->
<glyph unicode="!" glyph-name="exclam" d="..."/>
</font>
</defs>
<rect fill="#FFF" x="0" y="0" width="131" height="175" stroke="#000" stroke-width="1"/>
<text x="20" y="25" font-family="Sera Sans Mono" font-size="14" fill="#F00">Hallo Welt!</text>
<rect x="50" y="40" width="30" height="30" fill="#00F"/>
<circle cx="50" cy="70" r="10" fill="#FF0" stroke="#000"/>
<polygon points="60,100 70,80 80,100" fill="#090"/>
<rect x="15" y="120" width="0" height="10" fill="#FC3">
<animate attributeName="width" attributeType="XML" begin="0s" dur="10s" fill="freeze"
from="0" to="50"/>
</rect>
<!-- zwei weitere animierte Rechtecke -->
</svg>
Statische Vektorgrafiken lassen sich zwar auch als Hintergrundbilder bei diversen Handy-Modellen einsetzen, aber interessanter sind Überlegungen zu möglichen Anwendungen, speziell zu dynamisch erzeugten Visualisierungen. Das Beispielprojekt „WEATHER 4 NOW“ wurde mit der Zielstellung konzipiert, möglichst viele der genannten Techniken praktisch einzusetzen und dabei Erfahrungen zu Möglichkeiten und Grenzen der betrachteten Technologien zu sammeln. Wie im Namen bereits angedeutet, sollen Wetterinformationen veranschaulicht werden. Neben der Darstellung von abstrakten Zahlenwerten wurde die Ausgabe eines zur aktuellen Wetterlage passenden Symbols und eines Thermometers mit Skalenanimation als sinnvoll erachtet.
Die benötigten Wetterdaten werden vom Web Service „Global Weather“ bezogen [9]. Erwartet werden zur gewünschten Stadt/Land-Kombination passende Bezeichner für CityName und CountryName. Als Ergebnis wird ein XML-Dokument geliefert. Abbildung 3 zeigt einen Datensatz für die Kombination Leipzig/Germany, der über das Eingabeformular mit der POST-Methode generiert wurde.
Abb. 3: Abfrageformular für Wetterdaten und Ansicht des XML-Ergebnisses
In der SVG-Anwendung wird dagegen die GET-Variante in der Form globalweather.asmx/GetWeather?CityName=string&CountryName=string eingesetzt. Über einen aus zwei Zeichen bestehenden Parameter (cc) kann das Wetter für 25 Standorte abgefragt werden. Konkret würde http://hostname/w4n/?cc=BG das Wetter für B(erlin)/G(ermany) ermitteln. Die anderen Parameterwerte erschließen sich über den auf der Heft-CD gelieferten Code und über die Readme-Datei sowie mithilfe der Testseite w4n_demo.php. Durch den zusätzlichen Parameter sc mit ganzzahligen Werten von 1 (Standardwert) bis 5 kann die Skalierung der erzeugten Grafik beeinflusst werden. Die gesamte Software wurde mit PHP 4 entwickelt, wobei ggf. auf XML-DOM-Techniken von PHP 5 zurückgegriffen wird. Das vom Web Service erhaltene XML-Dokument bietet die relevanten Informationen indirekt in einem mit Entities kodierten XML-Textfragment. Der Zugriff auf die Daten wurde analog zur in [10] beschriebenen Nutzung eines weiteren Dienstes vom Anbieter WebserviceX.NET implementiert. An den Namen der Kindelemente von CurrentWeather ist der transportierte Inhalt ablesbar: Location, Time, Wind, Visibility, SkyConditions, Temperature, DewPoint, RelativeHumidity, Pressure, Status.
Sofern der Status-Wert „Success“ vorkommt, werden die separierten Daten in das Rahmen-SVG-Dokument mit Platzhaltern eingebunden. Einbezogen werden neben Standort und Datum/Zeit nur die Angaben zu Temperatur, Luftdruck und die durch SkyConditions beschriebene Wetterlage. Anhand typischer Stichworte wie cloudy, rain, shower, snow oder sunny wird ein entsprechendes Symbol zugeordnet. Dazu wurden Rastergrafiken mit dem im Zeichenprogramm Inkscape [11] enthaltenen Werkzeug vektorisiert und als SVG-Fragmente in einem Array gespeichert (Abbildung 4).
Abb. 4: Vektorisierung von Rastergrafiken mit Inkscape 0.41
Die genannte Skalenanimation wird ausgehend von der ermittelten Temperatur in Grad Celsius eingefügt. Es handelt sich um eine vertikal angeordnete Linie (Element line), deren y2-Attributwert innerhalb von 10 Sekunden bis zum aktuellen Temperaturwert erhöht wird.
Von besonderer Bedeutung ist die Einbindung der oben erwähnten Beschreibungen der Schriftzeichen. Zum Einsatz kam die von Bitstream zur freien Verfügung gestellte serifenlose SVG-Schriftart „Sera Sans“ [12]. Die Pfadbeschreibungen der Glyphen wurden in einem Array den jeweiligen Zeichen zugeordnet. Somit lassen sich ausgehend von den Wetterinformationen nur die benötigten Zeichendaten in das Zieldokument integrieren. Der formale Prozess wird mit dem Senden der Grafik in Verbindung mit dem MIME-Type image/svg+xml an die anfragende Instanz abgeschlossen. Je nach Konfiguration ist die zusätzliche Ausgabe der aktuellen Grafik in einem Rasterformat (JPEG oder PNG) unter Verwendung des Java-basierten Batik-Rasterizers [13] vorgesehen.
Zusammenfassend ergibt sich diese Abfolge von Schritten:
Zur Anzeige von SVG-Tiny-Dokumenten bieten sich neben dem direkten Abruf mit einem Handy (Abbildung 5) alternative Möglichkeiten an. Naheliegend ist die Verwendung eines Browsers mit installiertem Plug-in wie dem Adobe SVG Viewer 3.01 [14]. Noch eleganter sind Browser mit nativer SVG-Unterstützung. Ab der dritten Beta-Version von Opera 8.0 lassen sich Tiny-Grafiken direkt darstellen [15] (Abbildung 6). Einen anderen Zugang bietet die auch als Java-Applet verfügbare Viewer-Software von TinyLine [16]. Unter [17] steht eine Online-Demonstration zum Projekt bereit. Abbildung 7 veranschaulicht den Testaufbau.
Abb. 5: Ansicht der entwickelten Anwendung auf dem S65-Handy von Siemens
Abb. 6: Opera 8.0 stellt SVG-Tiny-Inhalte ohne Hilfsmittel dar
Abb. 7: Demonstration von WEATHER 4 NOW im Browser
SVG kann auch auf mobilen Endgeräten nutzbringend eingesetzt werden. Ob sich SVG Tiny bzw. SVG Basic auf dem Massenmarkt durchsetzen werden können, bleibt abzuwarten. Vorstellbar sind zumindest Anwendungen für spezielle Benutzergruppen, die mit entsprechenden Geräten oder Software ausgestattet sind. Das beschriebene Projekt hat gezeigt, dass sich SVG Tiny 1.1 gemäß der Spezifikation nahezu ohne Abstriche verwenden lässt. Aktuelle Entwicklungen im Bereich der Anzeigesoftware und die Verfügbarkeit komfortabler Entwicklungsumgebungen wie Beatware Mobile Designer [18, vgl. Abbildung 8] halten die Hoffnungen für eine künftig bessere Akzeptanz und Verbreitung von SVG hoch. Mit der Fertigstellung und Umsetzung von SVG 1.2 ergeben sich schließlich auch für den mobilen Bereich erweiterte Möglichkeiten.
Abb. 8: Animationsentwicklung mit dem Beatware Mobile Designer 1.1
Dr. Thomas Meinike ist seit 1997 an der Hochschule Merseburg (FH) als Lehrkraft tätig. Seine Arbeitsschwerpunkte in Lehre und Forschung sind XML-Anwendungen in der Technischen Dokumentation, Realisierung von Online-Hilfen sowie client- und serverseitige Webentwicklung. Er ist unter thomas.meinike@et.fh-merseburg.de erreichbar.
© Originalveröffentlichung in: XML & Web Services Magazin, Ausgabe 3.2005, S. 14–19
Online-Wiedergabe mit freundlicher Genehmigung der Redaktion.
Dokument: http://svgmob.datenverdrahten.de/SVG_zum_Mitnehmen/