SVG/ Text als Graphik

SVG:

Text als Graphik

Text in SVG 1.1 wird wie anderer graphischer Inhalt wiedergegeben. Die Wiedergabe hängt allerdings davon ab, welche Schriftart dafür verwendet wird. In der verwendeten Schriftart werden die Buchstaben aus dem Quelltext als Glyphen repräsentiert. Die Schriftart kann auch Ligaturen enthalten, typisch wären etwa welche für ft, ff, fl etc. Die noch aus der Frakturzeit stammende ß-Ligatur gilt ohnehin als ein Buchstabe, nicht mehr als Ligatur. In einigen Fällen kann es auch sein, dass ein Buchstabe durch mehrere Glyphen repräsentiert wird. Daher muss die Anzahl der Buchstaben nicht mit der der darzustellenden Glyphen übereinstimmen. Die Zahl der Glyphen ist allerdings relevant dafür, wo welche Glyphe genau dargestellt wird. Die Zählung kann ferner davon abhängen, ob Leerzeichen erhalten bleiben sollen oder komprimiert werden. Bei den meisten Schriftarten ist zudem der von einem Buchstaben benötigte Platz nicht konstant, sondern vom Glyphen abhängig. Daher ist es für den Autor nicht trivial, genau vorherzusagen, wo welche Glyphe dargestellt werden wird. Auch sind nicht in jedem Darstellungsprogramm die vom Autor gewünschten Schriftarten verfügbar, so dass eine Schriftart verwendet werden kann, die lediglich ähnlich zur gewünschten ist, wenn der Autor nicht selbst mit SVG eine eigene Schriftart bereitstellt.

Jedenfalls kann der Autor bei Bedarf detailliert darauf Einfluss nehmen, wo und wie jede Glyphe dargestellt wird. Dazu haben die Textelemente einige Attribute. Für verschiedene Anwendungen stehen mehrere Textelemente zur Verfügung, die als Kindelemente des Basiselementes text auftreten können. In SVG tiny 1.1 tritt nur das Element text auf. In SVG tiny 1.2 gibt es darüber hinaus neue Elemente für Text.

Element text


SVG
1.1	1.7	8	1.5	3.2	4	?	?	2

Hello World

Bereits das Kapitel Start mit SVG hat sich mit der Anzeige von Texten mit SVG beschäftigt. Die einfachste Möglichkeit der Anzeige erfolgt mit dem Element text.

Leider ermöglicht SVG in den Versionen 1.0 und 1.1 keinen Zeilenumbruch. Dieser kleine "Makel" wurde inzwischen erkannt und kann im Bedarfsfalle seit SVG tiny 1.2 mit dem Element textArea umgangen werden. In der Version 1.1 hat der Autor den Text manuell umzubrechen und die jeweiligen Zeilen zum Beispiel in einzelnen text-Elementen unterzubringen. Es gibt allerdings auch andere, etwas schönere Möglichkeiten.

Attribute x und y

Mit den Attributen x und y wird die Textposition angegeben. Der Wert ist eine Liste von Koordinaten. Im einfachsten Falle wird jeweils exakt eine Koordinate für den gesamten Text angegeben. Die Attribute sind animierbar. Für ein fehlendes Attribut wird jeweils die Koordinate 0 angenommen.

Wie die Glyphen relativ zur angegebenen Position angeordnet werden, hängt von weiteren Präsentationsattributen ab. Die generelle Idee ist aber, dass bei Glyphen anders als bei den anderen Koordinatensystemen die y-Achse von unten nach oben zeigt. Ohne weitere Angaben ist also die y-Position unten beim Glyphen zu finden.

Zuerst nochmal das einfache Eingangsbeispiel:

   <text x="50" y="80">Hello World</text>

Die Attribute x und y können nicht nur eine Koordinate enthalten, sondern jeweils eine mit Komma oder Leerzeichen separierte Liste von Koordinaten für jeden einzelnen Glyphen. Die Koordinaten stehen für die aktuelle Textposition.

Bei der im deutschsprachigen Raum üblichen Schreibrichtung von links nach rechts ergibt sich bei mehr Glyphen als x-Koordinaten eine automatische Fortsetzung der aktuellen Textposition nach rechts.

Sind mehr Koordinaten als Glyphen angegeben, werden die überschüssigen Koordinaten ignoriert.

   <text 
     x="50 60 80 70 90 80 70 60 50 30 20" 
     y="20 30 50 40 60 70 80 90 110 100 130">Hello World</text>

Attribut rotate

Mit dem Attribut rotate können einzelne Glyphen um die aktuelle Textposition gedreht werden. Der Attributwert ist wiederum eine mit Komma oder Leerzeichen separierte Liste von Winkeln in Grad. Das Attribut ist animierbar (nicht additiv) Sofern nicht angegeben, wird 0 angenommen.

Unstrittig ist die Situation, wenn genau ein Winkel angegeben ist, dann werden alle Glyphen um diesem Winkel gedreht. Gibt es mehr Winkel als Glyphen, werden die überschüssigen Winkel ignoriert.

In der anderen Situation mit mehr Glyphen als Winkeln kann es praktische Probleme mit Implementierungen geben und einer als Fehler ausgegebenen Änderung in der Spezifikation. Die neue Variante ist zwar sinnvoller als die alte, bei älteren Darstellungsprogrammen ist natürlich ungewiss, wie diese die Situation interpretieren. Die aktuelle Interpretation ist, dass der letzte Winkel auf alle überschüssigen Glyphen angewendet wird. Die alte, alternative Interpretation war, dass die überschüssigen Glyphen ungedreht bleiben. Praktisch sollte ein Autor diesen Problemfall also vermeiden.

   <text x="50" y="20" rotate="-10">Hello World</text>
   <text x="50" y="60" 
    rotate="-10 -15 -20 -15 -10 -5 0 5 10 15 20 25">Hello World</text>

Attribute dx und dy

Mit den Attributen dx und dy kann die aktuelle Textposition relativ um den angegebenen Wert verschoben werden. Als Wert kann jeweils eine mit Komma oder Leerzeichen separierte Liste von Längen angegeben werden. Die Liste wird analog zu der von x und y interpretiert.

Die Attribute sind in SVG tiny nicht verfügbar.

   <text x="50" y="80" 
    dx="0 -2 2 3 3 7 5" 
    dy="0 -5 0 0 5 0 5 0 0 0 -5">Hello World</text>

Attribut textLength

Mit dem Attribut textLength kann der Autor die von ihm berechnete Länge des Textes angeben. Weicht die Berechnung des Darstellungsprogrammes von der Angabe ab, hat das Darstellungsprogramm eine entsprechende Anpassung der Glyphenpositionen vorzunehmen.

Der Wert ist eine Länge. Das Attribut ist animierbar. Voreinstellung ist die vom Darstellungsprogramm berechnete Textlänge.

Das Attribut ist in SVG tiny nicht verfügbar.

Attribut lengthAdjust

Mit dem Attribut lengthAdjust mit den möglichen Werten 'spacing' oder 'spacingAndGlyphs' wird angegeben, wie die Anpassung vorzunehmen ist. Im Falle von spacing werden nur die Abstände zwischen den Glyphen angepasst, was die Voreinstellung ist. Im Falle von spacingAndGlyphs wird beides gedehnt beziehungsweise komprimiert.

Das Attribut ist animierbar.

Das Attribut ist in SVG tiny nicht verfügbar.

   <text x="50" y="80" 
    font-size="10" 
    textLength="150" 
    lengthAdjust="spacing">Hello World</text>

Beispiel text

SVG-Beispiel text - spezifische Attribute

Hier kann ausprobiert werden, welche Attribute vom aktuellen Darstellungsprogramm bereits (korrekt) interpretiert werden: SVG-Beispiel text - spezifische Attribute

W3C: text

Element tspan


SVG
1.1	1.7	9	2	3.2	4	?	?	2

