SVG Texte

Bild "SVG Format:basis-formen-text-01.png"

Grundbeispiel

SVG als Beischreibungssprache für Vektorgrafiken verfügt auch über Syntaxelemente zur Darstellung für Texte. Der SVG-Code für einen einfachen Text sieht so aus:

<text text-anchor="middle" font-family="serif" font-size="43" id="svg_1" y="60" x="111" stroke-width="0" stroke="#000000" fill="#000000">Beispieltext</text>

Neben dem eigentlichen Text sind typische Angaben:

Schriftgröße - font-size
Schriftart - font-family
Position des Textblocks

Variationen

Bild "SVG Format:basis-formen-text-02.png"

Füllung und Rand

Man kann einem Schriftblock eine äußere Umrandung hinzufügen und für Umrandung und Füllung unterschiedliche Farben festlegen:

<text id="svg_2" text-anchor="middle" font-family="serif" font-size="43" y="60" x="111" stroke-width="2" stroke="#000000" fill="#ff0000">Beispieltext</text>

Bild "SVG Format:basis-formen-text-03.png"

Drehung

Wie andere SVG-Objekte kann auch Text mit Hilfe von Transformationen gedreht werden:

<text transform="rotate(-90, 61.5, 124.5)" id="svg_3" text-anchor="middle" font-family="serif" font-size="43" y="139" x="60" stroke-width="2" stroke="#000000" fill="#00ff00">Beispieltext</text>

Bild "SVG Format:basis-formen-text-05.png"

Schriftart

Die Schriftart kann modifiziert werden. Die angebotetenen Schriftarten hängen vom verwendeten Programm und von den auf dem PC installierten Schriftdateien ab.

Text und Pfade

Einige Programme bieten die Möglichkeit an, Textobjekte in Pfade zu konvertieren. Dann sind weitere Modifizierungen eines Schriftzuges möglich.