Texte als Symbole definieren

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

Auch Text können Sie als Symbole definieren. Damit lassen sich bspw. eine Art Textbausteine generieren und einsetzen. Allerdings kommt es in der Praxis sehr viel häufiger vor, dass die Formatierungen von Texten gleich, die Inhalte aber unterschiedlich sind. Daher werden Texte als Symbole in der Regel seltener eingesetzt.

Wenn es sich dabei bspw. um immer wiederkehrende Begriffe handelt, die mehrmals in der SVG-Datei oder in anderen Dateien verwendet werden, macht das aber durchaus Sinn. Aus diesem Grund soll dies nachfolgend an einem Beispiel verdeutlicht werden.

Hinweis:
Immer wenn von Symbolen in anderen SVG-Dokumenten die Rede ist, müssen Sie natürlich bedenken, dass der SVG-Standard zwar vorsieht, dass dies möglich ist, der SVG-Viewer das jedoch noch nicht unterstützt. Derzeit bleibt also für den praktischen Einsatz nur die Möglichkeit, die Symbole in der Datei zu definieren, in der sie auch verwendet werden.

Stylesheets in die SVG-Seite einbetten

Wenn Sie relativ viele Texte definieren möchten, die Sie gleich formatieren, ist es sinnvoll, die Formatierung über Stylesheets zu realisieren. Dann brauchen Sie nicht in jedem <symbol>-Tag das gleiche style-Attribut zu verwenden. Das hält einerseits die Dateigröße klein, andererseits sparen Sie damit Tipparbeit und müssen bei späteren Änderungen auch nur das Stylesheet und nicht jedes Symbol ändern.

Wie in XML-Dokumenten werden Stylesheets, die innerhalb der XML-Datei definiert werden, in einem CDATA-Abschnitt eingefügt. Innerhalb dieses Abschnitts können Sie dann beliebig viele Formate definieren. Im folgenden Beispielcode wird eine Formatierung für den <text>-Tag definiert. Stattdessen könnten Sie aber natürlich auch einen benutzerdefinierten Klassennamen verwenden. Der muss dann mit einem Punkt beginnen, dem aber der Klassenname vorangestellt wird, auf den das Format angewendet werden soll. Zum Beispiel können Sie mit text.hinweis ein Format "hinweis" für den <text>-Tag definieren. und können dann das Format wie in HTML und XHTML über das class-Attribut einem bestimmten Tag zuweisen.

Hinweis:
Wenn Sie Stylesheets für spezielle Tags definieren, können Sie die dort definierten Formatierungen nur außer Kraft setzen, indem Sie ein style-Attribut innerhalb des entsprechenden Tags definieren. Es nützt nichts, die Formatierungen für die übergeordnete Gruppe festzulegen.

Die Symbole erzeugen

Die Symbole erzeugen Sie im Prinzip wie die grafischen Elemente. Nur fügen Sie hier in den <symbol>-Tag einen <text>-Tag ein. Wichtig ist dabei, dass Sie die Koordinaten x und y so setzen, dass der Text vollständig sichtbar ist. Sonst ist er es nämlich beim Instanzieren des Symbols auch nicht sichtbar und das lässt sich auch nicht durch andere Positionierung der Instanz ändern. Wenn Sie die Schriftgröße 20 wählen, muss die y-Koordinate also mindestens den Wert 20 haben.

Text einfügen und weiter formatieren

Was nun noch fehlt, sind natürlich die <use>-Anweisungen zum Einfügen der Texte. Sie können diese Texte auch zusätzlich mit einem Filter versehen, der einen Schatten erzeugt, und mit einem Hyperlink hinterlegen. Für den Filter geben Sie einfach im <use>-Tag das style-Attribut an. Wenn Sie einen Hyperlink definieren möchten, müssen Sie den <use>-Tag mit dem <a>-Tag umschließen.

Für den Schatten müssen Sie den Filter natürlich noch definieren. Dabei ist es wichtig, dass Sie auch die für den verwendeten Filterbereich notwendige Größe festlegen, damit der Text nicht abgeschnitten wird, da er gegenüber dem erzeugten Schatten nach links oben verschoben wird.

Abbildung: Das Ergebnis für Texte als Symbole.