tspan ist eine Möglichkeit, um Teile eines Textes zu markieren, anders zu dekorieren oder zu positionieren und kann in SVG 1.1 eingesetzt werden (nicht in SVG tiny 1.1). Ohne Positionierungsfunktionalität ist dies Element auch in SVG tiny 1.2 verfügbar.

In SVG 1.1 tritt tspan innerhalb von text und textPath auf, in SVG tiny 1.2 auch innerhalb von textArea. Innerhalb von tspan können weitere tspan notiert werden, in SVG tiny 1.2 alle Elemente, die auch im Elternelement notiert werden dürfen, im Falle von textArea also auch tbreak.

Innerhalb von text können tspan-Elemente mit entsprechenden Attributen dazu dienen, neue Zeilen zu beginnen. Ein Darstellungsprogramm sollte so konstruierte mehrzeilige Texte am Stück markieren und kopieren können, anders als bei mehreren unabhängigen text-Elementen. Allerdings hat der Autor selbst zu entscheiden, was jeweils in eine Zeile gehört, einen automatischen Zeilenumbruch gibt es innerhalb von text auch mit tspan nicht.

Attribute von tspan

Entsprechend zu text hat tspan in SVG 1.1 die gleichen Attribute x, y, dx, dy, rotate, textLength und lengthAdjust. In SVG tiny 1.2 können nur allgemein anwendbare Präsentationsattribute verwendet werden.

Ist ein Attribut nicht angegeben, kommen jeweils, sofern angegeben, die Attribute des Elternelementes zur Anwendung.

Beispiele tspan

Beispiel mit Präsentationsattributen (SVG 1.1 und SVG tiny 1.2):

   <text x="50" y="80" 
    font-size="10" fill="blue">Hello <tspan fill="green">W<tspan fill="red"
    font-size="20">o</tspan>rld</tspan></text>

Mehrzeiliges Beispiel (SVG 1.1)

<text font-size="10"><tspan 
x="50" y="20">Hallo Welt</tspan><tspan 
x="50" y="40">Ja, dies ist eine neue Zeile
<tspan dx="20" dy="20">...und noch eine...</tspan></tspan>
</text>

Einfacher alle Glyphen eines Wortes drehen (SVG 1.1):

<text x="50" y="50" font-size="10"><tspan 
rotate="10">Hallo</tspan> <tspan
rotate="-10">Welt</tspan></text>

Mit den Autorenangaben zur Textlänge in folgendem Beispiel ist es wahrscheinlich, dass 'Welt' verdichtet wird und 'Hallo' und '!!!' auseinandergezogen. Die Angabe für das innere Element wird von der Angabe des äußeren abgezogen, um das Verhalten des äußeren zu bestimmen. Offenbar sollte also die Angabe für das äußere Element größer als für das innere sein, sonst kann das Darstellungsprogramm zu keiner plausiblen Darstellung gelangen.

<text x="50" y="50" font-size="10"
textLength="180" lengthAdjust="spacingAndGlyphs">Hallo
<tspan textLength="30"
lengthAdjust="spacingAndGlyphs">Welt</tspan>!!!</text>

tspan - spezifische Attribute

text und tspan - spezifische Attribute in beiden verwendet

Hier kann ausprobiert, welche Attribute vom aktuellen Darstellungsprogramm bereits (korrekt) interpretiert werden: SVG-Beispiel tspan - spezifische Attribute

Kniffliger wird es natürlich, wenn die Attribute sowohl für text als auch tspan notiert werden. Im Darstellungsprogramm muss dann korrekt implementiert sein, welcher Wert gilt. Zudem sollte das Darstellungsprogramm die evenfalls verfügbaren Elemente title und desc natürlich nicht direkt als graphische Textausgabe darstellen, obwohl sie im jeweiligen Element drinstehen.

SVG-Beispiel text und tspan - spezifische Attribute in beiden verwendet

Element tref


SVG
1.1	1.7	9	-	-	4	?	?	-

