SVG Text-Elemente

Im Rahmen links werden einige mit → SVG programmierte Text-Beispiele angezeigt.

SVG bietet dazu das Element <text>
Damit kann man Text (Zeichenketten, Strings) beliebig positionieren und formatieren.

Seit der → HTML-Version 5 kann man SVG direkt (Inline) in eine Webseite einfügen. SVG und → CSS-3 bieten für einige Eigenschaften alternative Möglichkeiten. Derzeit ist SVG bei gängigen Browsern in einigen Punkten überlegen: Die Positionierung ist sicherer, die → Filter funktionieren.
Umgekehrt kann man → HTML-Elemente in eine SVG-Grafik einfügen und z.B. Fließtext so einfach wie in Webseiten anzeigen.

SVG-Quelltext der Text-Beispiele

◀   Ihr Browser hat diesen Text in der 'Programmiersprache' → SVG erhalten und daraus die Grafik erzeugt. Alle modernen Browser und Mobil-Telefone bieten diese Möglichkeit seit vielen Jahren.

• Das optionale <desc>-Element enthält beschreibenden Text (Meta‑Daten).

• Man sollte die Schrift-Familie aller verwendeten <text>-Elemente unbedingt festlegen. Das erfolgt hier zentral in einem <style>-Element. Andernfalls treten mit manchen Browsern ungewollte Effekte auf.

• Die Text-Farbe wird mit dem Attribut fill angegeben, die Umrandung jedes einzelnen Zeichens mit dem Attribut stroke

• Es folgen einige Beispiele:
Jeder zu zeichnende Text wird in ein <text>-Element eingeschlossen. Zur Positionierung und Formatierung werden Attribute verwendet.
Zur leichteren Unterscheidung sind die Beispiele in verschiedenen Farben (SVG-Text-Eigenschaft fill) angelegt.

•Wenn nicht anders vereinbart, liegt der Refenenz-Punkt eines <text>-Elements an seiner linken unteren Ecke:
Die Y-Koordinate sollte daher mindestens so groß wie die Schriftgröße sein - Ansonsten wird der Text nicht angezeigt.

Spezielle Programmierung des <text>-Elements

Der Referenzpunkt befindet sich ohne weitere Vereinbarung an der linken unteren Ecke des Elements. Die Text-Daten werden von dort nach rechts und (je nach Schriftgröße) nach oben gezeichnet.
Ein <text> ohne Koordinaten oder mit den Koordinaten (0,0) ist nicht sichtbar, weil er sich oberhalb der Grafik befindet. Das ist ein häufiger Fehler von wenig erfahrenen SVG-EntwicklerInnen. Lösung:
Versuchen sie andere Koordinaten, z.B. (100,50)

Mit der CSS-Eigenschaft text-anchor kann man den Referenzpunkt in die Mitte (middle) oder an die rechte Ecke (end) verlegen:
<text x="100" y="50" style="text-anchor:middle">
RSTUVW
</text>
Der Text des Beispiels wird nicht (wie oft erwartet) zwischen den Rändern der gesamten Grafik zentriert, sondern beidseitig seines ReferenzPunktes (100,50)


So kann man mehrere Zeilen (linksbündig) untereinander setzen:
<text x="100" y="50"> Oben </text>
<text x="100" y="65"> Unten </text>

Mehrere Zeilen fasst man (besser) zu einer Gruppe zusammen:
<g transform="translate(100,50)" >
<text x="0" y="0"> ABC </text>
<text x="0" y="15"> BCD </text>
</g>
Die gesamte Gruppe wird um die angegebenen Werte in X- und Y-Richtung verschoben. In den darin enthaltenen Elementen braucht man nur mehr die Koordinaten relativ zu jenen der Gruppe anzugeben.



Unabhängig von der links gezeigten globalen CSS-Regel kann man einzelne Elemente oder Gruppen durch Angabe eines → CSS style-Attributs individuell formatieren:
<g style="font-family;'Courier New',Courier,mono;">
<text> Monospace </text>
</g>


Wenn die Unterstützung von UTF-8 durch den Editor nicht sicher ist, dann bleibt die Angabe encoding="utf-8" unverändert, man verwendet jedoch im SVG-Quelltext ausschließlich die 95 druckbaren → ASCII-Zeichen.

Alle anderen Zeichen werden am besten mit ihrem hexadezimalen Unicode eingetragen, z.B. deutsche Umlaute:
<text> Gro&#xDF; und gr&#xFC;n </text>
Das sieht in der Grafik so aus:
Groß und grün

Liste aller aktuell verfügbaren Unicode-Zeichen mit ihren Code-Nummern.


