Che cos'è un file SVG (e come si caricano gli SVG su WordPress)?

Il motivo principale per cui i file SVG sono particolarmente popolari tra sviluppatori e designer è che sono un formato di immagine scalabile, generalmente di dimensioni inferiori (a volte di un bel po') e non pixelano sugli schermi retina. WordPress per impostazione predefinita, tuttavia, non ti consente di caricare il formato di file SVG, principalmente a causa di problemi di sicurezza.

Oggi analizzeremo cosa sono gli SVG, come possono essere utili e come abilitare in sicurezza il supporto SVG di WordPress. Discuteremo anche del supporto del browser, oltre ad alcuni avvertimenti se decidi di voler passare al formato immagine vettoriale.

Si spera che un giorno avremo SVG come parte del core di WordPress, ma non siamo ancora arrivati.

Che cos'è un file SVG?

SVG (Scalable Vector Graphics) è un'immagine vettoriale basata su XML comunemente utilizzata da siti Web e marchi per visualizzare loghi e icone sui loro siti Web. Wikipedia definisce SVG come:

Un SVG (grafica vettoriale scalabile) è un formato di immagine vettoriale basato su XML per la grafica bidimensionale con supporto per l'interattività e l'animazione. La specifica SVG è uno standard aperto sviluppato dal World Wide Web Consortium (W3C) dal 1999.

Puoi persino manipolare i file SVG con il codice o il tuo editor di testo. Gli SVG sono attualmente utilizzati dal 33% di tutti i siti Web e, come puoi vedere di seguito, il tasso di adozione sta crescendo rapidamente. Siti popolari come Google, Reddit, Dropbox, ESPN e persino il nostro sito Web qui su Kinsta utilizzano SVG.

Supporto per browser di file SVG

I file SVG sono attualmente supportati da tutti i principali browser, inclusi i browser mobili. L'unico problema che potresti incontrare è se hai ancora bisogno del supporto per IE8, cosa che speriamo non lo sia. IE8 ha solo una quota di mercato dei browser dello 0,36% circa e non è più supportato. Ecco un ottimo articolo di Lubos sul motivo per cui gli sviluppatori dovrebbero smettere di supportare IE8, IE9 e IE10. Dal punto di vista degli affari, questo potrebbe non essere sempre possibile, ma solleva alcuni aspetti positivi. Se per qualche motivo disperato hai ancora bisogno del supporto di IE8, potresti definire un'immagine di fallback (PNG o JPG) per le tue immagini SVG, ma non ne parleremo oggi. Di seguito è riportato un elenco di browser supportati:

• Internet Explorer 9, 10, 11+ e Edge
• Firefox 2+
• Chrome 4+
• Safari 3.1+
• Opera 10+
• iOS Safari 3.2+
• Browser Android 3+
• Firefox per Android 86+
• Opera Mini (tutti)
• Opera Mobile 12+
• Chrome per Android 89+
• Browser UC per Android 12.12+
• Samsung Internet 4+
• Browser QQ 10.4
• Browser Baidu 7.12
• Browser KaiOS 2.5

Vantaggi dell'utilizzo di file SVG

I file SVG sono un formato vettoriale, il che significa che sono automaticamente scalabili sia nei browser che negli strumenti di fotoritocco. Questo li rende ottimi sia per i grafici che per i web designer. Normalmente quando si tenta di modificare un PNG o JPG in uno strumento come Photoshop, Sketch o Paint, non è possibile eseguire l'upscaling senza pixel. Con gli SVG, puoi aumentarli a una quantità infinita e sembreranno pixel perfetti (o dovremmo dire perfetti vettoriali) ogni volta. Questo è il motivo per cui sono un ottimo formato di immagine da utilizzare per gli schermi retina.

Google indicizza gli SVG , che è un'ottima notizia per scopi SEO. Il contenuto SVG collegato a un file stesso verrà indicizzato e visualizzato nella ricerca di immagini di Google. Puoi vederlo in prima persona con le illustrazioni SVG che utilizziamo su Kinsta eseguendo una ricerca di immagini avanzata. Nota: gli SVG in linea, o meglio quelli composti solo da codice, in genere non sono indicizzati.

Gli SVG sono tradizionalmente (non sempre) di dimensioni inferiori rispetto ai PNG o ai JPG . Utilizzando gli SVG, puoi effettivamente velocizzare il tuo sito WordPress poiché ridurrai le dimensioni complessive della pagina. Genki ha scritto un ottimo articolo in cui confronta le dimensioni di SVG vs PNG vs JPEG ed ecco il nostro confronto JPG vs JPEG. Di seguito sono riportati alcuni takeaway dei suoi test in cui ha confrontato 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 puoi vedere sopra, l'SVG è una diminuzione della dimensione del file del 92,51% rispetto al JPG. E rispetto al PNG, il 92,83% . Queste sono differenze di dimensioni dei file piuttosto impressionanti. Tuttavia, c'è un avvertimento, poiché ha testato immagini più dettagliate, gli SVG alla fine sono diventati di dimensioni maggiori rispetto a JPG o PNG.

Questo è il motivo per cui molti siti utilizzano SVG per immagini meno dettagliate come loghi, icone, ecc. poiché vedranno una significativa riduzione delle dimensioni dei file. Ma per più immagini con grandi dettagli, come forse il tuo post sul blog "immagini in primo piano", potresti voler attenersi a un PNG o JPG ma puoi comunque ottimizzarli. Molti siti Web utilizzano un approccio ibrido, utilizzando entrambi i tipi di file insieme dove ha senso.

Inoltre, è importante notare che i social network come Facebook e Twitter non supportano gli SVG per la condivisione. Quindi, se hai utilizzato SVG per le tue immagini in primo piano, dovresti utilizzare la funzione Yoast SEO e caricare un PNG o JPG per l'OG e i meta tag, altrimenti potresti rischiare che la tua immagine in primo piano non venga visualizzata affatto.

Perché la sicurezza SVG è importante

Il motivo per cui SVG non fa ancora parte del core di WordPress è che ci sono problemi di sicurezza da affrontare. Puoi seguire la discussione attiva sugli SVG nel core di WordPress (#24251) che è stata avviata nel 2013. SVG è un file XML, che di per sé lo apre a diverse vulnerabilità di cui i normali formati di immagine non sono interessati. Questi includono attacchi a entità esterne XML (XXE), entità nidificate di bombe e attacchi XSS.

Mario Heiderich ha pubblicato una presentazione approfondita sui rischi per la sicurezza dovuti all'inserimento di contenuti attivi con i file SVG. Un esempio fornito è che JavaScript è stato incorporato in un SVG e in realtà è riuscito a chiamare Mario su Skype. È un po' spaventoso! SecuPress, autori di un plug-in di sicurezza per WordPress, ha anche toccato l'argomento di prestare attenzione quando si aggiungono SVG a WordPress e l'importanza di farlo nel modo giusto.

Molti plug-in SVG nel repository utilizzano il codice seguente, che consente semplicemente al tipo MIME di consentire il caricamento di SVG nella libreria multimediale di WordPress. Questo non è il modo sicuro per farlo! Quindi non andare a scaricare il primo plug-in SVG gratuito che vedi o copiare incollare questo codice e pensare 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 gli SVG devono essere disinfettati . La sanificazione è 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 la codifica dei dati, il filtraggio e la convalida delle stringhe, ecc. È qui che entra in gioco la libreria SVG-Sanitizer di Daryll Doyle, che lui definisce "il suo tentativo di creare un disinfettante SVG decente in PHP". Guarda la demo del suo disinfettante SVG per vederlo in azione.

È anche importante considerare chi sul tuo sito ha accesso per caricare SVG. Ad esempio, se ti trovi su un sito con più autori, non hai idea del tipo di SVG che qualcun altro potrebbe caricare, esponendo il tuo sito. È consigliabile limitare i caricamenti SVG agli amministratori e a coloro che comprendono alcuni dei problemi di sicurezza.

Come abilitare in modo sicuro il supporto SVG di WordPress

Daryll ha sviluppato un plug-in, WP SVG (noto anche come Safe SVG), che utilizza la libreria SVG-Sanitizer durante il caricamento di immagini SVG nella libreria multimediale di WordPress. Il plug-in consente inoltre di visualizzare gli SVG come normali immagini nella libreria multimediale.

Puoi scaricare Safe SVG gratuitamente dal repository di WordPress o cercandolo nella dashboard di WordPress sotto i plug-in "Aggiungi nuovo". Puoi alzarti e andare con pochi semplici clic.

C'è anche una versione premium, disponibile su wpsvg.com, che ti consente di limitare il caricamento di SVG a determinati utenti e l'ottimizzazione SVG aggiuntiva. Nell'esempio seguente, utilizzeremo semplicemente la versione gratuita.

Come plug-in alternativo, potresti voler controllare il supporto SVG.

Prima di caricare il tuo file SVG, è importante capire che si comportano in modo leggermente diverso dalle immagini. Quando esporti un SVG dal tuo strumento di fotoritocco, vorrai esportare il testo come curve (o creare un contorno), altrimenti potrebbe essere leggermente diverso in vari browser.

Dopo aver installato il plug-in, non ci sono impostazioni, sanificherà semplicemente i tuoi SVG al momento del caricamento. Sul nostro sito di test qui sotto puoi vedere che abbiamo sostituito il nostro logo con un file SVG, è visualizzabile normalmente nella libreria multimediale.

Questo ci ha anche permesso di utilizzare il pannello di controllo del nostro tema per cambiare il logo nella nostra intestazione di WordPress nel nostro file SVG. Puoi vedere di seguito che sta effettivamente servendo il file .svg. E ora sembra bellissimo sugli schermi retina.

C'è un'ulteriore modifica che dovevamo apportare. In IE9-11 desktop e dispositivi mobili non ridimensionare ancora correttamente i file SVG. L'aggiunta di altezza e larghezza risolve questo problema. Questo potrebbe variare in base al tema, ma sul nostro sito di test abbiamo semplicemente modificato il nostro file header.php e aggiunto queste dimensioni personalizzate. Alcuni temi WordPress utilizzano CSS per modificare il ridimensionamento, il che non va bene per motivi di prestazioni, ma potrebbe richiedere l'aggiunta di codice aggiuntivo per risolvere il problema di IE.

E questo è tutto! Ora hai abilitato in modo sicuro il supporto SVG di WordPress. Questo plug-in e/o metodo non è approvato o supportato dal core di WordPress, quindi, ovviamente, utilizzalo a tuo rischio. Tuttavia, se stavi già caricando SVG con solo lo snippet di tipo MIME, allora, per favore, fallo in questo modo.

Inoltre, se non hai mai utilizzato SVG prima, assicurati di aver abilitato GZIP sul tuo server per il tipo di file "image/svg+xml". Ciò assicurerà che siano compressi e si carichino il più velocemente possibile. A volte gli amministratori di sistema abilitano solo i tipi di file più standard. Nota: GZIP è abilitato su tutti i server Kinsta già per gli SVG.

Sommario

Gli SVG sono un ottimo modo per migliorare l'aspetto del tuo sito! Ti consigliamo di utilizzare insieme SVG, PNG e JPG per ottenere le migliori prestazioni, poiché le immagini molto dettagliate non funzioneranno altrettanto bene nel formato SVG. Gli SVG sono ottimi per il tuo logo, per assicurarti che appaia perfetto per i pixel su ogni schermo, insieme alle icone.

Quali sono i tuoi pensieri? Hai già utilizzato gli SVG sul tuo sito WordPress?