Rechtecke und Kreise einfügen und formatieren

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

Nachdem Sie nun wissen, wie Sie einfache Elemente in SVG-Grafiken erstellen, soll dies nun an einem kleinen Beispiel demonstriert werden. Es soll dabei eine Grafik entstehen, die zur Navigation in einer Webseite sozusagen als Seitenbanner mit vertikaler Navigationsleiste dienen soll. Das Ziel ist folgende Grafik mit einer Fläche von 800 x 600 Pixeln.

Abbildung: Zu erstellende SVG-Beispiel-Grafik.

Hinweis:
Im Verlauf der nächsten Kapitel wird diese Grafik noch optimiert und mit interessanten Effekten versehen.

Ein Rechteck mit abgerundeten Ecken als Seitenbanner erstellen

Zunächst benötigen Sie ein Rechteck, das 800 Pixel lang ist und 100 Pixel hoch ist. Es muss sich vom Nullpunkt der Grafik (0/0) bis zum Punkt (800/100) für die rechte untere Ecke erstrecken. Um die Ecken abzurunden, müssen Sie die Attribute rx und ry verwenden. Das Ergebnis des folgenden Quellcodes zeigt die nächste Abbildung.

Abbildung: Erzeugtes Rechteck als Seitenbanner.

Die vertikale Navigationsleiste hinzufügen

Für die vertikale Navigationsleiste ist ein zweites Rechteck erforderlich, das ebenfalls abgerundete Ecken haben sollte, damit es zu der horizontalen Leiste passt. Um dieses Rechteck zu erstellen, fügen Sie unterhalb des ersten <rect>-Tags die folgende Zeile ein:

Damit sollten Sie im Browser dann folgendes Ergebnis gezeigt bekommen.

Abbildung: Zweites Rechteck für die vertikale Navigationsleiste.

Einen Kreis im Nullpunkt über die beiden Rechtecke legen

Nun muss noch ein Kreis mit Mittelpunkt im Nullpunkt definiert werden, der die beiden Rechtecke "verbindet". Dazu können Sie den <circle> oder <ellipse>-Tag verwenden. Der Quellcode dazu sollte wie folgt aussehen und Sie müssen ihn unterhalb des zweiten <rect>-Tags einfügen:

Abbildung: Kreis im Nullpunkt der beiden erstellten Rechtecke.

Hinweis:
Definieren Sie mehrere Elemente, die sich überlappen, bestimmt die Reihenfolge der Definitionen in der SVG-Datei, welches Element zu oberst liegt. Daher ist es in der Regel wichtig, in welcher Reihenfolge Sie die Elemente einfügen.

Elemente formatieren

Sicherlich ist eine solche bisher noch ganz schwarze Navigationsleiste mit Seitenbanner nicht besonders schön. Diese Darstellung liegt aber daran, dass noch keinerlei Formatierungen definiert sind. In diesem Fall füllt der SVG-Viewer die Elements automatisch mit der Standardfüllfarbe schwarz. Sie können aber die Füllfarbe und die Farbe der Umrandung individuell festlegen, indem Sie die drei Elemente jeweils um ein style-Attribut ergänzen. Der Code sollte dann wie folgt lauten:

Mit den Angaben im style-Attribut legen Sie die Füllfarbe (fill), die Rahmenfarbe (stroke) und die Rahmenstärke (stroke-width) fest.

Hinweis:
Es gibt natürlich noch eine Reihe weiterer Formatierungen. Die wichtigsten werden im Verlauf der nächsten Kapitel noch erläutert.

Das Ergebnis sollte dann im Browser folgendermaßen aussehen.

Abbildung: Ergebnis der Formatierung.

Eine horizontale Navigationsleiste hinzufügen

Nun fehlt noch die kleine graue Leiste unterhalb des Seitenbanners. Sie muss unterhalb des Kreises und unterhalb des Seitenbanners liegen, sodass Sie sie vor dem ersten <rect>-Tag anordnen sollten.

Damit ist die Grafik nun zunächst vollzählig und entspricht dem gewünschten Ergebnis.