tref ist ein Element, mit dem Textinhalt anderer Elemente wiederverwendet werden kann und ist in SVG 1.1 verfügbar, nicht in tiny. tref kann innerhalb von text, tspan und textPath notiert werden.

Zum Beispiel kann so Text aus den Elementen title, desc, metadata zur direkten Anzeige als graphischer Inhalt gebracht werden, ohne den Text selbst wiederholen oder als Entität definieren zu müssen.

Attribute von tref

Die Attribute von XLink sind bei diesem Element verwendbar. Insbesondere dient das Attribut href dazu, ein anderes SVG-Element zu referenzieren, von dem der Text übernommen werden soll. Insbesondere ist href auch animierbar, dargestellter Textinhalt kann also ausgetauscht werden, etwa nützlich für Uhren oder Zähler.

Entsprechend zu text hat tref in SVG 1.1 die gleichen Attribute x, y, dx, dy, rotate, textLength und lengthAdjust. Das Verhalten ist ansonsten entsprechend zu tspan.

Beispiel tref

SVG-Beispiel tref

Beispiel - Wiederverwendung des Dokumenttitels und von Elementinhalten von Elementen innerhalb des Elementes defs im graphischen Teil:

<svg viewBox="0 0 500 300"
    xmlns="http://www.w3.org/2000/svg" version="1.1"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xml:lang="de"
    font-size="10" font-family="sans-serif">
<title id="title">Hallo! Welt?</title>
<defs>
<text id="text1" xml:lang="la">alea iacta est!</text>
<text id="text2" xml:lang="la">timeo danaos et dona ferentes!</text>
</defs>

<text><tref xlink:href="#title"
x="50" y="50" rotate="-10 -5 0 5 10 15 20 15 10 5 0 -5" />
</text>

<text x="50" y="50" xml:lang="la">
<tref xlink:href="#text1" dy="50" rotate="-15" />
<tref xlink:href="#text2" y="150" rotate="15" />
<tref xlink:href="#text1" y="200" rotate="5" />
<tref xlink:href="#text2" y="250" rotate="-5" />
</text>

</svg>

SVG-Beispiel tref

Element textPath


SVG
1.1	1.7	9	2	3.2	4	?	?	-

SVG-Beispiel textPath

Mit dem Element textPath ist es möglich, Text entlang eines Pfades anzuordnen, ist in SVG 1.1 verfügbar, nicht in tiny.

Attribut href von XLink

Mit dem Attribut href von XLink ist der Pfad (siehe entsprechenden Abschnitt zu Pfaden) zu referenzieren, entlang dessen der Text angeordnet werden soll. Der Wert ist also ein Fragmentidentifizierer eines Elementes path.

Ist mehr Text als Pfad vorhanden, wird jedenfalls der überschüssige Text nicht angezeigt.

Attribute textLength und lengthAdjust

Die schon für text angegebenen Attribute textLength und lengthAdjust sind auch für textPath verwendbar.

Attribut startOffset

startOffset gibt an, mit welchem Abstand relativ zum Beginn des Pfades der Text begonnen werden soll. Voreinstellung ist 0, Prozentangaben beziehen sich auf die gesamte Pfadlänge. Interessant kann auch ein negativer Wert sein (damit der Beginn des Textes nicht erscheint, kann hilfreich sein, wenn ein Lauftext animiert werden soll), dies ist nicht explizit ausgeschlossen.

Das Attribut ist animierbar.

Attribut method

Mittels method mit den möglichen Werten 'align' und 'stretch' wird angegeben, wie sich die Glyphen an den Pfad anpassen sollen. Bei 'align' werden die Glyphen einfach gedreht und verschoben, bei 'stretch' erfolgt auch noch eine Verzerrung des Buchstabens anhand der Krümmung des Pfades. Voreinstellung ist 'align'.

Das Attribut ist animierbar.

Attribut spacing

