SVG: So arbeitest du mit Texten und Schrift

Das SVG-Format eignet sich nicht nur zur Darstellung vektorbasierter Formen. Auch Schrift kannst du darin platzieren und gestalten. Im Gegensatz zur semantischen Schriftauszeichnung in HTML gibt es mit SVG einige Besonderheiten und Eigenarten zu berücksichtigen. Auch hinsichtlich der Gestaltung von Schrift per CSS solltest du einige Unterschiede kennen.

SVG: So arbeitest du mit Texten und Schrift

Schrift per SVG auszeichnen und mit CSS gestalten

Während HTML gleich mehrere semantische Elemente kennt, mit denen du Text als Überschrift, Absatz, Liste oder Tabelle auszeichnen kannst, kennt das SVG-Format lediglich das „<text>“-Element. Innerhalb dieses Elementes kannst du Schrift platzieren und diese gestalten.

1
<text>Lorem ipsum.</text>

Die Gestaltung des Textes erfolgt wie bei HTML mit CSS. Du kannst Webschriften einbinden und dern Schriftart, -größe sowie die Ausrichtung festlegen. Während Schriftart und -größe mit den bekannten Eigenschaften „font-family“ und „font-size“ definiert werden, gibt es für die Ausrichtung die Eigenschaft „text-anchor“ mit den Werten „start“ für linksbündigen, „end“ für rechtsbündigen und „middle“ für zentrierten Text.

1
2
3
4
5
text {
  font-family: "Source Sans";
  font-size: 30px;
  text-anchor: middle;
}

Da SVG keinen klassischen mehrzeiligen Text kennt, ist die Angabe eines Zeilenabstandes überflüssig. Wie alle anderen SVG-Elememte, wird auch das „<text>“-Element per „x“ und „y“ platziert. Der „y“-Wert definiert bei Texten allerdings deren Grundlinie. Bei einem Text, dem der Wert 0 für die „y“-Eigenschaft zugewiesen wurde, verschwindet der Text aus dem oberen Bildrand.

SVG: Mehrzeiligen Text erstellen

Die SVG-Syntax kennt kein Element wie „<br>“, um einen Zeilenumbruch innerhalb eines Textes herbeizuführen. Allerdings gibt es das „<tspan>“-Element, mit dem du einen Text unterteilen und individuell anordnen kannst.

1
2
3
4
<text>
  <tspan>Lorem ipsum.</tspan>
  <tspan>Lorem ipsum.</tspan>
</text>

Standardmäßig werden die einzelnen „<tspan>“-Elemente nebeneinander angeordnet, ähnlich wie beim „<span>“-Element in HTML. Die Platzierung von SVG-Elementen erfolgt mit den Eigenschaften „x“ und „y“. Die beiden Eigenschaften sorgen allerdings für eine absolute Positionierung von Elementen. Das heißt, die einzelnen „<tspan>“-Elemente werden weder in Relation zum übergeordneten „<text>“-Element noch zu anderen „<tspan>“-Elementen platziert.

text-schrift-svg_tspan1
Standardmäßig angeordnete „<tspan>“-Elemente

Allerdings stehen für „<tspan>“ die speziellen Eigenschaften „dx“ und „dy“ zur Verfügung. Diese sorgen für eine relative Platzierung zum jeweils zuvor ausgezeichneten „<tspan>“-Element.

text-schrift-svg_tspan2
„<tspan>“-Elemente, die per „dx“ und „dy“ platziert wurden

Mit „dy“ kannst du also den Zeilenabstand einzelner „<tspan>“-Elemente definieren. Da auch „dx“ relativ zum zuvor definierten „<tspan>“-Element ist, musst du für die vertikale Platzierung „x“ verwenden.

1
2
3
4
5
<text>
  <tspan x="0" dy="0">Lorem ipsum.</tspan>
  <tspan x="0" dy="36px">Lorem ipsum.</tspan>
  <tspan x="0" dy="36px">Lorem ipsum.</tspan>
</text>

Mit diesem Beispiel sorgst du dafür, dass alle Textzeilen auf der X-Koordinaten bei 0 beginnen und auf der Y-Koordinaten um jeweils 36 Pixel je Zeile nach unten verschoben werden.

text-schrift-svg_tspan3
„<tspan>“-Elemente, die per „x“ und „dy“ platziert werden

SVG: Text an Pfad ausrichten

Ein Vorteil des SVG-Formates im Vergleich zu HTML, ist die Möglichkeit, per SVG einen Text an einem Pfad ausrichten zu lassen. So kannst du einen Text zum Beispiel entlang einer Kreisbahn platzieren. Hierzu verwendest du das „<textPath>“-Element.

Dazu muss zunächst ein Pfad definiert werden, an dem sich der Text orientieren soll. Hier ist es zwingend erforderlich, dass du diesen Pfad per „<path>“-Element erstellst. Auch wenn der Text an einem Kreis ausgerichtet werden soll, darfst du diesen Kreis nicht per „<circle>“ auszeichnen. „<textPath>“ erlaubt, wie der Name erahnen lässt, ausschließlich Pfadelemente.

1
2
3
<defs>
  <path id="textpfad" cd="M200,125c0,41.4-33.6,75-75,75s-75-33.6-75-75s33.6-75…" />
</defs>

Im Beispiel zeichnen wir einen Kreis per „<path>“. Da der Kreis selbst nicht sichtbar sein soll, kannst du ihn innerhalb des „<defs>“-Bereichs auszeichnen. Außerdem musst du dem Pfad eine ID zuweisen.

text-schrift-svg_textpath
An einem Kreispfad ausgerichteter Text

Anschließend wird das „<textPath>“-Element zwischen dem „<text>“- und dem „<tspan>“-Element platziert. Über die ID des Pfades wird dieser zugewiesen.

1
2
3
4
5
<text>
  <textPath xlink:href="#textpfad" startOffset="50%">
    <tspan >Lorem ipsum.</tspan>
  </textPath>
</text>

Mit der Eigenschaft „startOffset“ bestimmst du, an welcher Position auf dem Pfad der Text beginnen soll. Erlaubt sind absolute und prozentuale Angaben.

Schriften in SVG einbetten

Neben der Möglichkeit, Webschriften per CSS einzubinden, lassen sich Schriften in SVG auch einbetten. Dazu stehen die Elemente „<font>“ und „<glyph>“ zur Verfügung. Per „<font>“ wird eine Schriftart definiert. Jedes Zeichen der Schrift wird mit „<glyph>“ ausgezeichnet. Die Kontur der Schrift hinterlegen wir als Pfad.

Wenn du aus Illustrator heraus SVG-Dateien erzeugst, kannst du Schriften auf diese Weise einbetten. Dies bietet sich an, wenn du eine SVG-Datei benötigst, die ohne Verweise auf externe Dateien auskommt. Da eingebettete Schriften im Vergleich zu Webfonts zu größeren Dateien führen, solltest du vorzugsweise auf die Einbindung mit Stylesheets setzen.

Ganz generell soltest du gerade für das mobile Internet auch bei SVG-Dateien auf möglichst kleine Dateien achten.

(dpe)

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Sortiert nach:   neueste | älteste | beste Bewertung
trackback

[…] Sourced through Scoop.it from: http://www.drweb.de […]

trackback
6 Monate 19 Tage her

[…] Damit ein Element mit einem Muster gefüllt werden kann, musst du dem Muster eine ID zuweisen. Anschließend wird diese ID per „fill“-Attribut oder CSS-Eigenschaft dem Element zugewiesen. Das Ganze funktioniert nicht nur mit klassischen Formen, sondern auch mit dem Schriftelement „“. […]

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen