SVG-patronen gebruiken als achtergrond

SVG-patronen bieden een meer flexibele benadering voor het herhalen van een achtergrondafbeelding op een webpagina dan CSS-plavuizen. Laten we eens kijken waarom dat zo is en hoe je ze kunt gebruiken.

Wat je leert

Deze zelfstudie is zowel in video- als in tekstvorm beschikbaar. Hier is een overzicht van wat u zult leren:

1. We zullen beginnen met te kijken naar de meer bekende methode van CSS-betegeling.
2. Vervolgens maken we een paar SVG-patronen, terwijl we de juiste syntaxis leren.
3. We zullen de twee benaderingen vergelijken en de voor- en nadelen bespreken.
4. Vervolgens bekijken we enkele hulpprogramma's die u kunt gebruiken om SVG-patronen te maken.
5. Ten slotte zullen we de browserondersteuning voor SVG controleren.

Bekijk de Screencast

1. CSS-betegeling

Laten we beginnen met CSS-betegeling - de meer traditionele methode om een ​​afbeelding voor een achtergrond te herhalen. Het idee is duidelijk: we geven een URL door aan de achtergrond eigendom van het element dat we willen bedekken. De URL verwijst naar een afbeeldingsbestand, in dit geval een PNG-bestand. Standaard zal onze afbeelding langs beide assen worden herhaald.

body background: url ("cuadros.png"); 

Zo ziet het eruit:

2. SVG-patronen

Laten we nu eens kijken naar SVG-patronen - iets dat, wanneer het voor het eerst werd aangetroffen, een beetje moeilijker te begrijpen is. We beginnen met het handmatig coderen van een voorbeeld. 

Handcodering van SVG's

Voor een opfriscursus over het handmatig coderen van alle verschillende delen van een SVG, zijn deze twee beginnershandleidingen van Kezz Bracey echt nuttig:

Begin met een SVG

Om te beginnen maken we een svg-element, geven het een hoogte en breedte van 100%, zodat het de container waarin we het plaatsen inneemt.

Om een ​​te maken patroon we moeten het plaatsen in de defs (definities) gedeelte van de svg, zoals zo:

Laten we nu enkele attributen toevoegen aan dat patroonelement. We geven het een ID, zodat we er later naar kunnen verwijzen, dan zullen we beginnende X- en Y-coördinaten, breedte- en hoogtewaarden opgeven en aangeven dat de patternUnits zijn userSpaceOnUse (dit definieert het coördinatenstelsel, waarover je meer kunt lezen op MDN):

Na het instellen van deze parameters, moeten we nu de afbeelding definiëren die zal worden herhaald. Laten we een basiscirkel maken:

Er is nog geen patroon zichtbaar, maar dat komt omdat we het zonder echt hebben gedefinieerd toepassen het voor iets. Laten we dat veranderen door het op a toe te passen buiten onze .

Cruciaal is dat je de vullen kenmerk (dat meestal een kleurwaarde of naam kan zijn) verwijst naar een URL met de ID van ons nieuw gedefinieerde patroon: vullen = "url (# stippen)".

Bekijk de demo hieronder:

Een meer complex SVG-patroon

Voor een meer complex voorbeeld laten we handcodering achter en genereren we een patroon met behulp van een hulpmiddel van derden. We gebruiken heropatterns.com, een website waarmee u vooraf gedefinieerde SVG-patronen kunt selecteren, hun kleuren en kenmerken kunt wijzigen en de gegenereerde code kunt kopiëren.

Ik ga het puzzelpatroon gebruiken:

In plaats van de gegenereerde CSS in zijn geheel te kopiëren, kopieer ik alleen de d = "" parameter, dit is het eigenlijke pad dat wordt getekend.

De svg-code die we instellen, is bijna precies hetzelfde als in ons vorige voorbeeld. De ID binnen de zal natuurlijk anders zijn, en we zullen het iets andere dimensies geven, afhankelijk van wat er op heropatterns wordt gebruikt.

Dus waar, in ons laatste voorbeeld, hebben we een gedefinieerd , deze keer definiëren we een . We geven het een opvulkleur, dan plakken we in het pad dat we zojuist hebben gekopieerd. Dit is wat dat ons geeft:

3. CSS Tiling Vs. SVG-patronen

😀 CSS tegelwerkprofs:

• Gemakkelijker te gebruiken, zeker voor beginners
• Heeft brede ondersteuning voor browsers

😡 CSS tegens van tegens:

• Bij gebruik met bitmaps is het niet schaalbaar
• Lagere prestaties
• Moeilijker om aan te passen
• Beperkt tot rechthoekige herhalingen

😀 SVG-patroonprofessionals:

• lichtgewicht
• Aanpassen vanuit CSS
• schaalbare
• In staat om complexe patronen te maken

😡 SVG-patroon nadelen:

• Relatief moeilijk te gebruiken
• Niet-universele browserondersteuning

4. SVG-patronengereedschap

Bekijk deze vier bronnen, die erg handig kunnen zijn voor het genereren van echte code en ideeën!

• heropatterns.com
• SVG-patronengalerie
• Geopattern
• thepatternlibrary.com

5. Browserondersteuning

SVG is een breed ondersteunde technologie, zelfs in oudere browsers zoals IE9. Sommige SVG-functies genieten echter niet zo veel van ondersteuning en er is echt niet veel informatie beschikbaar voor de details van eigenschappen (zoals patternUnits, patternContentUnits, patternTransform enz.). Hieronder vindt u een aantal handige links, waaronder documentatie van Mozilla. Deze geven u een idee van welke informatie momenteel beschikbaar is.

Uit mijn eigen tests kan ik u vertellen dat moderne browsers op zowel Windows als Mac OS allemaal prima met SVG-patronen omgingen. Zelfs tot IE11.

Conclusie

Laten we de kernpunten van deze zelfstudie samenvatten.

• SVG-patronen kunnen worden gebruikt om herhaalbare achtergronden te maken.
• Ze bieden een levensvatbaar en beter aanpasbaar alternatief voor CSS-plavuizen.
• Ze hebben een vrij eenvoudige (indien gedetailleerd) syntaxis. Definieer je patroon binnen de defs, zorg ervoor dat het een ID heeft en vermeld dan die ID in jouw vorm naar keuze.
• Er zijn veel voordelen aan het gebruik van SVG-patronen, zoals we hebben geschetst.

Kom meer te weten

• Hoe code SVG code door Kezz Bracey
• SVG Viewport en viewBox (For Complete Beginners) van Kezz Bracey
• SVG-patronen op CSS-trucs
  
• SVG-browserondersteuning
• SVG-patronen MDN Web Docs
•  MDN Web Docs