Come aggiungere file immagine SVG in WordPress (3 semplici soluzioni)

Volete aggiungere file SVG al vostro sito WordPress?

Per impostazione predefinita, WordPress consente di caricare quasi tutti i formati di file immagine, audio e video più diffusi. Tuttavia, SVG non è tra questi. Questo perché il formato di immagine presenta potenziali problemi di sicurezza, ma esistono modi sicuri per utilizzarlo.

In questo articolo vi mostreremo come aggiungere facilmente e in modo sicuro SVG in WordPress.

Che cos’è SVG?

SVG o Scalable Vector Graphics è un formato di file che definisce la grafica vettoriale utilizzando il linguaggio di markup XML. Il vantaggio principale di SVG è che permette di ingrandire le immagini senza perdere qualità o avere pixel.

Come funziona SVG?

Scalable Vector Graphics (SVG) è una tecnologia che visualizza disegni bidimensionali utilizzando XML. Sono diversi dai formati di immagine comunemente usati come PNG, GIF o JPG.

Se si prende un file immagine PNG o JPG e lo si ingrandisce, si noterà che l’immagine inizierà a sfocarsi e a diventare pixelata.

La grafica vettoriale non utilizza i pixel.

Utilizzano invece una mappa bidimensionale che definisce la grafica visualizzata come coordinate. Con lo zoom, l’immagine non si riduce in pixel perché non può farlo.

Ciò abilita l’ingrandimento della grafica vettoriale senza perdere qualità. Imagely, le immagini SVG possono avere dimensioni molto più ridotte rispetto ai file PNG o JPG, il che le rende un’ottima scelta per la formattazione delle immagini.

Tenete presente che potete anche utilizzare gli strumenti di editing delle immagini per comprimere le dimensioni dei file e aumentare la velocità e le prestazioni di WordPress.

La grafica vettoriale è comunemente utilizzata per icone, font di icone, loghi di siti web e immagini di branding. È possibile aggiungere file SVG a WordPress per il logo aziendale, le icone o altri elementi grafici.

Per quanto belli, tuttavia, i file SVG possono essere poco sicuri. Ecco perché WordPress non supporta il caricamento di file SVG per impostazione predefinita.

Se si carica un’immagine SVG in WordPress, viene visualizzato il seguente messaggio di errore:

Siamo spiacenti, questo tipo di file non è consentito per motivi di sicurezza.

Problemi di sicurezza relativi a SVG in WordPress

I file SVG contengono codice nel linguaggio di markup XML, simile all’HTML. Il browser o il software di editing SVG analizza il linguaggio di markup XML per visualizzare l’output sullo schermo.

Tuttavia, questo apre il vostro sito web a possibili vulnerabilità XML. Può essere utilizzato per ottenere l’accesso non autorizzato ai dati degli utenti, per scatenare attacchi brute force o attacchi cross-site scripting.

I metodi che condivideremo in questo articolo cercheranno di sanificare i file SVG per migliorarne la sicurezza. Tuttavia, questi plugin non possono impedire totalmente il caricamento o l’iniezione di codice dannoso.

La soluzione migliore è utilizzare solo file SVG creati da fonti affidabili e limitare il caricamento di SVG solo agli utenti fidati.

Per saperne di più sulla sicurezza, consultate la nostra guida completa alla sicurezza di WordPress per i principianti.

Detto questo, vediamo come utilizzare in modo semplice e sicuro i file SVG in WordPress utilizzando uno dei tre metodi disponibili.

Video tutorial

Se preferite le istruzioni scritte, continuate a leggere.

Metodo 1. Consentire i file SVG in WordPress utilizzando WPCode (consigliato)

Il modo più semplice e facile per consentire il caricamento di SVG su WordPress è utilizzare WPCode, il più potente plugin di snippets di codice disponibile.

WPCode è dotato di un’ampia libreria di snippet di codice preconfigurati che possono sostituire molti plugin monouso del vostro sito, come la disattivazione delle pagine degli allegati, l’uso dell’editor classico dei post o il permesso di caricare file SVG.

