Text in SVG

Teil 1: Grundlagen · Kapitel 5 von 12 · Aktualisiert am 10. Oktober 2026 · 4 Minuten Lesezeit

Text in SVG bleibt echter Text. Man kann ihn markieren, kopieren und durchsuchen, Suchmaschinen und Screenreader lesen ihn. Dafür funktioniert er etwas anders als Text in HTML.

Text sitzt auf der Grundlinie

Das Element <text> bekommt mit x und y eine Position, und der Inhalt steht zwischen öffnendem und schließendem Tag. Der wichtigste Unterschied zu allen anderen Formen: y bezeichnet nicht die Oberkante, sondern die Grundlinie, auf der die Buchstaben stehen. Unterlängen wie beim g oder p ragen darunter hinaus. Wer einen Text bei y="0" platziert, sieht deshalb fast nichts davon, weil er komplett über dem sichtbaren Bereich liegt.

Für die waagerechte Ausrichtung gibt es text-anchor. Mit start beginnt der Text am x-Wert, mit middle ist er dort zentriert, mit end endet er dort. Zum Zentrieren eines Textes in einem Kreis setzt du x auf den Kreismittelpunkt und text-anchor="middle".

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 140" width="320" height="140" font-family="Georgia, serif" font-size="22">
  <path d="M10 40 H310 M10 80 H310 M10 120 H310" stroke="#9aa3b2" stroke-dasharray="4 4"/>
  <line x1="160" y1="10" x2="160" y2="130" stroke="#c2410c"/>
  <text x="160" y="40" text-anchor="start" fill="#1f5fd1">start</text>
  <text x="160" y="80" text-anchor="middle" fill="#1f5fd1">middle</text>
  <text x="160" y="120" text-anchor="end" fill="#1f5fd1">end</text>
</svg>

Drei Texte am selben x-Wert 160 mit text-anchor start, middle und end. Die orange Linie markiert x = 160, die gestrichelten Linien die Grundlinien.

Für die senkrechte Ausrichtung gibt es dominant-baseline. Mit dem Wert central oder middle wird der Text ungefähr mittig auf den y-Wert gesetzt. Die Ergebnisse unterscheiden sich je nach Schrift und Browser ein wenig, bei Beschriftungen in Diagrammen lohnt sich deshalb ein prüfender Blick.

Kein automatischer Zeilenumbruch

SVG-Text bricht nicht um. Ein langer Satz läuft einfach über den Rand der Grafik hinaus. Mehrere Zeilen musst du selbst setzen, entweder mit mehreren <text>-Elementen oder mit <tspan>. Ein tspan ist ein Abschnitt innerhalb eines Textes, der eigene Position und Gestaltung haben kann. Mit dy verschiebst du ihn relativ zur vorherigen Zeile, mit x setzt du ihn wieder an den Zeilenanfang.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 130" width="320" height="130" font-family="Georgia, serif" font-size="19" fill="#14171c">
  <text x="20" y="34">
    <tspan x="20">Zeile eins steht oben,</tspan>
    <tspan x="20" dy="1.5em">Zeile zwei folgt mit dy,</tspan>
    <tspan x="20" dy="1.5em">und hier ist ein <tspan fill="#c2410c" font-weight="bold">Wort</tspan> betont.</tspan>
  </text>
</svg>

Ein text-Element mit drei tspan-Zeilen. Die dritte Zeile hebt ein Wort mit eigener Farbe und Schriftstärke hervor.

Brauchst du echten Fließtext mit Umbruch innerhalb einer Grafik, gibt es zwei Wege. Entweder du bettest über <foreignObject> einen HTML-Absatz in das SVG ein, oder du legst den Text als normales HTML über die Grafik. Für Infografiken auf Webseiten ist der zweite Weg meist robuster.

Text entlang eines Pfads

Mit <textPath> folgt Text einer beliebigen Kurve. Der Pfad wird in <defs> definiert und über href angesprochen. startOffset verschiebt den Anfang auf dem Pfad, mit startOffset="50%" und text-anchor="middle" sitzt der Text mittig auf der Kurve.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 150" width="320" height="150" font-family="Georgia, serif" font-size="20">
  <defs>
    <path id="tx-bogen" d="M 30 130 Q 160 -10, 290 130"/>
  </defs>
  <use href="#tx-bogen" fill="none" stroke="#9aa3b2" stroke-dasharray="4 4"/>
  <text fill="#1f5fd1">
    <textPath href="#tx-bogen" startOffset="50%" text-anchor="middle">Buchstaben folgen der Kurve</textPath>
  </text>
</svg>

Text auf einem Bogen. Der Pfad selbst ist zur Orientierung gestrichelt eingezeichnet.

href oder xlink:href?

In SVG 1.1 hießen Verweise xlink:href und brauchten einen zusätzlichen Namespace. SVG 2 erlaubt das einfache href, und alle aktuellen Browser verstehen es. Ältere Programme und manche Werkzeuge erwarten noch die alte Form. Wer ganz sichergehen will, schreibt in eigenständigen Dateien beide.

Schriften

Schriftart, Größe und Stärke setzt du mit font-family, font-size und font-weight, als Attribut oder per CSS. Inline in einer HTML-Seite stehen dem SVG alle Webfonts der Seite zur Verfügung. Wird die Grafik als eigene Datei über <img> geladen, sieht sie die Schriften der Seite dagegen nicht. Dann springt der Browser auf eine Systemschrift zurück, und die Beschriftung sieht anders aus als geplant.

Für Logos und Schriftzüge, die überall gleich aussehen müssen, werden Texte deshalb oft in Pfade umgewandelt. Das ist sicher in der Darstellung, aber der Text ist dann nicht mehr lesbar für Suchmaschinen und Screenreader. Ein <title> im SVG oder ein Alternativtext im <img> gleicht das aus. Mehr dazu im Kapitel SVG optimieren und zugänglich machen.

Eine praktische Messfunktion für Text bietet das DOM: getComputedTextLength() liefert die tatsächliche Breite eines Textes. Damit lassen sich zum Beispiel Rahmen genau um eine Beschriftung legen. Das Kapitel SVG und JavaScript zeigt, wie man das nutzt.