Aggiungere file SVG al tuo sito WordPress può rendere le tue immagini nitide e chiare.
Tuttavia, mentre WordPress ti consente di caricare molti tipi di file, come immagini, audio e video, non supporta i file SVG nativamente.
Questo perché i file SVG possono presentare rischi per la sicurezza. Ma non preoccuparti. Ci sono modi sicuri per utilizzare gli SVG.
In questo articolo, ti mostreremo come aggiungere file immagine SVG a WordPress in modo facile e sicuro.
Cos'è SVG?
SVG, o Scalable Vector Graphics, è un formato di file che definisce grafica vettoriale utilizzando il linguaggio di markup XML. Il suo principale vantaggio è che ti consente di ingrandire le immagini senza perdere qualità o avere alcuna pixelatura.
Come funziona SVG?
Scalable Vector Graphics (SVG) è una tecnologia che visualizza disegni bidimensionali utilizzando XML. È diverso dai formati immagine comunemente usati come PNG, GIF o JPG.
Se prendi un file immagine PNG o JPG e ingrandisci, noterai che l'immagine diventerà sfocata e pixelata.
La grafica vettoriale non utilizza pixel.
Invece, utilizzano una mappa bidimensionale che definisce la grafica che stai visualizzando come coordinate. L'immagine non si pixelizza quando ingrandisci perché semplicemente non può.
Questo ti consente di ingrandire la grafica vettoriale senza perdere qualità. Soprattutto, le immagini SVG possono avere dimensioni di file molto inferiori rispetto ai file PNG o JPG, rendendole un'ottima scelta per la formattazione delle immagini.
La grafica vettoriale è comunemente utilizzata per icone, font icona, loghi di siti web e immagini di branding. Potresti voler aggiungere file SVG a WordPress per il logo della tua azienda, icone o altre grafiche.
Tuttavia, i file SVG possono essere un po' insicuri. Ecco perché WordPress non supporta i caricamenti di file SVG per impostazione predefinita.
Se carichi un'immagine SVG in WordPress, vedrai il seguente messaggio di errore: 'Spiacenti, questo tipo di file non è consentito per motivi di sicurezza.'
Problemi di sicurezza relativi agli SVG in WordPress
I file SVG contengono codice nel linguaggio di markup XML, che è simile all'HTML. Il tuo browser o il software di editing SVG analizzano il linguaggio di markup XML per visualizzare l'output sullo schermo.
Tuttavia, questo espone il tuo sito web a possibili vulnerabilità XML. Può essere utilizzato per ottenere un accesso non autorizzato ai dati degli utenti o per innescare attacchi brute force o attacchi di 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 a utenti fidati. Per saperne di più sulla sicurezza, puoi consultare la nostra guida completa alla sicurezza di WordPress per principianti.
Tenendo conto di ciò, ti mostreremo come utilizzare i file SVG in WordPress in modo semplice e sicuro con 3 metodi. Utilizza semplicemente i collegamenti rapidi qui sotto se sei interessato a un metodo particolare:
- Metodo 1. Consenti file SVG in WordPress utilizzando WPCode (Consigliato)
- Metodo 2. Carica file SVG in WordPress utilizzando SVG Support
- Metodo 3. Carica file SVG in WordPress utilizzando Safe SVG
Suggerimento esperto: Prima di decidere di utilizzare file immagine SVG, non dimentichiamo che è possibile utilizzare anche strumenti di editing di immagini per comprimere le dimensioni dei file e migliorare la velocità e le prestazioni del tuo WordPress.
Pronto? Iniziamo con un tutorial video.
Tutorial video
Se preferisci istruzioni scritte, continua a leggere.
Metodo 1. Consenti file SVG in WordPress utilizzando WPCode (Consigliato)
Il modo più semplice per consentire in modo sicuro i caricamenti SVG su WordPress è utilizzare WPCode, il plugin per snippet di codice più potente disponibile.
WPCode dispone di una vasta libreria di snippet di codice preconfigurati che possono sostituire molti plugin monouso sul tuo sito. Include gli snippet per disabilitare le pagine di allegato, mantenere il Classic Post Editor e consentire i caricamenti di file SVG, il tutto senza i rischi di compromettere il tuo sito web.
Per iniziare, dovrai installare e attivare il plugin gratuito WPCode. Per istruzioni dettagliate, consulta la nostra guida passo passo su come installare un plugin WordPress.
Dopo l'attivazione, dovrai navigare su Snippet di codice » Aggiungi snippet nel pannello di amministrazione di WordPress. Cerca semplicemente 'svg' e passa il mouse su 'Consenti caricamento file SVG'.
Fai clic su 'Usa snippet' quando appare.
Successivamente, verrai indirizzato alla pagina 'Modifica snippet', dove WPCode ha già configurato tutte le impostazioni necessarie per l'esecuzione del codice.
Tutto ciò che devi fare è attivare l'interruttore su 'Attivo' e quindi premere il pulsante 'Aggiorna'.
Ora puoi caricare file SVG senza che WordPress ti dia un messaggio di errore o di avviso.
Puoi quindi trattarlo come qualsiasi altra immagine sul tuo sito web WordPress.
Per impostazione predefinita, lo snippet WPCode consente solo agli utenti con il ruolo di 'Amministratore' di aggiungere SVG a WordPress.
Puoi anche concedere l'autorizzazione a tutti gli altri ruoli utente eliminando le righe 14-16 dello snippet di codice. Quindi, puoi 'commentarle' aggiungendo due barre, '//', all'inizio delle righe 11-13, trasformandole in un colore beige chiaro.
WPCode non eseguirà alcuna parte dello snippet che considera un commento anziché codice. Puoi vedere questo esempio nell'immagine qui sotto.
In entrambi i casi, con il codice rimosso, tutti gli utenti possono caricare file SVG sul tuo sito. Assicurati solo di fare clic su 'Aggiorna' per salvare eventuali modifiche apportate.
Metodo 2. Carica file SVG in WordPress utilizzando SVG Support
Questo secondo metodo utilizza il plugin SVG Support. Ti consente di visualizzare gli SVG all'interno di post e pagine di WordPress e di controllare chi può caricarli.
Innanzitutto, devi installare e attivare il plugin SVG Support. Per maggiori dettagli, puoi consultare la nostra guida passo passo su come installare un plugin WordPress.
Dopo l'attivazione, dovrai accedere a Impostazioni » Supporto SVG per configurare le impostazioni del plugin.
Nella pagina delle impostazioni, seleziona semplicemente la casella accanto all'opzione 'Limita agli amministratori?'. Questo consentirà solo a un amministratore del sito di caricare file SVG in WordPress.
Il passaggio successivo consiste nell'attivare la modalità avanzata. Dovrai selezionare questa opzione solo se desideri utilizzare funzionalità avanzate come le animazioni CSS e il rendering SVG inline.
Non dimenticare di fare clic sul pulsante 'Salva Modifiche' per memorizzare le tue impostazioni.
Ora puoi creare un nuovo post o modificare uno esistente. Nell'editor del post, potrai caricare il tuo file SVG come faresti con qualsiasi altro file immagine.
Aggiungi semplicemente un blocco immagine all'editor e quindi carica il file SVG.
Metodo 3. Carica file SVG in WordPress utilizzando Safe SVG
Questo metodo utilizza anche un plugin e ti consente di sanificare i file SVG caricati su WordPress.
La prima cosa da fare è installare e attivare il plugin Safe SVG. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin di WordPress.
Il plugin funziona subito e non ci sono impostazioni da configurare. Puoi semplicemente procedere e iniziare a caricare file SVG.
Lo svantaggio è che questo plugin consente il caricamento di SVG da parte di tutti gli utenti che possono scrivere post sul tuo sito WordPress. Per controllare chi può caricare file, devi acquistare la versione premium del plugin.
Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere in sicurezza file SVG in WordPress. Potresti anche voler consultare la nostra guida su come aggiungere un widget all'intestazione del tuo sito web e le nostre scelte di esperti di snippet di codice utili per principianti.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Dennis Muthomi
Ho spostato un cliente da loghi PNG a SVG. La differenza di velocità è stata incredibile, soprattutto su mobile!
Un rapido consiglio dalla mia esperienza: crea sempre un backup PNG e usa l'elemento 'picture' nel tuo codice. In questo modo, sei coperto con i browser più vecchi ottenendo tutti i vantaggi SVG su quelli moderni.
Apprezzo molto anche i consigli sulla sicurezza: sono super importanti quando si lavora su siti di clienti!
Jiří Vaněk
Una volta ho letto un articolo interessante sul perché i file SVG possano essere pericolosi. Tuttavia, prima di avere quelle informazioni, ho lottato costantemente con WordPress, che continuava a rifiutarsi di caricare gli SVG, ed ero piuttosto frustrato. Ho icone per il web in formato SVG. Tuttavia, WPCode e uno snippet semplice mi hanno davvero aiutato. È una soluzione semplice e funzionale che chiunque può gestire, anche un principiante assoluto.
Eugene Velasquez
Ho aggiunto tutti i plugin SVG ma mi viene ancora impedito di aggiungere SVG, che ho creato da solo, quindi non c'è alcun rischio o codice dannoso. C'è un altro modo per aggiungere i file SVG a WordPress?
Supporto WPBeginner
Se nemmeno i plugin ti permettono di aggiungere SVG al tuo sito, ti consigliamo di contattare il tuo provider di hosting per assicurarti che non abbiano un'impostazione di sicurezza che possa sovrascrivere il tuo WordPress.
Amministratore
Felix Krusch
Dall'introduzione dei Blocchi puoi semplicemente aggiungere codice SVG in un "Blocco HTML personalizzato". Non è più necessario un plugin per snippet.
Supporto WPBeginner
If the image is hosted elsewhere that would work but to upload we would recommend using the snippet at this time. You would also not want to add the PHP code using the HTML snippet if that is what you mean
Amministratore
sn
Ciao,
Grazie per i tuoi articoli.
Di solito faccio riferimento al tuo sito web e imparo molte cose da esso.
Qui hai scritto che l'uso di file svg nei siti web non è sicuro.
La mia domanda è se creo io stesso il file svg da Adobe Illustrator o software simili,
è di nuovo insicuro metterlo sul mio sito web?
e dovrei usare il plugin Safe SVG?
Grazie!
Supporto WPBeginner
If you are the person who created the SVG and there are no other users uploading files to your site, you are fine to not use the safe SVG plugin.
Amministratore
sn
Intendi dire che in tal caso non ci saranno vulnerabilità?
Supporto WPBeginner
Le vulnerabilità di cui preoccuparsi sarebbero se aggiungi un SVG da una fonte sconosciuta che potrebbe aver aggiunto codice dannoso.
sn
Grazie mille per la tua risposta.
mr waghela
grazie signore per aver condiviso le migliori informazioni
Supporto WPBeginner
Glad our guide was helpful
Amministratore
Alan Smith
Thanks a lot
Supporto WPBeginner
You’re welcome
Amministratore
Amandine
Ciao, ho caricato con successo il plugin SVG e posso caricare il mio file SVG, ma al momento del ritaglio del logo, non riesco a ritagliarlo e quindi non appare sul mio sito web. Appare bello e nitido nel pannello di personalizzazione a sinistra, ma non sul sito web. Mentre se carico un file PNG, il ritaglio funziona e appare sia nel pannello di personalizzazione che sul sito web. Potresti per favore farmi sapere se c'è qualcosa che devo fare affinché il mio logo SVG appaia sul sito web? Grazie
Supporto WPBeginner
Dovresti modificare il tuo SVG utilizzando qualcosa di diverso dal tuo sito WordPress per ritagliarlo alle dimensioni desiderate
Amministratore
pushkraj
Vorrei caricare un svgz (svg compresso) ma ricevo un errore per motivi di sicurezza. Anche se posso caricare il formato SVG senza alcun problema, ho bisogno di svgz per ridurre le dimensioni del file. Per favore, aiutatemi con la mia richiesta.
Grazie.
Supporto WPBeginner
Per consentire questo tipo di file, dovresti consultare la nostra guida qui: https://www.wpbeginner.com/wp-tutorials/how-to-add-additional-file-types-to-be-uploaded-in-wordpress/
Amministratore
Brian
Ciao WPBeginner,
Ho aggiunto il plugin Safe SVG al mio sito web, ma sembra che i miei file SVG vengano caricati danneggiati. Non posso usarli. Come è possibile?
Supporto WPBeginner
You would want to reach out to the plugin’s support and let them know about the issue and they should be able to assist
Amministratore
Huu Tai
Grazie per le informazioni complete,
Mi chiedo se potrei usare SVG Support per caricare il logo web?
Supporto WPBeginner
Finché il tuo tema non sovrascrive specificamente questo, dovresti essere in grado di farlo.
Amministratore
Scott
Capisco la complessità della conversione di immagini pixel in matematiche.
È emerso un metodo o un programma abbastanza semplice o automatizzato per convertire immagini jpeg e .png in SVG?
Staff editoriale
Ciao Scott,
Non che ne siamo ancora a conoscenza.
Amministratore
Cactoos
Per quanto ho provato, Inkscape può fare esattamente questo. È gratuito e funziona su Windows, Mac e Linux.
Gimp, Illustrator e non sono sicuro, ma forse anche Krita possono farlo.
Gimp e Krita sono anche gratuiti e multipiattaforma.
Infatti ho convertito una foto piuttosto pesante e di alta qualità in SVG (precedente immagine JPG diretta dalla fotocamera) e ha funzionato perfettamente, ci ha messo il suo tempo, ma funziona. Potrebbe essere perché sono su un sistema piuttosto debole.
Salman Ravoof
Quasi tutti i software di editing vettoriale hanno questa funzionalità. Sia Inkscape che Illustrator possono farlo. Tuttavia, i risultati non saranno così buoni se hai forme complesse e molti colori (tutte le immagini della vita reale rientrano in questa categoria). Questa funzionalità è meglio utilizzata per immagini con meno di 4 colori, meno è meglio.