So verwenden Sie SVG-Muster als Hintergrund

SVG-Muster bieten eine flexiblere Methode zum Wiederholen eines Hintergrundbilds auf einer Webseite als CSS-Kacheln. Schauen wir uns an, warum das so ist und wie Sie sie verwenden können.

Was Sie lernen werden

Dieses Tutorial ist sowohl in Video- als auch in Textform verfügbar. Hier finden Sie eine Übersicht über das, was Sie lernen werden:

1. Wir werden zunächst die bekanntere Methode der CSS-Kachelung betrachten.
2. Dann werden wir ein paar SVG-Muster erstellen und dabei die richtige Syntax lernen.
3. Wir vergleichen die beiden Ansätze und besprechen die Vor- und Nachteile.
4. Als Nächstes betrachten wir einige Werkzeuge, mit denen Sie SVG-Muster erstellen können.
5. Zum Schluss überprüfen wir die Browser-Unterstützung für SVG.

Schauen Sie sich den Screencast an

1. CSS-Kacheln

Beginnen wir mit dem CSS-Kacheln - der traditionelleren Methode, ein Bild für einen Hintergrund zu wiederholen. Die Idee ist einfach: Wir übergeben eine URL an die Hintergrund Eigenschaft des Elements, das wir abdecken möchten. Die URL verweist auf eine Bilddatei, in diesem Fall eine PNG-Datei. Standardmäßig wird unser Bild in beiden Achsen wiederholt.

body Hintergrund: URL ("cuadros.png"); 

So sieht das aus:

2. SVG-Muster

Schauen wir uns nun die SVG-Muster an - etwas, das beim ersten Mal etwas schwieriger zu verstehen ist. Wir beginnen mit der Handcodierung eines Beispiels. 

Handcodierung von SVGs

Diese beiden Einsteiger-Tutorials von Kezz Bracey sind sehr hilfreich, um sich über die verschiedenen Teile eines SVGs zu informieren.

Beginnen Sie mit einer SVG

Zu Beginn erstellen wir ein svg -Element, das ihm eine Höhe und Breite von 100% gibt, sodass es den Container belegt, in dem wir es platzieren.

So erstellen Sie eine Muster wir müssen es in die defs (Definitionen) Abschnitt des SVG, wie folgt:

Nun fügen wir diesem Musterelement einige Attribute hinzu. Wir geben ihm eine ID, damit wir später darauf zurückgreifen können. Dann geben wir die X- und Y-Koordinaten sowie die Werte für Breite und Höhe an und geben an, dass patternUnits sind userSpaceOnUse (Dies definiert das Koordinatensystem, über das Sie mehr über MDN erfahren können):

Nachdem Sie diese Parameter eingestellt haben, müssen Sie nun das Bild definieren, das wiederholt werden soll. Lassen Sie uns einen grundlegenden Kreis erstellen:

Es wird noch kein Muster sichtbar sein, aber wir haben es eigentlich ohne definiert bewirbt sich es zu irgendetwas. Ändern wir das, indem wir es auf a anwenden außerhalb unseres .

Entscheidend ist, dass Sie das sehen werden füllen Attribut (normalerweise ein Farbwert oder Name) verweist auf eine URL, die die ID unseres neu definierten Musters enthält: fill = "URL (# Polka-Punkte)".

Schauen Sie sich die Demo unten an:

Ein komplexeres SVG-Muster

Für ein komplexeres Beispiel lassen wir die Handcodierung zurück und erzeugen ein Muster mit einem Tool von Drittanbietern. Wir verwenden heropatterns.com, eine Website, auf der Sie vordefinierte SVG-Muster auswählen, deren Farben und Attribute ändern und anschließend den generierten Code kopieren können.

Ich werde das Puzzle-Muster verwenden:

Anstatt das generierte CSS vollständig zu kopieren, kopiere ich nur das d = "" Parameter, der tatsächlich gezeichnete Pfad ist.

Der svg-Code, den wir eingerichtet haben, ist nahezu identisch mit unserem vorherigen Beispiel. Die ID innerhalb der Natürlich wird es anders sein, und wir geben etwas andere Dimensionen an, je nachdem, was bei Heropattern verwendet wird.

Wo haben wir also in unserem letzten Beispiel eine definiert , diesmal definieren wir a . Wir geben ihm eine Füllfarbe und fügen dann den Pfad ein, den wir vor einem Moment kopiert haben. Das gibt uns das:

3. CSS-Kacheln vs. SVG-Muster

😀 CSS-Fliesenprofis:

• Einfacher zu bedienen, sicherlich für Anfänger
• Genießt breite Browserunterstützung

😡 CSS-Kacheln:

• Bei Verwendung mit Bitmaps ist es nicht skalierbar
• Geringere Leistung
• Schwieriger zu personalisieren
• Beschränkt auf rechteckige Wiederholungen

😀 SVG-Musterprofis:

• Leicht
• Anpassen aus CSS
• Skalierbar
• Kann komplexe Muster erstellen

😡 SVG-Muster:

• Relativ schwierig zu bedienen
• Nicht-universelle Browserunterstützung

4. SVG-Pattern-Tools

Schauen Sie sich diese vier Ressourcen an, die für die Generierung von tatsächlichem Code sehr nützlich sein können und Ideen!

• heropatterns.com
• SVG Patterns Gallery
• Geopattern
• thepatternlibrary.com

5. Browserunterstützung

SVG ist eine weit verbreitete Technologie, auch in älteren Browsern wie IE9. Einige SVG-Funktionen werden jedoch in einem solchen Umfang nicht unterstützt, und es gibt wirklich nicht viele Informationen für die Besonderheiten von Eigenschaften (wie z patternUnits, patternContentUnits, patternTransform usw.). Nachfolgend finden Sie einige nützliche Links, einschließlich der Dokumentation von Mozilla. Sie geben Aufschluss darüber, welche Informationen aktuell verfügbar sind.

Aus meinen eigenen Tests kann ich Ihnen sagen, dass moderne Browser sowohl unter Windows als auch unter Mac OS alle mit SVG-Mustern gut umgegangen sind. Sogar bis zum IE11.

Fazit

Fassen wir die wichtigsten Punkte dieses Tutorials zusammen.

• Mit SVG-Mustern können wiederholbare Hintergründe erstellt werden.
• Sie bieten eine praktikable und anpassbare Alternative zu CSS-Kacheln.
• Sie haben eine ziemlich einfache (wenn auch ausführliche) Syntax. Definieren Sie Ihr Muster innerhalb der defs, Vergewissern Sie sich, dass es eine ID hat, und verweisen Sie dann in Ihrer gewünschten Form auf diese ID.
• Wie bereits erwähnt, bietet die Verwendung von SVG-Mustern viele Vorteile.

Lern mehr

• Wie man Code SVG von Kezz Bracey übergibt
• SVG Viewport und viewBox (für komplette Anfänger) von Kezz Bracey
• SVG-Patterns auf CSS-Tricks
  
• SVG-Browserunterstützung
• SVG-Muster MDN-Webdokumente
•  MDN-Webdokumente