Texte sperren und dehnen

(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)

SVG bietet zahlreiche Möglichkeiten, Text zu verändern, ohne dass Sie dazu komplexe Pfade erstellen müssten, da es zahlreiche Formatierungen extra für Texte gibt.

Gedehnte Texte erstellen

Wenn Sie Text gedehnt oder komprimiert formatieren möchten, verwenden Sie dazu am besten die Eigenschaft font-stretch im style-Attribut des <text>-Tags. Sie können dieser Eigenschaft die folgenden Werte zuweisen: normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded und inherit. Die Bedeutung der einzelnen Einstellungen zeigt die folgende Grafik.

Abbildung: Auswirkungen der verschiedenen Einstellungen für font-stretch.

Texte sperren

Sie können aber auch Texte gesperrt ausgeben, indem Sie einfach den Abstand zwischen den einzelnen Buchstaben erhöhen. Dazu gibt es die Eigenschaft kerning. Sie kann die Werte auto, inherit oder jeden numerischen Wert haben, der den Zeichenabstand definiert. auto ist die Standardeinstellung. Die Anweisungen

verursachen damit folgende Ausgabe:

Abbildung: Ergebnis der kerning-Einstellung.

Außerdem können Sie auch den Abstand der Wörter zueinander beeinflussen, indem Sie die word-spacing-Eigenschaft verwenden. Sie erwartet den Wert auto oder eine Zahl, die den Abstand zwischen den Wörtern definiert.

Abbildung: Ergebnis der word-spacing-Eigenschaft mit dem Wert 5.