SVG è un’immagine vettoriale basata su XML che viene comunemente utilizzata da siti web e brand per visualizzare loghi e icone sui propri siti. Il motivo principale per cui sono particolarmente popolari tra gli sviluppatori e i 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 analizzeremo una soluzione per abilitare in modo sicuro il supporto SVG in WordPress, discutiamo del supporto dei browser, e daremo alcuni avvertimenti nel caso in cui si decida di passare al formato dell’immagine vettoriale.

Speriamo che un giorno SVG faccia parte del core di WordPress, ma al momento non ci siamo ancora arrivati.

Cos’è Una SVG?

Secondo Wikipedia, un SVG (scalable vector graphics) è un formato immagine vettoriale, basato su XML, per la grafica bidimensionale con supporto per l’interattività e l’animazione. Potete anche manipolarle attraverso il codice o con il vostro editor di testo. La specifica SVG è uno standard aperto sviluppato dal World Wide Web Consortium a partire dal 1999. Le SVG sono attualmente utilizzate solo dal 3,4% di tutti i siti web, ma, come potete vedere qui di seguito, il tasso di adozione è in rapida crescita. Siti popolari come Google, Reddit, Dropbox, ESPN e anche il nostro sito web di Kinsta utilizzano SVG.

Statistiche di utilizzo

Statistiche di utilizzo SVG aprile 2016 – aprile 2017

Supporto SVG dei Browser

Le SVG sono attualmente supportate da tutti i principali browser e dai 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 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 3+
  • Cromo 4+
  • Safari 3.2+
  • Opera 10+
  • iOS Safari 3.2+
  • Opera Mini (tutti)
  • Browser Android 4.4+
Supporto browser SVG

Supporto browser SVG

Vantaggi delle SVG

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)

Immagine JPG

Immagine JPG

PNG (dimensione ottimizzata: 85,1 KB)

Immagine PNG

Immagine PNG

SVG (dimensione ottimizzata: 6,1 KB)

Immagine SVG

Immagine SVG

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.

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.

Demo del sanitizer SVG

Demo del sanitizer SVG

È 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. È possibile scaricare gratuitamente Safe SVG dalla repository di WordPress o cercarlo all’interno della dashboard di WordPress alla voce “Aggiungi nuovo” plugin. Si può iniziare subito con pochi semplici clic.

wp-svg

Il plugin WP SVG

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.

Prima di caricare le vostre 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.

Esportazione del testo come curve

Affinity Designer – Esportazione del testo come curve SVG

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.

SVG nella libreria media WordPress

SVG nella libreria media WordPress

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.

SVG nell'header di WordPress

SVG nell’header di WordPress

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.

File header.php modificato per il problema di ridimensionamento delle SVG in IE

File header.php modificato per il problema di ridimensionamento delle SVG in 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?


Se ti è piaciuto questo articolo, allora apprezzerai la piattaforma di hosting WordPress di Kinsta. Metti il turbo al tuo sito web e ricevi supporto 24x7 dal nostro team di veterani di WordPress. La nostra infrastruttura potenziata da Google Cloud è centrata su scaling automatico, performance e sicurezza. Permettici di mostrarti la differenza di Kinsta! Scopri i nostri piani