Im 1. <text>-Element ist nur die Füllung angegeben, im 2. Element auch die Randlinie, im 3. Element bleibt die Füllung transparent:
<g transform="translate(7,35)">
<text x="0" y="0" style="fill:red">X</text>
<text x="30" y="0" style="fill:yellow; stroke:blue;">Y</text>
<text x="60" y="0" style="fill:none; stroke:green;">Z</text>
</g>
X Y Z
Das Beispiel enthält 3 einzelne <text>-Elemente. Man kann sie individuell formatieren, muss sie aber auch einzeln positionieren.


XYZ
<text x="10" y="35" style="fill:black;">
X<tspan style="fill:blue;">Y</tspan>Z
</text>
Das Beispiel enthält nur 1 <text>-Element.
Darin wurde 1 Zeichen in ein <tspan> eingeschlossen und individuell formatiert.


  Skalierung

Im Beispiel am Beginn dieser Seite sind die beiden blauen Texte Skaliert
Mit dem Attribut transform="scale()" kann man jedes SVG-Element vergrößern und / oder verkleinern.
In der runden () Klammer wird zuerst der X-Faktor angegeben, danach der Y-Faktor.
Ein Faktor <1 verkleinert, ein Faktor >1 vergrößert. Gleitkomma-Zahlen werden mit Dezimal-Punkt angegeben, nicht mit Beistrich !
Das breite Element wurde zusätzlich mit der Eigenschaft stroke formatiert: In diesem Fall wird jedes einzelne Zeichen in der angegebenen Farbe (rot) umrahmt.

  Verzerrung

Im Beispiel am Beginn dieser Seite wird der rote Text Verzerrt
Das Attribut transform="skewX()" verzerrt jedes SVG-Element um den angegebenen Winkel in Grad in horizontaler Richtung. Alternativ oder zusätzlich kann man mit skewY() auch vertikal verzerren.



Mit dem SVG-Element <textPath> wird der darin eingeschlossene Text auf einen Pfad gesetzt.

Der Pfad wird mit dem Attribut href angegeben, ähnlich wie in einem HTML <a>-HyperLink-Element.
Dieses Attribut ist jedoch nicht in SVG definiert sondern in XLink (einem weiteren Mitglied der XML-Familie). Daher muss man
  • Anordnen, auch den NameSpace von XLink zu verwenden (Hier im <svg>-Element mit dem Attribut xmlns
  • Bei jeder Verwendung des Attributs den Namespace angeben, z.B. xlink:href=""

Weitere Möglichkeiten bieten das SVG-Element <tspan> oder das Attribut text-anchor

Inline-Einbettung in HTML-5

In Webseiten-Dokumente ab der → HTML-Version 5 kann man SVG Objektgrafik direkt (Inline, d.h. in den Quelltext) einbetten.
Diese Methode wird von allen modernen Browsern und Smartphones beherrscht.

Mit Klick auf diesen ↗ Link wird das links gezeigte (Minimal)-Beispiel in einem eigenen Browser-Tab geöffnet.

SVG wird von manchen Browsern je nach Art der Einbettung etwas unterschiedlich interpretiert. Eine eigene Datei *.svg in einem <iframe>-Element funktioniert derzeit (!) zuverlässiger als HTML-5 + Inline-SVG.
Die Unterschiede betreffen Kleinigkeiten, z.B. die Vererbung von CSS-Eigenschaften. Wenn sie nicht wie erwartet funktioniert, dann kann man sie mit dem Wert inherit erzwingen, z.B.
<text style="font-size:inherit;"> CDE </text>


Allgemeine Einbettung in HTML

Das links gezeigte Beispiel funktioniert in allen gängigen HTML-Versionen und wird auch in dieser Webseite verwendet:
Der SVG-Quelltext wird in eine eigene Text-Datei (hier text.svg) eingetragen und mit einem <iframe>-Element (Innenrahmen) in den HTML-Quelltext eingebettet.
Damit ist die Objekt-Grafik von der Webseite getrennt und mehrfach verwendbar.

Man kann den SVG-Quelltext in einer Datei *.svg am eigenen PC speichern und mit jedem modernen Browser-Programm öffnen (Blenden sie dazu die hier angezeigten Zeilen-Nummern mit Mausklick aus).

• Man kann jede SVG Objekt-Grafik in eigene Webseiten oder in Büro-Dokumente (z.B. Textverarbeitung, Präsentation, ...) einbetten.


Mit (eigenen) Javascript-Programmen kann man z.B. (Live, automatisch oder interaktiv)
  • Den Inhalt (Text) von SVG <text>-Elementen ändern
  • Position, Richtungswinkel oder Formatierung jedes SVG-Elements ändern
  • Die Sichtbarkeit jedes Elements ändern



Das Beispiel → SVG + Inline-HTML zeigt die Programmierung an einem Beispiel.
Wer die Vor- und Nachteile verschiedener Technologien kennt, kann sie optimal miteinander kombinieren.