CSS, HTML & Javascript mit {stil}

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

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.

SVG text als Klartext: durchsuchbar, indexierbar

Text positionieren

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

<text x="50" y="100">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;").

SVG Text positionieren
SVG-Text positionieren

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.

font-size

Üblich ist die Angabe von font-size ohne Einheit, der Default-Wert ist 16px. em als Einheit setzt ebenfalls 16px an. Grundlage ist das SVG-Koordinatensystem, also viewBox.

font-size in Prozent-Angaben: font-size="100%" bringt 16px, font-size="50%" bringt 8px.

M M 
<svg viewBox="0 0 100 100" width="100%" height="100%">
	<text x="10" y="90" font-size="100px">M</text>
</svg>

<svg viewBox="0 0 500 500" width="100%" height="100%">
	<text x="10" y="90" font-size="100px">M</text>
</svg>

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.

SVG Text mit Zeilenumbruch
SVG Text mit Zeilenumbruch: tspan
<text font-family="sans-serif" font-size="40px" fill="cornflowerblue">
	<tspan x="50" y="50">Hallo SVG</tspan>
	<tspan x="50" y="100">Alles absolut</tspan>
</text>

Am Ende gibt es aber doch einen Ausweg aus dem Dilemma: SVG foreignObject setzt Elemente aus anderen XML-Namensräumen in ein SVG und rendert so Text mit allen Schikanen in die Grafik.

Zeilenabstand mit dy

tspan positioniert Text in Text-Elementen in 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.

Zeilenabstand dy in tspan-Elementen

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 y="130" font-size="1em" stroke-width="1">
	<tspan x="160" dy="1.5em" font-weight="400">Ginseng</tspan>
	<tspan x="160" dy="1.5em" font-style="italic">Panax ginseng</tspan>
	<tspan x="160" dy="1.5em" font-size="0.9em" font-weight="300">Asiatischer Ginseng oder </tspan>
	<tspan x="160" dy="1.5em" font-size="0.9em" font-weight="300">Koreanischer Ginseng</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.

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.

SVG foreignObject

SVG ist eine XML-Sprache und konsistent zu anderen XMP-Sprachen – also auch zu HTML. Wir können nicht nur SVG direkt in HTML-Seiten einsetzen, sondern HTML in SVG-Dateien.

Das foreignObject-Element nimmt Elemente aus anderen Namensräumen auf.

HTML in SVG
SVG foreignObject

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.
Suchen auf mediaevent.de