Caricare SVG su WordPress è utilissimo, perchè ci permette di utilizzare questa tipologia di formati che, come vedrai, è fondamentale nelle realizzazione di siti web. Purtroppo però, questa possibilità è negata nativamente da WordPress per problemi di sicurezza. Vediamo come caricarli su WordPress in totale sicurezza.
Cosa sono gli SVG
La sigla SVG (definita come .svg nell’estensione dei nostri pc/Mac), indica un formato che è in grado di visualizzare vettori, grafiche vettoriali che non perdono di qualità se ingrandite o rimpicciolite. Possiamo aumentare o diminuire le dimensioni del nostro vettore senza mai perdere qualità.
Nel web viene spesso utilizzata per immagini vettoriali (loghi, illustrazioni, icone) per rendere l’immagine rappresentata sempre di altissima qualità.
Un esempio di codice .svg è quello che trovi qui sotto, come puoi notare l’immagine è composta da codici XML, chiusi all’interno di un tag <svg> e da un tag <path> che indica il percorso da seguire per il vettore. Di seguito due immagini SVG che ho realizzato ed animato per un cliente.
<svg class="mark" xmlns="http://www.w3.org/2000/svg" width="46.417" height="53.048" viewBox="0 0 46.417 53.048"> <path id="Tracciato_1" data-name="Tracciato 1" d="M801.731,552.821l19.091-27.637,2.909,4.636,22-28.275" transform="translate(-800.497 -500.625)" fill="none" stroke="#f75d20" stroke-width="3"/> </svg> <svg style="transform: translate(-45px,-8px); animation-delay: 1.5s;" class="mark" xmlns="http://www.w3.org/2000/svg" width="34.014" height="45.094" viewBox="0 0 34.014 45.094"> <path id="Tracciato_1" data-name="Tracciato 1" d="M905.608-536.864l5.627-18.062,3.7,9.184,3.37-9.184,20.385,43.394" transform="translate(-905.13 556.414)" fill="none" stroke="#ffffff" stroke-width="3"/> </svg>
Le tantissime qualità dei file SVG
I file SVG vengono molto utilizzati nel mondo del web anche per la loro incredibile duttilità, possono essere utilizzati per loghi, per piccole e grandi illustrazioni e per molto altro.
Inoltre, se comparati a file “tradizionali” di immagini, come PNG e JPG, i file in SVG sono nettamente più leggere, questo permette al sito di caricare più velocemente e di dare, indirettamente, risultati interessanti per la seo.
I file in formato SVG, sono oramai accettati da qualsiasi tipo di browser, sono infatti compatibili su qualsiasi browser web.
I file vettoriali di tipo svg ti consentono di:
- ridurre drasticamente il peso delle immagini rispetto ai file png e jpg
- avere una totale compatibilità con i broswer
- indicizzare le immagini (google e i motori di ricerca comprendono e indicizzano il codice dei file svg)
- Animare facilmente l’immagine con i css
- formattare facilmente l’immagine grazie ai fogli di stile
come abbiamo visto gli svg sono quindi una grandissima risorsa per i nostri siti web, ma perchè wordpress non permette nativamente di usare questi formati?
Perchè nativamente wordpress non accetta SVG
Le discussioni sull’upload di un file SVG in WordPress si sono susseguite per anni, puoi leggerla qui, ma, ancora oggi, non c’è la possibilità di caricare nativamente questa tipologia di file siti realizzati con il loro CMS. Perché? Semplicemente per i file SVG non sono altro che codici di file XML. Queste tipologie di file potrebbero contenere al loro interno stringe di codici di altri linguaggi, come ad esempio JavaScript, che potrebbero creare delle azioni non volute.
In un test eseguiti da un noto plugin di sicurezza per WordPress è stato caricato un codice JavaScript all’interno di un file SVG, il codice funzionava perfettamente e permetteva di lanciare una chiamata su un programma terzo, in questo caso Skype, ad un contatto già impostato.
Questo da la possibilità a malintenzionati, di realizzare codici da implementare nei SVG e hackerare tutti i siti WordPress, una vulnerabilità, che, come immagini, non è da poco.
Come Caricare SVG Su WordPress
Per caricare SVG su WordPress potete utilizzare dei plugin, vi consiglio di scegliere con cura i plugin perché l’upload dei file SVG, come abbiamo visto, può esporci a delle problematiche possibilmente serie per il nostro sito web.
Sul web potrebbe essere facile imbattersi in codici da inserire nel functions.php o in plugin che aggiungono semplicemente la possibilità di caricare file .SVG, ma, come spiegato prima, questa cosa andrebbe evitata, perché esporrebbe il nostro sito a possibili attacchi per la scarsa sicurezza del nostro sito.
Questo un esempio di codice da non implementare nel vostro sito poichè rende solamente accettabile il file in formato svg, ma che non compie nessuna sanificazione e nessun controllo sul codice del file svg rendendo quindi poco sicura questa soluzione:
function cc_mime_types($mimes) {$mimes['svg'] = 'image/svg+xml';return $mimes;}add_filter('upload_mimes', 'cc_mime_types');
Caricare gli SVG tramite Plugin
Il plugin che vi consiglio e che ho personalmente utilizzato per diversi siti web è WP SVG (conosciuto anche con il nome di Safe SVG), questo plugin è stato sviluppato da Daryll Doyle, un utente che ha a cuore la sicurezza dei formati SVG, è infatti anche autore di un ottimo tool, SVG Sanitizer, che permette di “ripulire” il codice della tua immagine SVG.
Il plugin risulta non aggiornato per le ultime release di wordpress, qualora vogliate provare qualcosa di aggiornato, il plugin WP SVG Images è quello maggiormente aggiornato e che gode di ottimi recensioni.
Caricare SVG su WordPress tramite codice
Potete caricare svg su wordpress anche utilizzando del codice da inserire nel tema. In questo caso questo sembra essere il codice più sicuro da utilizzare per caricare i file svg nel sito wordpress. Il codice va inserito all’interno del functions.php, potrai farlo tramite ftp o anche utilizzando il file manager del tuo provider.
N.B. Non sai usare dei programmi di FTP? Abbiamo scritto una piccola guida sull’articolo come caricare wordpress tramite ftp
// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {
global $wp_version;
if ( $wp_version !== '4.7.1' ) {
return $data;
}
$filetype = wp_check_filetype( $filename, $mimes );
return [
'ext' => $filetype['ext'],
'type' => $filetype['type'],
'proper_filename' => $data['proper_filename']
];
}, 10, 4 );
function cc_mime_types( $mimes ){
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );
function fix_svg() {
echo '
‘; } add_action( ‘admin_head’, ‘fix_svg’ );
Come caricare i file SVG su WordPress: il procedimento corretto
Per caricare correttamente i file SVG vi consiglio di seguire questi steps, questo dovrebbe aumentare al massimo la sicurezza del vostro sito web, potete seguire questi step sia nel caso in cui abbiate utilizzato il plugin, sia nel caso in cui abbiate scelto di utilizzare il codice php.
- Abilitate il caricamento dei file svg (tramite plugin o tramite codice)
- Impostate il caricamento dei file svg solamente per ruoli (consigliamo di consentire l’upload solamente agli amministratori del sito)
- Sanificare le immagini svg prima di caricare sul vostro sito.
Adesso potete caricare svg su wordpress nel modo più sicuro e corretto possibile, iniziate subito a godere delle fantastiche opportunità che questo file di immagine vi offre!
Rispondi