Text in SVG einzubetten ist genauso einfach wie es bei den bisherigen Elementen der Fall war. Das Tag <text> umschließt den abzubildenden String. Um einen Zeilenumbruch zu erzwingen, muss ein neues <text>-Element (oder <tspan>, s.u.) gebildet werden. Dadurch, dass Text in SVG aber ein Element wie jedes andere ist, ergeben sich gestalterisch viel mehr Möglichkeiten, denn Text kann all die Attribute und Darstellungsmöglichkeiten (später werden auch Filter, Verläufe und Muster vorgestellt...) wie die anderen Elemente besitzen. Damit ist Text in SVG vielfältiger zu gestalten als Text in HTML, aber einfacher zu manipulieren und ändern als in Pixelgrafiken; hinzu kommt, dass Text aus SVG markiert und kopiert werden kann. Dies kann im folgenden Beispiel ausprobiert werden.

Die Attribute x und y definieren auch bei Text die absolute Position, allerdings nicht die linken, oberen Ecke, sondern den linken Punkt der baseline, der Grundlinie. Die beiden Attribute können zudem eine komma- oder leerzeichen-getrennte Liste von Werten beinhalten. Dabei ist der n-te Wert dieser Liste immer die Positionsangabe des n-ten Zeichens des Strings. Zudem können die Zeichen um den Punkt links unten von jedem Zeichen rotiert werden; das Attribut rotate beinhaltet einen Wert oder eine Liste von Werten in Grad, dabei ist die Bedeutung die gleiche wie bei x und y: dazu Beispiel 11.

Das Element <tspan> funktioniert ähnlich wie das HTML-Element <SPAN>. Es darf nur innerhalb eines <text>-Elements vorkommen und definiert (abweichende) Darstellungseigentschaften für den umschlossenen Text. Es kann ebenfalls die Attribute rotate, x und y besitzen, man kann aber auch eine relative Positionsangabe, um die der String zu seiner eigentlichen Position verschoben wird, über die Attribute dx und dy machen. Auch hier können wieder ein Wert oder eine Liste angegeben werden: Beispiel.

Natürlich wäre die Darstellung von Text ohne Angaben zu der Schrift nicht gut zu gebrauchen. Dazu gibt es die folgenden Attribute, die den CSS-Schriftattributen entsprechen und daher bekannt sein sollten:

Die exakte Definition des W3C findet sich hier.

Wer viel mit Text in SVG arbeiten will, weil er vielleicht ganze Webseiten in SVG erzeugen möchte, sollte noch darauf hingewiesen werden, dass es noch mehr Möglichkeiten gibt, Text zu manipulieren, z.B. die baseline, das letter-spacing, das kerning etc.. Dazu sind ein paar typographische Kenntnisse sicher nicht unpraktisch und insofern wird an dieser Stelle nur auf die Beschreibung dieser Attribute durch den W3C verwiesen und nicht innerhalb des Tutorials behandelt.

SVG bietet zudem noch eine Funktionalität, die den Nutzern von Vektorgrafikprogrammen gut bekannt sein dürfte: Das Ausrichten von Text an einem Pfad. So kann man mit relativ geringem Aufwand schon sehr schöne Layouts entwerfen. In einer SVG wird dazu das Element <textPath> als Child von <text> verwendet, dabei umschließt <textPath> den Text, der am Pfad ausgerichtet werden soll. Der Pfad muss zuvor bereits definiert sein und eine id besitzen. Über das Attribut xlink:href im Element <textPath> kann dann auf die id des Pfades verwiesen werden (Bsp.: ...<textPath xlink:href="#myPath">...</textPath>...). Das Beispiel 13 zeigt einmal Text ganz einfach am Pfad ausgerichtet, dann mit einem gewissen Offset am Anfang (über das Attribut startOffset können dazu Größenangaben gemacht werden) und wie man mit Hilfe des <tspan>-Elements den Text etwas vom Pfad distanziert.