CSS, HTML und Javascript mit {stil}

SVG Pattern

SVG Elemente mit Muster 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.

pattern-Beispiel: Raster (GRID)

Ein einfaches Raster (grid) – gut für manuelle Entwürfe geeignet, wenn kein grafisches Tool wie Inkscape oder Adobe Illustrator benutzt wird.

0 25 50 75 100 125 150 175
<defs>
  <pattern id="grid" width="25" height="25" patternUnits="userSpaceOnUse">
      <line x1="1" x2="25" y1="0" y2="0" stroke="gray" stroke-width="1" />
      <line x1="0" x2="0" y1="1" y2="25" stroke="gray" stroke-width="1" />
  </pattern>
</defs>

<rect x="0" y="0" width="600" height="300"
    style="stroke: #000000; fill: url(#grid)" />

Ein Pattern braucht eine id (z.b. »grid«) und wird erst sichtbar, wenn ein Objekt durch fill: url(#grid) 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".

Das id-Attribut muss gesetzt sein, damit sich ein Element, das mit einem Muster gefüllt wird, auf das Muster beziehen kann.

patternUnits / patternContentUnits

patternContentUnits="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 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' 
      fill-opacity='0.4' 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.

patternTransform

patternTransform rotiert, skaliert und verschiebt ein Pattern in seinem Objekt.

0
<pattern id="tria" width="30" height="30" 
         patternUnits="userSpaceOnUse" 
         patternTransform="rotate(35)">
         oder
         patternTransform="scale(0.5, 0.5)">

Ein Pattern kann selber mit einem Pattern gefüllt sein.

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