Il motivo principale per cui i file SVG sono particolarmente popolari tra sviluppatori e designer è che sono in un formato immagine scalabile, generalmente di dimensioni più piccole (a volte di un bel po’), e non creano effetto pixel sugli schermi retina. WordPress di default non consente però di caricare il formato file SVG, soprattutto per via di problemi di sicurezza.
Oggi ci immergeremo nei file SVG, come possono essere utili e come si può abilitare il supporto SVG di WordPress. Discuteremo anche del supporto del browser, così come di alcune avvertenze se decidete di passare al formato di immagine vettoriale.
Speriamo che un giorno SVG faccia parte del core di WordPress, ma al momento non ci siamo ancora arrivati.
Cos’è un file SVG?
SVG (Scalable Vector Graphics) è un’immagine vettoriale basata su XML che è comunemente utilizzata da siti web e marchi per visualizzare loghi e icone sui loro siti web. Wikipedia definisce SVG come:
Un SVG (scalable vector graphics) è un formato di immagine vettoriale basato su XML per grafica bidimensionale con supporto per interattività e animazione. La specifica SVG è uno standard aperto sviluppato dal World Wide Web Consortium (W3C) dal 1999.
Potete anche manipolare i file SVG con il codice o il vostro editor di testo. I file SVG sono attualmente utilizzati dal 33% di tutti i siti web e come potete vedere qui sotto, il tasso di adozione sta crescendo rapidamente. Siti popolari come Google, Reddit, Dropbox, ESPN, e anche il nostro sito web qui a Kinsta usano SVGs.
Supporto del browser di file SVG
Le file SVG sono attualmente supportate da tutti i principali browser inclusi i browser mobili. L’unico problema che potreste incontrare si verifica se avete ancora bisogno di supportare IE8, cosa che speriamo non si verifichi. IE8 ha una quota di mercato solo dello 0,36% circa e non è più supportato. Ecco un ottimo articolo di Lubos sul perché gli sviluppatori dovrebbero smettere di supportare IE8, IE9 e IE10. Dal punto di vista del business, questo potrebbe non essere sempre possibile, ma Lubos evidenzia alcuni punti positivi. Se, per qualche disperata ragione, avete ancora bisogno di supportare IE8, potreste definire un’immagine di fallback (PNG o JPG) per i vostri immagini SVG, ma oggi non ci occuperemo di questo argomento. Di seguito è riportato un elenco dei browser supportati:
- Internet Explorer 9, 10, 11+ e Edge
- Firefox 2+
- Cromo 4+
- Safari 3.1+
- Opera 10+
- iOS Safari 3.2+
- Android Browser 3+
- Firefox for Android 86+
- Opera Mini (tutti)
- Opera Mobile 12+
- Chrome for Android 89+
- UC Browser for Android 12.12
- Samsung Internet 4+
- QQ Browser 10.4
- Baidu Browser 7.12
- KaiOS Browser 2.5
Benefits of Using SVG Files
File SVG è un formato vettoriale, il che significa che queste immagini sono automaticamente scalabili, sia nei browser che negli strumenti di editing di immagini. Questo le rende ottime sia per i grafici che per i web designer. Normalmente, quando si cerca di modificare una PNG o una JPG in uno strumento come Photoshop, Sketch o Paint, non è possibile effettuare l’upscaling senza creare un effetto pixel. Con le SVG, è possibile scalarle all’infinito e saranno sempre perfette al pixel (o dovremmo dire vettoriali). Per questo motivo sono un ottimo formato immagine da utilizzare per gli schermi retina.
Google indicizza le SVG, il che è un’ottima notizia per la SEO. I contenuti SVG collegati a un file vengono indicizzati e visualizzati nella ricerca delle immagini di Google. Potete vederlo in prima persona con le illustrazioni SVG che usiamo su Kinsta, facendo una ricerca avanzata delle immagini. Nota: le SVG in linea, o meglio quelle composti da solo codice, non sono normalmente indicizzate.
Le SVG hanno tradizionalmente (non sempre) dimensioni dei file minori rispetto alle PNG o alle JPG. Utilizzando le SVG, potete effettivamente accelerare il vostro sito WordPress, perché ridurrete le dimensioni complessive della vostra pagina. Genki ha scritto un ottimo articolo in cui confronta le dimensioni di SVG, PNG e JPEG. Ed ecco il nostro confronto tra JPG e JPEG. Qui di seguito sono riportati alcuni esempi tratti dai suoi test in cui ha messo a confronto i tre diversi tipi di immagine.
JPG (dimensione ottimizzata: 81,4 KB)
PNG (dimensione ottimizzata: 85,1 KB)
SVG (dimensione ottimizzata: 6,1 KB)
Come potete vedere sopra, l’SVG permette una riduzione della dimensione del file del 92,51% rispetto alla JPG. E, se confrontato con la PNG, il 92,83%. Queste sono differenze di dimensioni dei file piuttosto impressionanti. Ma c’è un avvertimento, dato che ha testato immagini più dettagliate, le SVG alla fine sono diventate di dimensioni maggiori rispetto alle JPG e alle PNG.
Questo è il motivo per cui molti siti utilizzano SVG per immagini meno dettagliate come loghi, icone, ecc. perché vedranno una significativa diminuzione delle dimensioni dei file. Ma per altre immagini con molti dettagli, come forse l’immagine di anteprima dei vostri articoli del blog, potreste dover continuare ad utilizzare una PNG o una JPG, ma potete comunque ottimizzarle. Molti siti web utilizzano un approccio ibrido, utilizzando entrambi i tipi di file insieme dove questo ha un senso.
Inoltre, è importante notare che i social network come Facebook e Twitter non supportano la condivisione delle SVG. Quindi, se avete utilizzato SVG per le vostre immagini di anteprima, dovreste utilizzare la funzionalità SEO di Yoast e caricare una PNG o una JPG per l’OG e i meta tag, altrimenti potreste rischiare che la vostra immagine in primo piano non appaia affatto.
Perché la Sicurezza di SVG è Importante
Il motivo per cui SVG non fa ancora parte del core di WordPress è che ci sono problemi di sicurezza da affrontare. Potete seguire la discussione attiva sulle SVG nel core di WordPress (#24251) avviata nel 2013. SVG è un file XML, che da solo si apre a diverse vulnerabilità che non interessano i normali formati immagine. Tra questi figurano XML external entity attacks (XXE), bomb nested entities e gli attacchi XSS.
Mario Heiderich ha pubblicato una presentazione approfondita sui rischi per la sicurezza dovuti all’iniezione di contenuti attivi con file SVG. Un esempio è stato offerto da JavaScript incorporato in un SVG che è riuscito a chiamare Mario su Skype. È abbastanza spaventoso! Anche SecuPress, autore di un plugin per la sicurezza di WordPress, ha toccato il tema della cautela necessaria nell’aggiungere SVG a WordPress e l’importanza di farlo nel modo giusto.
Molti plugin SVG della repository utilizzano il seguente codice, che aggiunge semplicemente il MIME type per consentire il caricamento di SVG nella libreria multimediale WordPress. Ma questo non è un modo sicuro di procedere! Quindi non andate a scaricare il primo plugin SVG gratuito che vedete e non copiate e incollate questo codice pensando di essere a posto.
function cc_mime_types($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');La soluzione è che le SVG devono essere sanitizzate. La sanitizzazione è fondamentalmente la pulizia del codice o dell’input per evitare problemi di sicurezza (come l’iniezione di codice), conflitti di codice ed errori. Ciò potrebbe comportare cose come l’encoding dei dati, il filtraggio e la validazione delle stringhe, ecc. Qui entra in gioco la libreria SVG-Sanitizer di Daryll Doyle, che egli definisce “il suo tentativo di costruire un sanitizer SVG decente in PHP”. Guardate la demo del suo sanitizer SVG per vederlo in azione.
È anche importante che consideriate chi sul vostro sito ha accesso al caricamento delle SVG. Per esempio, se siete su un sito con più autori, non avete idea di che tipo di SVG qualcun altro potrebbe caricare, esponendo il vostro sito a dei rischi. È consigliabile limitare l’upload di SVG agli amministratori e a coloro che comprendono i problemi di sicurezza.
Come Attivare in Modo Sicuro il Supporto di WordPress per SVG
Daryll ha sviluppato un plugin, WP SVG (noto anche come Safe SVG), che utilizza la libreria SVG-Sanitizer al momento del caricamento delle immagini SVG nella vostra libreria media di WordPress. Il plugin consente inoltre di visualizzare le SVG come le normali immagini nella mediateca.
Potete scaricare Safe SVG gratuitamente dal repository di WordPress o cercandolo nella vostra bacheca di WordPress, sezione Plugin, sotto “Aggiungi nuovo”. Ci vogliono davvero pochi clic per iniziare.
C’è anche una versione premium, che si trova su wpsvg.com, che permette di limitare l’upload delle SVG da parte di alcuni utenti e ottimizzazioni aggiuntive delle SVG. Nell’esempio qui sotto, useremo semplicemente la versione gratuita.
Come plugin alternativo, vi consigliamo di dare un’occhiata a SVG Support.
Prima di caricare le vostre file SVG, è importante notare che si comportano in modo leggermente diverso dalle immagini. Quando si esporta una SVG dal proprio strumento di fotoritocco, si dovrà esportare il testo come curve (o creare un contorno), altrimenti potrebbero essere rese in modo leggermente diverso nei vari browser.
Installato il plugin, non ci sono impostazioni. Questo si limita a sanitizzare i vostri SVG al momento dell’upload. Sul nostro sito di prova qui sotto abbiamo sostituito il nostro logo con un file SVG, che è visibile come al solito nella libreria media.
Ci è stato anche possibile utilizzare il pannello di controllo del nostro tema per cambiare il logo nell’intestazione di WordPress con il nostro file SVG. Potete vedere qui sotto che viene effettivamente servito il file .svg. E ora è ottima sugli schermi retina.
C’è un’ulteriore modifica che abbiamo dovuto apportare. In IE9-11 desktop e mobile i file SVG non scalano ancora correttamente. L’aggiunta di altezza e larghezza risolve questo problema. Questo potrebbe variare a seconda del tema, ma sul nostro sito di prova abbiamo semplicemente modificato il nostro file header.php e aggiunto dimensioni personalizzate. Alcuni temi di WordPress utilizzano i CSS per modificare le dimensioni, il che non è buono per motivi di performance, ma per questo potrebbe richiedere l’aggiunta di altro codice per risolvere il problema di IE.
E questo è tutto! Ora avete abilitato in modo sicuro il supporto di SVG in WordPress. Questo plugin non è approvato o supportato nel core di WordPress, quindi, naturalmente, usatelo a vostro rischio e pericolo. Tuttavia, se stavate già caricando SVG con il solo snippet del MIME type, allora, in ogni caso, fatelo con il plugin.
Se non avete mai usato SVG prima, assicuratevi di avere abilitato GZIP sul vostro server per il tipo di file “image/svg+xml”. In questo modo sarete sicuri che siano compressi e che carichino il più velocemente possibile. A volte i sysadmin abilitano solo i tipi di file standard. Nota: GZIP è già abilitato su tutti i server Kinsta per le SVG.
Riepilogo
Le SVG sono un ottima soluzione per migliorare il look del vostro sito! Consigliamo di utilizzare insieme SVG, PNG e JPG per ottenere il massimo delle prestazioni, in quanto le immagini molto dettagliate non saranno altrettanto buone in formato SVG. Le SVG sono ottime per il vostro logo e per le vostre icone, per garantire che siano perfetti su ogni schermo.
Cosa ne pensate? Avete già utilizzato SVG sul vostro sito WordPress?
Brian ha una grande passione per WordPress, lo usa da più di dieci anni e sviluppa anche un paio di plugin premium. Brian ama i blog, i film e le escursioni. Entra in contatto con Brian su Twitter.
Lascia un commento