SVG Pattern – Füllen mit Muster und Wiederholungen

Elemente mit SVG-Pattern füllen

SVG pattern füllt Formen mit Objekten, so dass ein Muster ohne aufwändige Wiederholungen entsteht. Das Muster kann aus mehreren Objekten bestehen, die selber in einem pattern-Element sitzen. Durch das mehrschichte SVG-Koordinatensystem mit seinen Units und Größen ist pattern nicht gerade intuitiv, aber Muster sind ein mächtiges Konzept, das die Menge der Elemente und die Größe der Grafik in Schach hält.

Nicht nur SVG-Elemente können als Muster für pattern eingesetzt werden, sondern auch Bitmaps.

SVG Pattern von Hand anlegen

Ein einfaches Beispiel für SVG-Muster als Füllung für ein Element ist schnell von Hand erzeugt.

<svg width="100%" height="100%" viewBox="0 0 400 240">
    <pattern id="simple-dots" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
        <circle fill="#aaa" cx="10" cy="10" r="4" />
    </pattern>
    <rect width="400" height="240" fill="url(#simple-dots)" />
</svg>

Ein Pattern braucht eine id (z.b. »simple-dots«) und wird erst sichtbar, wenn ein Objekt durch fill: url(#simple-dots) mit dem Muster gefüllt wird.

pattern beschreibt die Koordinaten und die Größe eines Musters und wird mit Formen gefüllt:

• width und height legen die Abmessung einer Kachel des Musters fest,
• x und y geben an, wo die erste Kachel platziert ist. Wenn x und y nicht aufgeführt werden, gilt x="0" und y="0".

patternTransform

patternTransform rotiert, skaliert und verschiebt ein Pattern in seinem Objekt. Diese Transformationen fallen insbesondere dann an, wenn SVG-Muster vorliegen, die mit absoluten Werten per userSpaceOnUse aufgebaut sind.

<pattern id="waves" width="300" height="150" patternTransform="scale(0.5)" patternUnits="userSpaceOnUse">
	<circle cx="150" cy="0" r="147.5" /> <circle cx="150" cy="0" r="127.5" /> …
</pattern>

patternUnits

patternUnits="userSpaceOnUse" oder "objectBoundingBox"

• objectBoundingBox (default) erwartet relative Werte zwischen 0 und 1, die als 0 bzw. 100% interpretiert werden.
• userSpaceOnUse benutzt absolute Werte im Koordinatensystem des gefüllten Objekts.

<svg width="100%" height="100%" viewBox="0 0 400 240">
    <pattern id="dots" 
            patternUnits="objectBoundingBox" 
            patternTransform="rotate(45 5 8)" 
            width="5%" height="8%">
        <circle fill="#aaa" cx="10" cy="8" r="4.4" />
    </pattern>
    <rect width="400" height="240" fill="url(#dots)" />
</svg>

SVG pattern als CSS-Hintergrundmuster

Keine Frage: SVG pattern können als externe Datei mit CSS als Hintergrundmuster eingesetzt werden. Um den zusätzlichen HTTP-Request für kleine SVG-Dateien zu vermeiden, kommt Base64 zum Tragen.

.wbg {
   width:100%;
   height: 200px;
   background-color: #DFDBE5;
   background-image: 
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' 
      width='192' height='192' 
      viewBox='0 0 192 192'%3E%3Cpath 
      fill='%239C92AC' 
      d='M192 15v2a11 11 0 0 …");
   background-size: 70px 70px;
}

SVG als Base64 im CSS wäre eigentlich so schön einfach, weil SVG direkt eingesetzt werden kann – wenn dabei nicht die Sonderzeichen vom # (%23) über das < bis zum > codiert werden müssten und man nicht aufpassen müsste wie Spitz, dass die Hochkommas korrekt sitzen.

Und die komplette URL muss anders als im Beispiel in einer Zeile sitzen.

Attribute für SVG pattern

id

Eindeutige Referenz des Musters

patternUnits

userSpaceOnUse oder objectBoundingBox (default objectBoundingBox)

patternTransform

Muster transformieren: rotieren, skalieren, verschieben

x, y

Offset des Musters vom Ursprung des SVG-Koordinatensystems (default 0,0)

width, height

Breite und Höhe des Musters (default 100%, 100%)

viewBox

Viewport innerhalb des SVG-Bereichs mit 4 kommagetrennten Werten (min x, min y, width, height)

xlink:href

Referenz auf ein weiteres Muster, dessen Attribute als Default benutzt werden