Mittels spacing mit den möglichen Werten 'auto' und 'exact' wird angegeben, wie mit dem Leerraum zwischen den Glyphen umgegangen werden soll. Im Falle von 'exact' ist in der Spezifikation ein Algorithmus angegeben, nach dem vorgegangen werden soll, bei der Voreinstellung 'auto' kann ein Algorithmus verwendet werden, der elegantere Resultate liefert.

Das Attribut ist animierbar.

Beispiele textPath

<g fill="none" stroke="#ccc">
<path id="Pfad1"
d="M-400,0C-400,-200 -200,-400  0,-400
S400,-200 400,0
200,400 0,400
-400,200 -400,0Z"/>

<path id="Pfad2"
d="M-400,0C-400,200 -200,400  0,400
S400,200 400,0
200,-400 0,-400
-400,-200 -400,0Z"/>

<path id="Pfad3"
d="M-300 -90 300 -90
M-300 -30 300 -30
M-300 30 300 30
M-300 90 300 90" />
</g>

<text font-size="50">
<textPath xlink:href="#Pfad1" id="Text" 
textLength="2450"><tspan dy="-10">Text kann 
entlang eines Pfades angeordnet werden.
Dazu wird das Element textPath
verwendet.</tspan></textPath>

<textPath xlink:href="#Pfad2"><tref xlink:href="#Text" 
textLength="2450" dy="-5" /></textPath>

<textPath xlink:href="#Pfad3" 
textLength="2350">Das Element eignet 
sich allerdings nur sehr eingeschränkt für
automatische Zeilenumbrüche.</textPath>
</text>

SVG-Beispiel textPath

Elemente textArea und tbreak


SVG
1.2 tiny	-	9.5	-	-	-	?	?	-

'Die Kleinsten' von Wilhelm Busch

SVG mit RDFa: 'Die Kleinsten' von Wilhelm Busch

Beispiel mit automatischem Zeilenumbruch: 'Die Abweisung' von Franz Kafka

Mit dem Element textArea kann unabhängig vom Element text Textinhalt in einem vorgegebenen Bereich ausgegeben werden, wo der Text bei Bedarf auch automatisch oder manuell umgebrochen wird.
Mit dem Element tbreak kann darin ein manueller Zeilenumbruch vorgenommen werden, mittels tspan kann ein Textfragment anders dekoriert werden.

tbreak ist ein leeres Element ohne spezifische Attribute.

textArea hat einige Attribute, wie folgt erläutert. Es gibt auch einige Eigenschaften, die in SVG tiny 1.2 als Präsentationsattribute zu notieren sind, die spezifisch für textArea sind.

Attribute x und y

Mit den Attributen x und y kann für textArea die linke obere Ecke des Textblockes angegeben werden, die Voreinstellung ist '0'. Der Wert ist jeweils eine Koordinate, x für die x-Position, y für die y-Position.

Die Attribute sind animierbar.

Attribute width und height

Mittels width und height kann Breite und Höhe angegeben werden, width für die Breite, height für die Höhe. Die Werte sind Längen oder der Wert 'auto'. Bei 'auto' wird die Ausdehnung automatisch berechnet. Die Voreinstellung ist 'auto'. Anders als vielleicht erwartet werden kann, wenn (X)HTML und CSS bereits bekannt sind, bedeutet 'auto' insbesondere für width nicht eine implizite Begrenzung durch ein Elternelement oder den Anzeigebereich, bei dem Wert sind sowohl width als auch height unbegrenzt. Erst wenn für width ein konkreter Wert angegeben wird, erfolgt gegebenenfalls ein automatischer Zeilenumbruch, sonst nur wenn einer mittels tbreak explizit angegeben wird. Ist insbesondere für height ein Wert angegeben und reicht der Platz für den Text nicht aus, so wird überstehender Text nicht angezeigt (!).

Die Attribute sind animierbar.

Eigenschaft line-increment

Die Eigenschaft line-increment gibt die Höhe einer Zeile an. Der Wert ist 'auto', 'inherit' oder eine Zahl. 'auto' ist die Voreinstellung, 'inherit' gibt eine Vererbung vom Elternelement an. Die Zahl gibt die Zeilenhöhe in lokalen Einheiten an. Ein negativer Wert wird ignoriert. Die Eigenschaft ist anwendbar auf textArea, tbreak und auf tspan, sofern es sich in textArea befindet.

