Text, Bild und Animation aus einer Quelle

Eines der Hauptmerkmale von SVG gegenüber anderen Online-Standards (Ausnahme: Macromedia Flash) ist sicherlich die Tatsache, dass damit sowohl Texte, als auch Grafiken und Animationen möglich sind. Das folgende Beispiel zeigt Ihnen eine kurze Dokumentation wie Sie sie auch mit Acrobat Desiller (PDF) erstellen könnten[1]:

Beispiel 1: E-Dokumentation mit SVG

In puncto Texte müssen Sie jedoch einige Nachteile in Kauf nehmen. Das Größte Problem ist dabei, dass Sie mit SVG 1.0 noch keinen Textfluss über mehrere Zeilen erreichen. Hier müssen Sie einzelne Zeilen separat auszeichnen. Es entsteht ein ähnliches Nachführungsproblem wie mit PDF in Adobe Acrobat, mit dem Sie Texte auch nur Zeile für Zeile modifizieren können.

<text x="50" y="50" style="font-family:Verdana; font-size:12;">
<tspan x="50" dy="16">line 1</tspan>
<tspan x="50" dy="16">line 2</tspan>
<tspan x="50" dy="16">etc.</tspan>
</text>

Auf die redundante Auszeichnung des Attributs x können Sie nicht verzichten, da in SVG Zeichen nach der aktuellen Textposition (current text position) verschoben werden, d.h. "line 2" würde ohne das Attribut x in seiner X-Position auf "line 1" folgen. Wenigstens für die Y-Richtung können Sie das Problem der Positionierung minimieren: Mit dem Attribut dy erreichen Sie eine relative Verschiebung zur Vorgängerzeile. Verschieben Sie das äusserste <text>-Element in Y-Richtung, verschieben sich die anderen Zeilen automatisch mit.

Ein weiteres Problem ist der in der Dokumentation häufig verwendete Blocksatz. Auch das unterstützt SVG 1.0 nicht. Adobe Illustrator löst dieses Problem, indem es jedes einzelne Textteichen mit <tspan> auszeichnet, was selbstverständlich nicht optimal ist.

Zwar hat sich für die Dokumentation die SVG-Tool-Landschaft sehr zum Positiven hin verändert (z.B. unterstützen FrameMaker 7.0 und InDesign 2.0 bereits den Export von SVG), jedoch müssen wir für den Open Source-Gebrauch noch auf zukünftige SVG-Versionen hoffen. Z.B. soll für SVG 1.2 der Textfluss innerhalb eines oder mehrerer Rechtecke möglich sein (im Working Draft 1.1 waren bereits die Tags <div>, <p>, <span>, <region> und <br> enthalten, wurden aber für die Candidate Recommendation wieder herausgenommen). Für Version 2.0 ist bereits die Unterstützung von bündigem Satz innerhalb beliebiger Formen angedacht.

SVG ist zunächst einmal für Grafiken konzipiert. Dass diese sich auch noch animieren lassen, bietet natürlich gerade für die Technische Kommunikation erhebliche Vorteile. Denn damit lassen sich Arbeitsabläufe eindrücklich wiedergeben. Das folgende Beispiel zeigt zunächst eine statische Grafik: Zahnräder. Klicken Sie auf "run >>", werden Ihnen erstmals die Faktoren "Drehrichtung", "Geschwindigkeit" und "Auswirkung auf die anderen Zahnräder" verdeutlicht:

Beispiel 2: Animation als eindrückliches Medium