Come utilizzare i pattern SVG come sfondi

I modelli SVG offrono un approccio più flessibile alla ripetizione di un'immagine di sfondo su una pagina Web rispetto alla piastrellatura CSS. Vediamo perché è così, e come puoi usarli.

Che cosa imparerai

Questo tutorial è disponibile sia in formato video che testuale: ecco una panoramica di ciò che imparerai:

1. Inizieremo osservando il metodo più familiare della piastrellatura CSS.
2. Quindi creeremo un paio di pattern SVG, imparando la sintassi corretta mentre procediamo.
3. Confronteremo i due approcci e discuteremo i pro e i contro.
4. In seguito, esamineremo alcuni strumenti che è possibile utilizzare per creare pattern SVG.
5. Infine, controlleremo il supporto del browser per SVG.

Guarda lo Screencast

1. Piastrellatura CSS

Iniziamo verificando la piastrellatura CSS, il metodo più tradizionale di ripetere un'immagine per uno sfondo. L'idea è semplice: passiamo un URL al sfondo proprietà dell'elemento che vogliamo coprire. L'URL punta a un file immagine, in questo caso un file PNG. Di default la nostra immagine si ripeterà lungo entrambi gli assi.

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

Ecco come appare:

2. Modelli SVG

Diamo ora uno sguardo ai pattern SVG, qualcosa che, una volta incontrato, è un po 'più difficile da capire. Inizieremo codificando a mano un esempio. 

SVG di codifica manuale

Per un aggiornamento su come codificare manualmente tutte le varie parti di un file SVG, questi due tutorial per principianti di Kezz Bracey sono davvero utili:

Inizia con un SVG

Per iniziare, creeremo un elemento svg, dandogli un'altezza e una larghezza del 100% in modo che occupi tutto il contenitore in cui lo posizioniamo.

Per creare un modello dobbiamo metterlo nel defs (definizioni) della sezione svg, così:

Ora aggiungiamo alcuni attributi a quell'elemento del modello. Daremo un ID in modo che possiamo fare riferimento in un secondo momento, quindi specificheremo le coordinate X e Y, i valori di larghezza e altezza e dichiareremo che il patternUnits siamo userSpaceOnUse (questo definisce il sistema di coordinate, che puoi leggere di più su MDN):

Avendo impostato questi parametri, ora dobbiamo definire l'immagine che si ripeterà. Creiamo un cerchio di base:

Nessun modello sarà ancora visibile, ma è perché l'abbiamo definito senza realmente l'applicazione a qualsiasi cosa. Cambiamolo applicandolo a a fuori dal nostro .

Fondamentalmente, vedrai il riempire l'attributo (che di solito può essere un valore o un nome di colore) punta a un URL contenente l'ID del modello appena definito: riempire = "URL (# pois)".

Dai un'occhiata alla demo qui sotto:

Un modello SVG più complesso

Per un esempio più complesso, lasceremo indietro la codifica manuale e genereremo un pattern utilizzando uno strumento di terze parti. Useremo heropatterns.com, un sito Web che ti consente di selezionare pattern SVG predefiniti, modificare i loro colori e attributi, quindi copiare il codice generato.

Userò il motivo del puzzle:

Invece di copiare il CSS generato nella sua interezza, ho intenzione di copiare solo il d = "" parametro, che è il percorso reale disegnato.

Il codice svg che abbiamo impostato sarà quasi identico al nostro esempio precedente. L'ID all'interno del sarà diverso, naturalmente, e gli daremo dimensioni leggermente diverse a seconda di ciò che viene usato su heropatterns.

Quindi, dove, nel nostro ultimo esempio, abbiamo definito a , questa volta definiamo a . Gli diamo un colore di riempimento, quindi incolliamo nel percorso che abbiamo copiato un momento fa. Questo è ciò che ci dà:

3. CSS Tiling vs. Modelli SVG

Pros professionisti della piastrellatura CSS:

• Più facile da usare, sicuramente per i principianti
• Gode ​​di ampio supporto per browser

😡 Contro piastrellatura CSS:

• Se utilizzato con bitmap, non è scalabile
• Prestazioni inferiori
• Più difficile da personalizzare
• Limitazioni alle ripetizioni rettangolari

😀 Pro SVG pattern:

• leggero
• Personalizza da CSS
• Scalabile
• In grado di creare modelli complessi

😡 Contro pattern SVG:

• Relativamente difficile da usare
• Supporto per browser non universale

4. Strumenti pattern SVG

Dai uno sguardo a queste quattro risorse, che possono essere davvero utili per generare codice reale e idee!

• heropatterns.com
• Galleria di modelli SVG
• Geopattern
• thepatternlibrary.com

5. Supporto per browser

SVG è una tecnologia ampiamente supportata, anche nei browser più vecchi come IE9. Alcune funzionalità SVG, tuttavia, non godono del supporto a tal punto e non ci sono molte informazioni disponibili per le specifiche di proprietà (come patternUnits, patternContentUnits, patternTransform eccetera.). Di seguito sono riportati alcuni link utili, tra cui la documentazione di Mozilla: ti daranno un'idea di quali informazioni sono attualmente disponibili.

Dalle mie prove posso dirti che i moderni browser sia su Windows che su Mac OS hanno tutti a che fare con i modelli SVG. Anche fino a IE11.

Conclusione

Riassumiamo i punti chiave di questo tutorial.

• I pattern SVG possono essere utilizzati per creare sfondi ripetibili.
• Offrono un'alternativa praticabile e più personalizzabile alla piastrellatura CSS.
• Hanno una sintassi abbastanza semplice (se dettagliata). Definisci il tuo modello all'interno del defs, assicurati che abbia un ID, quindi fai riferimento a quell'ID nella forma scelta.
• Ci sono molti vantaggi nell'usare modelli SVG, come abbiamo delineato.

Per saperne di più

• How to Hand Code SVG di Kezz Bracey
• SVG Viewport e viewBox (per principianti assoluti) di Kezz Bracey
• Pattern SVG su trucchi CSS
  
• Supporto per browser SVG
• Modelli SVG MDN Web Docs
•  MDN Web Docs