Ecco un'idea interessante, un pochino laboriosa ma potenzialmente molto utile! Vediamo come convertire e includere un'immagine direttamente all'interno di un file HTML, quindi per capirci senza doverla richiamare dall'esterno tramite <img src="...">
L'utilità è la seguente: una volta completato il lavoro, abbiamo da spostare un unico file, appunto il file HTML che contiene tutto il codice in blocco, compresa la codifica stessa dell'immagine, secondo la codifica in Base64. In linea di principio, è possibile convertire anche immagini raster (immagini/foto tradizionali) in Base64 (ad esempio con il tool online base64-image.de), la procedura che spiego si presta meglio però per le immagini vettoriali anche per non avere una quantità spropositata di codice generato per la conversione dell'immagine (quindi file .svg).
Per capire meglio, vediamo questo pezzo di codice CSS:
#blocco1{
background-image:url( ... );
}
Di solito si fa questa operazione: all'interno di url() inseriamo il percorso (locale o remoto) dell'immagine. Se vogliamo invece sfruttare quanto detto prima, in base64, la sintassi da scrivere è la seguente:
background-image:url("data:image/svg+xml;utf8, <svg> ... </svg>");
Quindi all'inizio è opportuna l'intestazione con data:image ecc, poi tutto il codice compreso fra <svg> e la chiusura </svg>.
Magari fosse così semplice! Qualche altra necessità di aggiustamento 😀
- ogni volta che compare il carattere # lo dobbiamo sostituire con %23 (ad esempio l'RGB #000000 diventa %23000000)
- ogni volta che compaiono i doppi apici, li sostituiamo con apice singolo (ad esempio width="100%" diventa width='100%')
- il codice SVG deve essere tutto sulla stessa riga, altrimenti andando a capo crea confusione con le regole CSS
Il risultato però è molto interessante, come detto in un unico file HTML (con codice CSS in blocco, oppure scriviamo queste istruzioni in un unico file CSS da includere) ci si svincola di fatto dalla dipendenza da immagini esterne!
Ecco infine un'immagine per comprenderne la pratica utilità, con due semplici blocchi <div>,
#blocco1 e
#blocco2, che hanno come background-image questa inclusione in Base64 di due pezzi degli scacchi dal formato svg. Non occorre copiare tutto il codice (tutto il codice svg è piuttosto lungo, seguendo questo esempio lo si può comunque adattare al contesto desiderato).
