SVG Pattern – Füllen mit Muster und Wiederholungen

SVG pattern sind wiederholbare Muster, die Formen füllen

Hintergrundmuster waren ein Hit aus CSS 1 (1996). Damals konnten JPG, GIF und PNG für die Kacheln des Hintergrunds eingesetzt werden, heute kommt SVG hinzu und steuert Kunststücke hinzu, die CSS nicht drauf hat.

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.

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

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
SVG PATTERN