SVG text und tspan: Schrift, Farbe, an Pfad ausrichten und rotieren

SVG text als Klartext: durchsuchbar, indexierbar

Text in SVG ist Text. Das text-Element zeigt Texte in der Grafik und ist Klartext – kann also auch von Suchmaschinen indexiert und von Readern vorgelesen werden.

SVG text wird durch Attribute und CSS ähnlich dargestellt werden wie Text in HTML: Schrift, Schriftgröße und -farbe, Text rotieren und an Text an Pfad ausrichten.

Text positionieren

SVG rendert Text genauso wie Formen: Das SVG text-Tag enthält die Informationen zur Position des Texts, Transformationen sowie Eigenschaften, die als CSS style oder SVG-Attribut festgelegt werden.

<text x="20" y="20" 
      font-family="Lobster Two" 
      font-size="20px" 
      fill="blue">Hallo    SVG!</text>

Die Bestimmung der Position richtet sich nach dem ersten Buchstaben unten links (bei Schriftrichtung links nach rechts) und wird mit x und y Koordinaten beschrieben (Schrift von oben nach unten: style="writing-mode: tb;").

Hallo SVG

Ohne font-size und font-family- und fill-Attribut rendern die Browser Schriftart, Schriftgröße und -farbe entsprechend ihren Voreinstellungen – genauso wie bei HTML. Inline-SVG erbt die Schrift von seinem umfassenden Element, in externen SVG-Bildern ohne Deklaration der Schrift nutzen die Browser meist eine Serifenschrift.

Genauso wie in HTML unterdrückt SVG aufeinander folgende Leerzeichen und Zeilenumbrüche im Text.

Zeilenumbruch

Um es gleich vorweg zu sagen: In SVG gibt keinen automatischen Zeilenumbruch wie in HTML-p-Elementen oder Illustrationsprogrammen. Es gab ein einen komplizierten Ansatz mit flowRoot, flowRegion und flowPara, der in Inkscape immer noch zur Verfügung steht, aber dieser Teil der SVG-Spezifikation ist aus dem Draft-Status nie herausgekommen.

Die Browser unterstützen flowRoot nicht und rendern den Text nicht. Das nicht gerade komfortable tspan-Element ist weiterhin die Lösung für mehrzeilige Texte.

Hallo SVG Alles absolut
<text font-size="20px">
	<tspan x="50" y="50">Hallo SVG</tspan>
	<tspan x="50" y="75">Alles absolut</tspan>
</text>

SVG text und CSS style

Wie bei den meisten SVG-Tags kann ein großer Teil der Attribute für das Rendering in ein style-Attribut gesetzt und als CSS gerendert werden. CSS class ist ebenfalls ein gültiges Attribut von SVG-Elementen und damit auch von text.

CSS style für SVG Text

  • font-family,
  • font-size,
  • fill (anstelle von color in HTML),
  • font-weight,
  • font-style,
  • @font-face
  • text-decoration,
  • text-transform (nur mit CSS Style),
  • letter-spacing,
  • word-spacing,
  • font-variant

Was geht nicht?

  • line-height
  • fill: linearGradient
  • white-space

Ein relativer Abstand von tspan-Elementen ersetzt line-height, für Verläufe hat SVG mit linearGradient eine eigene Technik.

Hallo SVG
<!-- 
    comment
-->
<text  x="50" y="50">Hallo    SVG</text>

Zuverlässiger als die SVG-Attribute für SVG-Text ist der jeweilige CSS-Stil, nur die wahrhaftigen Basisstile wie font-weight und font-style gehen immer auch als SVG-Attribut.

text-rendering

Während wir in den meisten Fällen zufrieden sind, wenn der Browser die angeforderte Schrift schnell und gut lesbar darstellt, gibt es empfindliche Elemente wie z.B. der Text eines Logos, bei dem es auf jedes Detail ankommt.

Das Text-Attribut text-rendering bestimmt, wo die Priorität der Darstellung liegt: Geschwindigkeit, Lesbarkeit, Präzision.

Kein finsterer Geselle schlicht durch den Wald
auto
Überlässt dem Browser die Entscheidung über die Qualität des Fonts gegenüber der Geschwindigkeit des Renderns des Texts.
geometricPrecision
Der Browser soll der Präzision der Schrift den Vorzug gegenüber Lesbarkeit und schneller Darstellung geben.
optimizeSpeed
Darstellungsgeschwindigkeit ist wichtiger als Lesbarkeit und Präzision.
optimizeLegibility
Lesbarkeit hat höchste Priorität.

text tspan

tspan positioniert Text in Text-Elementen durch ein eigenes Koordinatensystem. SVG tspan sorgt für einen Zeilenbruch in mehrzeiligen Texten und bringt CSS wie fill, font-size oder font-weight zu Textfragmenten.

Text umbrechen in CSS einfach mit tspan Zeilenumbruch für Zeilenumbruch

CSS line-height wirkt nicht in SVG Text. Die einfachste Variante für einen Zeilenumbruch mit tspan ist ein relativer Zeilenabstand dy anstelle einer absoluten y-Position.

<text x="25" y="50">
   Text umbrechen in CSS
      <tspan x="25" dy="2em" fill="red">einfach</tspan> mit tspan
      <tspan x="25" dy="2em">Zeilenumbruch</tspan>
     <tspan x="25" dy="2em">für Zeilenumbruch</tspan>
</text>

Bei einem relativen Abstand muss nur das umfassende text-Element verschoben werden, dann wandern die darunter liegenden tspan-Element automatisch im richtigen Abstand mit. Genauso funktioniert der automatische Abstand zwischen Textzeilen beim Vergrößern bzw. Verkleinern des Text-Elements.

Stulpenhandschuhe.pdf Berlin Emma Erste Schritte.pdf Grömitz 733 KB 18 MB 254,8 GB 3 KB 10,6 MB Marinde Marie Noel Martinus Emma Watson W. Winter Alice Text auf dem rechten Pfad Text rotieren Text rotieren Text rotieren Text rotieren Text rotieren Text rotieren Text rotieren 2 Text rotieren 2 Text rotieren 2 Text rotieren 2 Text rotieren 2 Text rotieren 2 Text rotieren