Die Eigenschaft ist animierbar.

Eigenschaft text-align

text-align ist eine Eigenschaft zur Ausrichtung des Textes. Mögliche Werte sind 'start', 'end', 'center' und 'inherit'. Letzteres ist wie immer die Vererbung vom Elternelement. Bei der Schreibrichtung von links nach rechts bedeutet 'start' linksbündiger Text, 'end' rechtsbündiger Text und 'center' horizontal zentrierter Text. Voreinstellung ist 'start'.

Die Eigenschaft ist animierbar.

Eigenschaft display-align

display-align ist ebenfalls eine Eigenschaft zur Ausrichtung des Textes. Mögliche Werte sind 'auto', 'before', 'center', 'after', 'inherit'. 'inherit' gibt eine Vererbung vom Elternelement an. Bei der Zeilenfolge von oben nach unten bedeuten 'before' und 'auto' den Text oben ausrichten, 'after' unten ausrichten, 'center' ein vertikales Zentrieren.

Die Eigenschaft ist animierbar.

Beispiele textArea und tbreak

Einfaches Beispiel:

<textArea x="20" y="20" width="260" height="300"
  text-align="center" display-align="center"
  line-increment="auto"
  font-size="10" font-family="sans-serif"
  fill="#026">
<tspan font-size="20"
 fill="#044">Die Kleinsten</tspan>
<tbreak /><tbreak />
<tbreak />Sag Atome, sage Stäubchen.
<tbreak />Sind sie auch unendlich klein,
<tbreak />Haben sie doch ihre Leibchen
<tbreak />Und die Neigung da zu sein.<tbreak />

<tbreak />Haben sie auch keine Köpfchen,
<tbreak />Sind sie doch voll Eigensinn.
<tbreak />Trotzig spricht das Zwerggeschöpfchen:
<tbreak />Ich will sein so wie ich bin.<tbreak />

<tbreak />Suche nur sie zu bezwingen,
<tbreak />Stark und findig wie du bist.
<tbreak />Solch ein Ding hat seine Schwingen,
<tbreak />Seine Kraft und seine List.<tbreak />

<tbreak />Kannst du auch aus ihnen schmieden
<tbreak />Deine Rüstung als Despot,
<tbreak />Schließlich wirst du doch ermüden,
<tbreak />Und dann heißt es: Er ist tot.<tbreak />

<tbreak /><tspan fill="#028"
  font-size="6">Wilhelm Busch</tspan>
</textArea>

SVG-Beispiel: 'Die Kleinsten' von Wilhelm Busch

Es ist leicht zu erkennen, dass in SVG die wesentliche Struktur des Gedichtes mit Strophen und Zeilen nicht ordentlich ausgezeichnet werden kann, nur eine graphische Repräsentation angeboten werden kann, die wenig bis keine semantische Struktur enthält. Wie im Abschnitt über Barrierefreiheit erläutert, lässt sich dies jedoch durch die Attribute aus RDFa deutlich verbessern. In diesem Fall kann tspan als Strukturelement verwendet werden und mit dem allgemeinen Attribut property angegeben werden, welche semantische Struktur damit repräsentiert wird. Da die für die Auszeichnung von Text eigentlich geläufige Sprache (X)HTML allerdings auch keine Elemente hat, die für Gedichte semantisch relevant wären, muss da im Bedarfsfalle auf Spezialsprachen ausgewichen werden. Immerhin verbessert das insofern die Zugänglichkeit, als rein aus diesen Angaben ohne die graphische Repräsentation eindeutig die Gedichtstruktur entnommen werden kann.

SVG mit RDFa, Beispiel: 'Die Kleinsten' von Wilhelm Busch

SVG-Beispiel mit automatischem Zeilenumbruch: 'Die Abweisung' von Franz Kafka

SVG: