SVG Tutorial

Außer dem Attribut fill, welches zur Attributgruppe PresentationAttributes-FillStroke gehört, sind alle weiteren Attribute dieses Kapitels in der Attributgruppe PresentationAttributes-FontSpecification zu finden.

• Schriftfarbe - fill
• Schriftart - font-family
• Schriftgröße - font-size
• Schriftdicke - font-weight
• Schriftstil - font-style
• Schriftausdehnung - font-stretch
• Schriftvariation - font-variant

fill
Voreinstellung: black.
Die Schriftfarbe wird mit Eigenschaft oder dem Attribut fill zugewiesen. Diese Attribut gehört zur Attributgruppe PresentationAttributes-FillStroke.
Mögliche Werte sind Farbangaben in hexadezimaler Schreibweise, durch ein festgelegtes Farbwort oder in dezimaler Schreibweise, z.B.:
   <tspan style="fill:#ff0000;"> ... roter text ... </tspan>
   <tspan style="fill:red;"> ... roter text ... </tspan>
   <tspan style="fill:rgb(255,0,0);"> ... roter text ... </tspan>
Alle drei Beispiele erzeugen eine rote Schrift.
(siehe auch Kapitel Painting, dort werden alle Attribut der Attributgruppe PresentationAttributes-FillStroke vorgestellt).

font-family
Voreinstellung: vom User agent abhängig.
Eine Schriftart können sie mit dem Attribut oder der Eigenschaft font-family festlegen.
Dabei ist es möglich, mehrere Schriftarten, durch Komma getrennt, hintereinander anzugeben.
Falls die zuerst angegebenen Schriftart auf dem System des Clients bzw. Users nicht dargestellt werden kann, versucht der Browser es mit der nächsten angegbenen Schriftart, usw.
Wenn die Bezeichnung einer Schriftart Leerzeichen enthält, müssen Sie diese in einfache Hochkommatas einschließen, z.B.:
   <tspan style="font-family:'Courier New',Verdana,sans-serif;"> ... text ... </tspan>

font-size
Voreinstellung: medium.
Mit Hilfe des Attributs oder der Eigenschaft font-size legen Sie die Schriftgröße fest.
font-size erwartet eine Größenangabe oder ein festgelegtes Schlüsselwort als Wertzuweisung. Schriften werden meist in den Maßen Pixel oder Punkt angegeben, z.B:
   <tspan style="font-size:12px;"> ... 12 Pixel text ... </tspan>
   <tspan style="font-size:16pt;"> ... 16 Punkt text ... </tspan>

font-weight
Voreinstellung: normal.
Die Schriftdicke oder das Schriftgewicht können Sie mit dem Attribut oder der Eigenschaft font-weight einstellen.
Die wichtigsten, möglichen Werte für font-weight sind

• normal - keine Formatierung und
• bold - erzeugt fette Schrift.

Es sind ebenfalls noch die Werte bolder (noch fetter) und lighter (nicht ganz so fett) möglich.
Und weiterhin können Sie mit den Zahlen 100, 200, 300, 400, 500, 600, 700, 800 und 900 als Wertzuweisung für font-weight insgesamt 9 verschieden "Fett-Abstufungen" erzeugen - wenn der Browser das mitmacht ...
Dabei entspricht der Wert normal dem Wert 500.

font-style
Voreinstellung: normal.
Den Schriftstil, also kursive Schrift, bestimmen Sie mit dem Attribut oder der Eigenschaft font-style.
Die Werte italic und oblique erzeugen am Bildschirm nicht unterscheidbare kursive Schriftzeichen, mit dem Wert normal findet keine Formatierung statt.
   <tspan style="font-style:oblique;"> ... kursiver text ... </tspan>

font-stretch
Voreinstellung: normal.
Mit Schriftausdehnung kann der Abstand der Zeichen zueinander verändert werden. Möglich macht dieses das Attribut oder die Eigenschaft font-stretch.
Sie können den Zeichen also eine "Stretching" verordnen :-).
Folgende Werte werden von font-stretch akzeptiert:

• normal
• wider
• narrower
• ultra-condensed
• extra-condensed
• condensed
• semi-condensed
• semi-expanded
• expanded
• extra-expanded
• ultra-expanded

Experimentieren Sie einfach ein wenig mit den verschieden Wertzuweisungen.

font-variant
Voreinstellung: normal.
Dieses Attribut akzeptiert 2 Werte: normal und small-caps. Bei Verwendung von small-caps wird der Text als Kapitälchen (kleine Großbuchstaben) dargestellt. Der SVG-Viewer von Adobe unterstützt dieses Attribut noch nicht.

Beispiel Quellcode

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="210">
<title>Schriftformatierung</title>
<desc>
  Farbe, Art, Größe, Dicke, Stil, Ausdehnung und Variation von Text
</desc>

  <text x="40" y="20">
    <!-- Schriftfarbe -->
    <tspan fill="blue">Schriftfarbe</tspan>
    <tspan x="200" style="fill:blue;">Schriftfarbe</tspan>

    <!-- Schriftart -->
    <tspan x="40" y="40" font-family="Times">
      Schriftart
    </tspan>
    <tspan x="200" y="40" style="font-family:Times">
      Schriftart
    </tspan>

    <!-- Schriftgröße -->
    <tspan x="40" y="60" font-size="26px">
      Schriftgröße
    </tspan>
    <tspan x="200" y="60" style="font-size:26px">
      Schriftgröße
    </tspan>

    <!-- Schriftdicke -->
    <tspan x="40" y="80" font-weight="bold">
      Schriftdicke
    </tspan>
    <tspan x="200" y="80" style="font-weight:bold;">
      Schriftdicke
    </tspan>

    <!-- Schriftstil -->
    <tspan x="40" y="100" font-style="italic">
      Schriftstil
    </tspan>
    <tspan x="200" y="100" style="font-style:italic;">
      Schriftstil
    </tspan>

    <!-- Schriftausdehnung -->
    <tspan x="40" y="120" font-stretch="extra-expanded">
      Schriftausdehnung
    </tspan>
    <tspan x="200" y="120" style="font-stretch:extra-expanded;">
      Schriftausdehnung
    </tspan>

    <!-- Schriftvariation -->
    <tspan x="40" y="140" font-variant="small-caps">
      Schriftvariation
    </tspan>
    <tspan x="200" y="140" style="font-variant:small-caps;">
      Schriftvariation
    </tspan>
  </text>

  <text x="10" y="170"
    style="font-family:Verdana; font-size:14px;">
    Klicken Sie mit der rechten Maustaste in die Grafik
    <tspan x="20" dy="20">und wählen Sie
      <tspan dx="20" dy="7"
        style="font-size:28px; fill:yellow;
               stroke:black; stroke-width:.5px;">
        &quot;Einzoomen&quot;
      </tspan>
    </tspan>
  </text>
</svg>