Cum se utilizează modelele SVG ca fundaluri

Modelele SVG oferă o abordare mai flexibilă pentru a repeta o imagine de fundal pe o pagină web decât placa CSS. Să ne uităm de ce este și cum să le folosiți.

Ce veți învăța

Acest tutorial este disponibil atât în ​​format video cât și în formă textuală - aici este o descriere a ceea ce veți învăța:

1. Vom începe să aruncăm o privire asupra metodei mai cunoscute a placării CSS.
2. Apoi, vom crea câteva modele SVG, învățând sintaxa corectă pe măsură ce mergem.
3. Vom compara cele două abordări și vom discuta argumentele pro și contra.
4. În continuare, vom examina câteva instrumente pe care le puteți utiliza pentru a crea modele SVG.
5. În cele din urmă, vom verifica suportul browserului pentru SVG.

Urmăriți ecranul

1. Tigla CSS

Să începem prin a verifica tigla CSS - metoda mai tradițională de repetare a unei imagini pentru fundal. Ideea este simplă: transmitem o adresă URL către fundal proprietatea elementului pe care dorim să-l acoperim. URL-ul indică un fișier imagine, în acest caz un fișier PNG. Implicit imaginea noastră se va repeta de-a lungul ambelor axe.

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

Iată cum arată:

2. Modele SVG

Să aruncăm o privire asupra tiparelor SVG - ceva care, întâi întâlnit, este puțin mai greu de înțeles. Vom începe prin codarea manuală a unui exemplu. 

SVG-uri de codificare manuală

Pentru o reîmprospătare a modului de a codifica toate părțile diferite ale unui SVG, aceste două tutoriale ale începătorilor de Kezz Bracey sunt foarte utile:

Începeți cu un SVG

Pentru a începe, vom crea un element svg, oferindu-i o înălțime și o lățime de 100% pentru a ocupa orice container pe care îl plasăm.

Pentru a crea un model trebuie să o plasăm în defs (definiții) din SVG, după cum urmează:

Acum, să adăugăm câteva atribute elementului respectiv. Îi vom da un ID, astfel încât să îl putem referi mai târziu, apoi vom specifica începerea coordonatelor X și Y, valorile lățimii și înălțimii și vom afirma că patternUnits sunteți userSpaceOnUse (aceasta definește sistemul de coordonate, despre care puteți citi mai multe despre MDN):

După configurarea acestor parametri, trebuie să definim acum imaginea care se va repeta. Să creăm un cerc de bază:

Nici un model nu va fi încă vizibil, dar asta pentru că l-am definit fără a fi de fapt punerea în aplicare la orice. Să o schimbăm prin aplicarea acesteia la a în afara noastră .

În mod crucial, veți vedea completati (care ar putea fi, de obicei, o valoare de culoare sau un nume) indică o adresă URL care conține codul noului model definit: completați = "url (# polka-puncte)".

Check out demo-ul de mai jos:

Un model SVG mai complex

Pentru un exemplu mai complex, vom lăsa în urmă codarea manuală și vom genera un model utilizând un instrument terț. Vom folosi heropatterns.com, un site care vă permite să selectați modele SVG predefinite, să modificați culorile și atributele acestora, apoi să copiați codul generat.

Voi folosi modelul de jigsaw:

În loc să copiați CSS generat în întregime, voi copia doar d = "" parametru, care este traseul real tras.

Codul SVG pe care l-am creat va fi aproape exact la fel ca exemplul nostru precedent. ID-ul în cadrul vor fi diferite, desigur, și îi vom da dimensiuni ușor diferite în funcție de ceea ce se utilizează în heropatterns.

Deci unde, în ultimul nostru exemplu, am definit a , de data aceasta definim a . Îi dăm o culoare de umplere, apoi ne lipim pe calea pe care am copiat-o acum un moment. Aceasta este ceea ce ne dă:

3. CSS Tiling Vs. Modele SVG

😀 Programe tigle CSS:

• Mai ușor de utilizat, cu siguranță pentru începători
• Bucurați-vă de sprijinul larg al browserului

😡 Conturile CSS contra:

• Când este folosit cu bitmap-uri, nu este scalabil
• Performanță inferioară
• Mai greu de personalizat
• Limitată la repetări rectangulare

😀 Programe SVG:

• categorie ușoară
• Personalizați din CSS
• scalabilă
• Abilitatea de a crea modele complexe

😡 Modelul SVG contra:

• Relativ dificil de utilizat
• Suport de browser non-universal

4. Instrumente de model SVG

Uitați-vă la aceste patru resurse, care pot fi foarte utile pentru generarea codului real și idei!

• heropatterns.com
• Galerie de modele SVG
• Geopattern
• thepatternlibrary.com

5. Suport pentru browsere

SVG este o tehnologie larg acceptată, chiar și în browser mai vechi, cum ar fi IE9. Unele funcții ale SVG nu beneficiază totuși de o susținere într-o astfel de măsură și nu există prea multe informații disponibile pentru specificul proprietăți (cum ar fi patternUnits, patternContentUnits, patternTransform etc). Există câteva linkuri utile de mai jos, inclusiv documentația de la Mozilla - vă vor da o idee despre ce informații sunt disponibile în prezent.

Din propriile teste pot să vă spun că browserele moderne de pe Windows și Mac OS au avut de-a face cu modelele SVG foarte bine. Chiar și până la IE11.

Concluzie

Să rezumă punctele cheie ale acestui tutorial.

• Modelele SVG pot fi folosite pentru a crea fundaluri repetate.
• Acestea oferă o alternativă viabilă și mai personalizabilă pentru placarea CSS.
• Ei au o sintaxă destul de simplă (dacă este detaliată). Definiți modelul în cadrul defs, asigurați-vă că are un ID, apoi trimiteți ID-ul în forma dorită.
• Există multe avantaje ale folosirii modelelor SVG, așa cum am subliniat.

Aflați mai multe

• Cum să manipulați codul SVG de Kezz Bracey
• SVG Viewport și viewBox (pentru începători compleți) de Kezz Bracey
• Modele SVG pe trucuri CSS
  
• Suport pentru browser-ul SVG
• Modele SVG Documente Web MDN
•  MDN Web Docs