5.1Text in SVG

Einer der großen Vorteile von SVG liegt darin, daß ein Text in einer SVG-Grafik nicht nur als grafisches Element vorliegt, sondern immer auch als Text-Element. Dies ist bislang einzigartig bei Grafiken. Beim SWF-Format z.B. wird ein Text immer als Teil der Grafik angesehen. Durch diese getrennte Behandlung ergeben sich eine Menge von Vorteilen. Der Text einer SVG-Grafik kann markiert, in die Zwischenablage kopiert oder nach Wörtern durchsucht werden. Letzteres können sich Suchroboter im Internet zunutze machen, um SVG-Grafiken für Web-Kataloge zu indizieren. Bei einer komplett mit Flash erstellten Website ist das undenkbar (Stand April 2004).

Text, der auf dem Bildschirm ausgegeben werden soll, muß sich zwischen dem öffnenden Element <text> und dem schließenden Element </text> befinden. Durch die Attribute x und y erhält der Text eine bestimmte Position. Dabei ist auf jeden Fall zu beachten, daß die y-Koordinate die Position der Basislinie angibt. Besitzt also y den Wert 0, befindet sich die Grundlinie am obersten Rand der Grafik und der daraufstehende Text ist nicht sichtbar. Es dürfen nebenbei auch mehrere x-, und y-Koordinaten in der Form "x1, x2, x3, ..., xn" bzw. "y1, y2, y3, ..., yn" angegeben werden. Damit bezieht sich jeder Wert auf das Zeichen an der jeweiligen Position. Die Höhe und Breite des Textes können nicht gesetzt werden, sondern hängen von der Schriftart, -größe und anderen Formatierungen ab. Texteigenschaften werden mittels CSS definiert.  Listing 5-1 zeigt wie man ein Text-Objekt in SVG erstellt, während  Abbildung 5-1 diesen Text in einem Betrachter darstellt.

 Anzeigebeispiel

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <text x="10 40 70 100" y="30" style="font-size:30;font-family:Comic Sans MS, Arial;
    font-weight:bold;font-style:oblique;stroke:black;stroke-width:1;fill:none" >
    SVG ist spitze!
  </text>
</svg>