SVG con WordPressCome abilitare il supporto SVG con WordPress [in modo sicuro]

Questo è un post tecnico di 6 anni fa. Le istruzioni potrebbero non essere più valide. Publicato: Ottobre 12, 2019

Con questo breve tutorial imparerai come abilitare in modo sicuro il supporto SVG con WordPress. I file .SVG sono immagini vettoriali basati su XML, ovvero, sul formato comunemente utilizzato dagli sviluppatori e designer web per creare loghi e icone per siti web dal formato scalabile e in genere per ottenere immagini di dimensioni ridotte rispetto agli altri formati di immagini più comunemente usati (.PNG, .JPG, etc).

Per impostazione predefinita ma sopratutto per motivi di sicurezza, WordPress non consente di caricare i file .SVG.

Per questo motivo ho pensato di scrivere una guida pratica per spiegare come abilitare in modo sicuro il supporto SVG con WordPress.

Sono sicuro che un giorno anche i file SVG saranno parte del core di WordPress, ma per il momento puoi usare la mia guida.

Quali sono i vantaggi usando le immagini .SVG con WordPress?

#. Formato vettoriale

Innanzitutto, i file SVG hanno un formato vettoriale, ovvero, automaticamente scalabile sia nei browser che nei software di fotoritocco. Questo li rende perfetti sia per i grafici che per i web designer. 

Normalmente quando provi a modificare un file immagine .PNG o .JPG dentro Photoshop o Paint, non puoi ingrandirli senza perdere qualità e quindi pixel. Gli SVG, invece, puoi ingrandirli all’infinito senza perdere qualità. Questo è il motivo principale per cui gli SVG sono un ottimo formato di immagini da utilizzare negli schermi retina.

#. Indicizzati da Google

Google indicizza gli SVG, il che è un’ottima notizia ai fini SEO. 

#. Dimensioni ridotte

Gli SVG hanno (quasi) sempre dimensioni minori rispetto alle altre immagini in formato .PNG o .JPG. 

Se scegli di usare immagini in formato SVG, aumenterai in maniera considerevole la velocità del sito WordPress proprio perché usando immagini leggere si ridurrebbero drasticamente anche le dimensioni complessive delle tue pagine web.

Perché WordPress non consente di caricare file .SVG

Il motivo principale per cui i file SVG non fanno ancora parte del core di WordPress è dovuto essenzialmente ad esigenze di sicurezza e protezione. Un hacker, ad esempio, potrebbe iniettare un file javascript dentro un file SVG ed in questo caso il tuo sito sarebbe veramente a rischio.

Per questi motivi ti sconsiglio vivamente di usare il primo codice o plugin che trovi su internet per abilitare l’upload dei file .SVG nelle immagini del tuo sito WordPress.

Ecco un esempio di codice che potresti trovare sul web:

/** *  Aggiungere SVG a WordPress */
function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$new_filetypes['svgz'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_action('upload_mimes', 'add_file_types_to_uploads');

Come abilitare in modo sicuro il supporto SVG con WordPress

La soluzione deve necessariamente passare per una completa pulizia o ancora meglio, come tecnicamente si dice, per una disinfezione totale dei file .SVG.

I file SVG devono essere disinfettati prima di essere incorporati nei media del tuo sito web.

Un ottimo plugin WordPress che effettua questa operazione di pulizia dei file .SVG prima di caricarli nei file media della libreria di WordPress, si chiama Safe SVG e, se sei interessato, puoi subito scaricarlo da qui: https://wordpress.org/plugins/safe-svg/

Questo processo di pulizia generato dal plugin Safe SVG impedisce agli hacker di iniettare codice dannoso nelle immagini .SVG.

Il plugin non ha nessuna impostazione per cui devi solo importare il file .SVG dentro il tuo sito WordPress ed in automatico tutti i file .SVG verranno disinfettati e puliti ed entreranno a far parte della tua libreria come tutte le altre immagini.

Conclusioni

In questo breve tutorial hai imparato come caricare i file .SVG con WordPress nella libreria delle immagini del tuo sito web.

Le immagini in formato .SVG sono un ottimo modo per migliorare l’aspetto grafico e le prestazioni del tuo sito web! 

Gli SVG sono perfetti per il tuo logo perché si adattano alle dimensioni di ogni schermo.