Per prima cosa, è necessario installare e attivare il plugin gratuito WPCode. Per istruzioni dettagliate, consultate la nostra guida passo passo su come installare un plugin di WordPress.

Dopo l’attivazione, si deve andare su Code Snippets ” Add Snippet nel pannello di amministrazione di WordPress. Cercate “svg” e passate il mouse su “Consenti caricamento file SVG”.

Poi, si può fare clic su “Usa snippet”.

Successivamente, si accede alla pagina “Edit Snippet”, dove WPCode ha già configurato tutte le impostazioni necessarie per l’esecuzione del codice.

È sufficiente fare clic sull’interruttore su “Attivo” e poi premere il pulsante “Aggiorna”.

Ora potrete caricare i file SVG senza che WordPress vi dia un messaggio di errore o di avvertimento.

È quindi possibile trattarla come qualsiasi altra immagine sul proprio sito web WordPress.

Per impostazione predefinita, lo snippet WPCode consente solo agli utenti con il ruolo di amministratore di aggiungere SVG a WordPress.

È possibile concedere i permessi anche a tutti gli altri ruoli utente, semplicemente cancellando le righe 14-16 dello snippet di codice che si vede nell’immagine sottostante.

Inoltre, si possono “commentare” aggiungendo due barre “//” all’inizio di ognuna di queste linee, facendole diventare di un chiaro colore marrone. WPCode non eseguirà nessuna parte dello snippet che vede come commento anziché come codice.

Un esempio è rappresentato dalle righe 11-13 dell’immagine sottostante.

In ogni caso, con la rimozione del codice, tutti gli utenti potranno caricare file SVG sul vostro sito WordPress. Assicuratevi di fare clic su “Aggiorna” per salvare le modifiche apportate.

Metodo 2. Caricare file SVG in WordPress utilizzando il supporto SVG

Questo metodo utilizza il plugin SVG Support e consente di visualizzare SVG in linea nei post e nelle pagine di WordPress, nonché di controllare chi ha il permesso di caricarli.

Per prima cosa, è necessario installare e attivare il plugin SVG Support. Per maggiori dettagli, consultate la nostra guida passo passo su come installare un plugin di WordPress.

Dopo l’attivazione, è necessario visitare la pagina Impostazioni ” Supporto SVG per configurare le impostazioni del plugin.

Nella pagina delle impostazioni, è necessario selezionare la casella accanto all’opzione “Limita agli amministratori?”. In questo modo, solo un amministratore del sito potrà effettuare l’upload di file SVG in WordPress.

L’opzione successiva è quella di attivare la modalità avanzata. È necessario selezionare questa opzione solo se si desidera utilizzare funzioni avanzate come le animazioni CSS e il rendering SVG in linea.

Non dimenticate di fare clic sul pulsante “Salva modifiche” per memorizzare le impostazioni.

È ora possibile creare un nuovo post o modificarne uno esistente. Nell’editor del post, si caricherà il file SVG come si farebbe con qualsiasi altro file immagine. È sufficiente aggiungere un blocco immagine nell’editor e poi caricare il file SVG.

Ora sarete in grado di caricare e incorporare file SVG in WordPress.

Metodo 3. Caricare file SVG in WordPress utilizzando Safe SVG

Anche questo metodo utilizza un plugin e consente di eseguire la sanificazione dei file SVG caricati su WordPress.

La prima cosa da fare è installare e attivare il plugin Safe SVG. Per maggiori dettagli, consultate la nostra guida passo-passo su come installare un plugin di WordPress.

Il plugin funziona subito e non ci sono impostazioni da configurare. Si può semplicemente procedere e iniziare a caricare i file SVG.

L’aspetto negativo è che questo plugin consente il caricamento di SVG a tutti gli utenti che possono scrivere post sul vostro sito WordPress. Per controllare chi può caricare i file, è necessario acquistare la versione premium del plugin.

Speriamo che questo articolo vi abbia aiutato a capire come aggiungere in modo sicuro i file SVG in WordPress. Potreste anche leggere il nostro articolo su come risolvere i problemi più comuni con le immagini in WordPress e sui migliori plugin e strumenti SEO.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.