Füllmuster definieren und verwenden

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

Nicht alles lässt sich jedoch mit Farben oder Farbverläufen erreichen. In manchen Fällen ist die einzige Möglichkeit die gewünschte Formatierung zu erreichen, der Einsatz eines Füllmusters. Auch das geht mit SVG.

Was sind Füllmuster?

Als Füllmuster werden Elemente bezeichnet, mit denen andere Objekte in der SVG-Grafik gefüllt werden. Ähnlich wie Hintergrundbilder werden sie gekachelt, damit sie das Objekt vollständig füllen.

Sie können Füllmuster überall einsetzen, wo Sie auch Farbverläufe oder Farben einsetzen können, nämlich in den fill- und stroke-Eigenschaften. Sie haben damit die Möglichkeit bspw. ein Muster zu definieren, um auch gepunktete Linien zu erzeugen oder Elemente mit komplexen Mustern zu füllen.

Füllmuster definieren und verwenden

Um ein Füllmuster zu definieren, verwenden Sie den <pattern>-Tag. Sie können ihn ähnlich wie die Farbverläufe im <defs>-Bereich der Seite unterbringen. Der <pattern>-Tag verfügt neben dem id-Attribut über die folgenden Attribute:

• patternUnits legt fest, ob sich die Koordinaten x/y auf das Objekt selbst oder die übergeordnete Gruppe beziehen. Dazu stehen die Werte userSpaceOnUse und objectBoundingBox zur Verfügung. Dieses Attribut entspricht damit dem Attribut gradientUnits.
• patternTransform definiert Transformationen für die Anpassung des Verlaufs. Zulässig sind dabei alle Transformationen, die auch das transform-Attribut des <g>-Tags unterstützt. Sie können damit bspw. das Muster drehen.

x und y definieren zusammen mit den Attributen width und height, wie das Muster gekachelt wird. Dabei legen Sie mit x und y die Anfangskoordinate fest.

• width legt die Breite des Musters und damit der einzelnen Kachel fest. Wenn Sie eine größere Breite angeben, als das eigentliche Muster breit ist, definieren Sie damit auch gleichzeitig einen Abstand.
• height legt entsprechend die Höhe der Kachel fest.
• xlink:href ermöglicht die Referenzierung eines bereits definierten Musters.
• viewbox ermöglicht die Initialisierung eines eigenen Koordinatensystems für das Muster. Alle Positionsangaben werden dann relativ zu dem hier definierten Koordinatensystem definiert. Sie können die Größe des Koordinatensystems angeben, indem Sie dem Attribut Werte in der Form (x y Breite Höhe) zuweisen.

Innerhalb des <pattern>-Tags definieren Sie dann das Muster selbst. Dazu können Sie Pfade oder elementare Formen verwenden. Sie haben aber auch die Möglichkeit, externe Rastergrafiken zu verwenden (siehe den Abschnitt unten "Rastergrafiken als Füllmuster nutzen").

Das folgende Beispiel zeigt die Anwendung und Definition eines Musters, um gepunktete Linien zu erzeugen. Dazu wird zunächst das Muster definiert und dann eine Linie und ein Rechteck erzeugt, die mit diesem Muster gefüllt werden. Wichtig ist dabei die richtige Wahl der Werte für die Attribute width und height. Im folgenden Beispiel wird als Höhe und als Breite 3 festgelegt. Das Muster selbst besteht aber nur aus einem 1 Pixel großen Quadrat. Das hat zur Folge, dass sowohl nach unten als auch nach rechts zwei Pixel Abstand vorhanden sind.

Wenn Sie das Ergebnis im Browser betrachten, erhalten Sie folgendes Bild:

Abbildung: Ergebnis des Füllmusters.

Nicht immer müssen Sie aber natürlich ein so einfaches Musters definieren. Sie können auch komplexe Muster erstellen und damit Objekte füllen. Dazu verwenden Sie einfach beliebig viele SVG-Grafikelemente innerhalb des <pattern>-Tags.

Rastergrafiken als Füllmuster nutzen

Auch externe Grafiken wie GIF-, JPEG- oder PNG-Grafiken lassen sich als Füllmuster verwenden. Dazu müssen Sie lediglich diese Grafiken mit dem <image>-Tag in den <pattern>-Tag einfügen. Wichtig ist dabei, dass Sie die Attribute width und height der Grafik angeben. Sie legen die Größe der Grafik fest. Ohne diese Angaben wird die Grafik nicht angezeigt. Die Attribute sind zwar nicht obligatorisch, sie werden jedoch auf Null gesetzt, wenn Sie sie nicht angeben. Daher hat die Grafik eine Breite und Höhe von Null und ist damit nicht sichtbar.

Das folgende Listing zeigt, wie ein Füllmuster definiert wird, das eine GIF-Grafik verwendet, die eine Größe von 90 x 90 Pixeln hat. Damit wird dann ein einfaches Rechteck gefüllt. Das Ergebnis sehen Sie in der nachfolgenden Abbildung.

Abbildung: Rechteck mit einer GIF-Grafik als Füllmuster.

Hinweis:
Wenn Sie externe Dateien in der SVG-Grafik verwenden, müssen Sie diese natürlich mit auf den Webserver übertragen bzw. weitergeben, wenn Sie die SVG-Dateien veröffentlichen oder verteilen, da sonst die Datei nicht gefunden wird. Die externen Grafiken werden nicht in die SVG-Grafik integriert, sondern nur damit verknüpft.