Ein textbasiertes Logo erstellen

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

Als erstes Beispiel für die Anwendung verschiedener Textelemente soll ein textbasiertes Logo dienen, das nach Fertigstellung wie folgt aussehen sollte:

Das zu erstellende Logo

Abbildung: Das zu erstellende Logo.

Dazu soll der Text einem Pfad folgen und auf diese Weise sichelförmig angeordnet werden.

Einfügen des mittleren Textes

Sie sollten zunächst mit dem mittleren Text beginnen. Den können Sie ganz einfach über den <text>-Tag einfügen, wie dies schon in den vorherigen Kapiteln gemacht wurde. Die Formatierung nehmen Sie über das style-Attribut vor und die Positionierung über die Attribute x und y des Tags. Die Anweisung:

<text x="100" y="130" style="font-family:'Arial Black';font-size:46;stroke:none;fill:rgb(0,0,255)">SVG</text> 

erzeugt einen blauen Text, in der Schriftart "Arial Black" mit 46 Pixeln Größe und an der Position 100/130.

Erstellen des Pfades

Nun müssen Sie noch den Pfad erstellen, an dem dann der zweite Schriftzug ausgerichtet wird. Dazu verwenden Sie den <path>-Tag und erstellen dort zwei Bézierkurven, die sich an den Enden berühren. Den so geschlossenen Pfad können Sie einfach in einer Farbe Ihrer Wahl füllen. Der dazu notwendige Code ist:

<path id="sichel" d="M130 80 Q333 96 215 135 Q315 96 130 80" style="stroke:rgb(0,0,0);stroke-width:1;fill:rgb(0,0,139)"/>

Erstes Zwischenergebnis vom Logo

Abbildung: Erstes Zwischenergebnis vom Logo.

Hinweis:
Wichtig ist hier vor allem der Name des Pfades, den Sie über das id-Attribut bestimmen. Sie benötigen ihn, damit Sie dem Text sagen können, um welchen Pfad er fließen soll.

Den zweiten Text um die Sichel fließen lassen

Nun müssen Sie noch den zweiten Text erstellen. Zunächst geben Sie dazu wieder einen <text>-Tag ein und formatieren den Text. Damit er nicht zu lang und deshalb an der scharfen Kurve der Sichel schlecht umgebrochen wird, sollten Sie eine Schriftgröße von 11 Pixeln wählen. Die Attribute x und y für den Text benötigen Sie nicht. Stattdessen fügen Sie innerhalb des <text>-Tags einen <textPath>-Tag ein. Dieser Tag verfügt über ein Attribut, mit dem Sie einen Verweis auf ein Element einrichten können, das von dem Text umflossen werden soll. Dies ist das Attribut xlink:href. Als Wert geben Sie den Namen des Pfades mit einem vorangestellten Doppelkreuz an. Damit haben Sie festgelegt, dass der Text um diesen Pfad laufen soll.

Hinweis:
Bei xlink:href handelt es sich um ein besonderes Attribut, nämlich ein Attribut, das aus einem fremden Namensraum stammt. In diesem Fall dem XLink-Namensraum. Allerdings können Sie nicht generell Attribute anderer Namenräume in SVG-Tags verwenden, sondern nur die für den Tag zulässigen.

<text style="font-family:Arial;font-size:11;fill:darkblue">
  <textPath xlink:href="#sichel">Scalable Vector Graphics</textPath>
</text>

Wenn Sie den Code ausführen, erhalten Sie zwar schon einen Text, der um die Sichel läuft, er hat jedoch noch einen kleinen Schönheitsfehler. Der Text steht direkt auf dem Pfad statt kurz darüber. Das sieht sehr unschön aus, lässt sich jedoch durch ein paar zusätzliche Attribute und Formatierungen ganz leicht beheben.

Zweites Zwischenergebnis vom Logo

Abbildung: Zweites Zwischenergebnis vom Logo.

Text am Pfad ausrichten

Sie können über entsprechende Formatierungen des <text>-Tags genau bestimmen, wie der Text zur Grundlinie ausgerichtet werden soll. Die Grundlinie ist in diesem Fall der Verlauf des Pfades. Dazu geben Sie zusätzlich im style-Attribut des <text>-Tags die Formatierungen alignment-baseline:text-bottom;baseline-shift:5 an.

Mit alignment-baseline:text-bottom bestimmen Sie, dass der untere Textrand des Textes an der Grundlinie ausgerichtet werden soll. Die Angabe baseline-shift:5 legt dagegen fest, dass die Grundlinie um 5 Pixel nach oben verschoben werden soll. Damit verschieben Sie die Grundlinie um 5 Pixel von der Oberfläche das Pfades weg, wodurch ein Abstand entsteht.

Außerdem können Sie noch den Beginn des Textes um ein paar Pixel nach rechts verschieben, damit der Text nicht unmittelbar mit dem Pfad anfängt. Dazu ergänzen Sie den Tag textPath um das Attribut startOffset. Mit dessen Wert legen Sie die Einrückung des Textes vom Anfang des Pfades fest.

<textPath xlink:href="#sichel" startOffset="5">

   

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema SVG bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © verlag moderne industrie GmbH 2001
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "Das Einsteigerseminar SVG — Webgrafiken mit XML" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

verlag moderne industrie GmbH, Justus-von-Liebig-Straße 1, D-86899 Landsberg/Lech, fon ++49 (0) 81 91 / 125 – 0, leserservice(at)mi-verlag.de