Vuoi carcare file SVG in WordPress? Per impostazione predefinita, WordPress ti permette di caricare tutti i formati di file immagine, audio e video più diffusi, ma i file con estensione SVG non sono tra questi. In questo articolo ti mostrerò come aggiungere facilmente SVG in WordPress.
Inizieremo dallo spiegare cosa siano i file SVG e perché, secondo me, ti conviene usarli per le tue grafiche. Poi ti spiegherò un paio di metodi per poterli caricare su WordPress.
Ti ricordo che ho pubblicato un corso su WordPress e uno su Elementor, in cui spiego anche come applicare i file SVG in modo pratico nelle grafiche di una pagina. Trovi i corsi nella pagina di presentazione. Se sei interessato ad ottenere degli sconti, iscriviti alla newsletter, trovi il modulo nella sidebar.
Trovi anche un video su YouTube sull’argomento!
Cos’è un SVG?
SVG è un’immagine vettoriale basata su XML che è comunemente usata da siti web e marchi per mostrare loghi e icone sui loro siti web. La ragione principale per cui sono particolarmente popolari tra gli sviluppatori e i designer è che sono un formato di immagine scalabile, generalmente più piccolo nella dimensione del file (a volte di parecchio), e non pixelano sugli schermi retina.
Ecco come appare un SVG una volta aperto il file in un editor di testo:
Funzionamento degli SVG
La grafica vettoriale scalabile (SVG) è una tecnologia che visualizza disegni bidimensionali utilizzando XML. Sono quindi molto diversi dai formati immagine comunemente usati come PNG, GIF o JPEG.
Se prendi un file di immagine png / jpeg e lo ingrandisci, allora noterai che l’immagine inizierà a sfocarsi e a mostrare i pixel.
La grafica vettoriale non utilizza pixel, ma una mappa bidimensionale che definisce il grafico che stai visualizzando. Quando si ingrandisce, l’immagine non si rovina per niente.
Questo ti permette di ingrandire la grafica vettoriale senza perdite in qualità. Inoltre, le immagini SVG possono essere molto più piccole in formato file rispetto ai JPEG o PNG.
La grafica vettoriale è comunemente usata per le icone, i font, i loghi dei siti web e le immagini di branding. Potresti voler aggiungere file SVG in WordPress per il tuo logo aziendale, icone, o altri elementi grafici.
Per quanto possano sembrare fighi, i file SVG sono ancora un po’ insicuri. Ecco perché WordPress non supporta il caricamento di file SVG di default. Se carichi un’immagine SVG in WordPress, allora vedrai il seguente messaggio di errore:
Problemi di sicurezza per gli SVG in WordPress
I file SVG contengono codice nel linguaggio XML che è simile all’HTML. Il tuo browser o il tuo software di editing SVG analizza il linguaggio di markup XML per visualizzare l’output sullo schermo.
Tuttavia, questo apre il tuo sito web a possibili vulnerabilità. Può essere utilizzato per ottenere l’accesso non autorizzato ai dati degli utenti, innescare attacchi di forza bruta o attacchi di scripting cross-site.
I metodi che condividerò in questo articolo cercheranno di sanificare i file SVG per migliorare la loro sicurezza. Tuttavia, questi plugin non possono impedire totalmente il caricamento o l’iniezione di codice dannoso.
La soluzione migliore è quella di utilizzare solo file SVG creati da fonti affidabili e di limitare il caricamento di SVG solo agli utenti fidati. Quindi, se i file SVG sono create da te, non hai nulla di cui preoccuparti.
Per saperne di più sulla sicurezza del tuo sito in WordPress, dai un’occhiata alla guida definitiva alla sicurezza WordPress per il 2021. Detto questo, vediamo come usare facilmente e in sicurezza i file SVG in WordPress.
SVG Support
Questo metodo offre un supporto completo per l’aggiunta di file SVG in WordPress. Permette anche di visualizzare SVG in linea nei post e nelle pagine di WordPress.
Per prima cosa, devi installare e attivare il plugin SVG Support. Per maggiori dettagli, vedi la guida base su come installare un plugin per WordPress.
Dopo l’attivazione, devi visitare la pagina Impostazioni -> SVG Support per configurare le impostazioni del plugin.
Nella pagina delle impostazioni, ti consiglio di selezionare la casella accanto all’opzione Restrict to Administrators? Questo permetterà solo ad un amministratore del sito di caricare file SVG in WordPress.
La prossima opzione è quella di attivare la modalità avanzata. Devi selezionare questa opzione solo se vuoi usare funzioni avanzate come le animazioni CSS e il rendering SVG in linea.
Non dimenticare di cliccare sul pulsante salva le modifiche per salvare le tue impostazioni.
Ora puoi creare un nuovo post o modificarne uno esistente. Nell’editor del post, puoi caricare il tuo file SVG come faresti con qualsiasi altro file immagine. Aggiungi semplicemente un blocco immagine all’editor e poi carica il file SVG.
Ora sarai in grado di caricare e incorporare il file SVG in WordPress.
Safe SVG
Anche con questo plugin potrai caricare file svg e inoltre puoi anche effettuare la sanificazione dei file SVG caricati su WordPress.
La prima cosa che devi fare è installare e attivare il plugin Safe SVG. Per maggiori dettagli, vedi la guida base su come installare un plugin per WordPress.
Il plugin funziona in modo immediato e non ci sono impostazioni da configurare. Puoi semplicemente procedere e iniziare a caricare i file SVG.
Attenzione! Questo plugin permette l’upload di SVG a tutti gli utenti che possono scrivere articoli sul tuo sito. Questo significa che se hai un sito che condividi con altri collaboratori, anche loro potranno caricare gli SVG.
Per controllare cosa può fare ogni utente in base al ruolo, puoi usare il plugin gratuito WPFront User Role Editor. In particolare, per gli SVG, seleziona l’opzione “unfiltered_upload” nella sezione Media, per i ruoli che vuoi siano in grado di caricare immagini vettoriali.
Nota conclusiva
Ha senso usare le immagini SVG solo per grafiche e non per le foto. Infatti, siccome si tratta di mappe di linee e colori, la dimensione rimane ridotta solo se il contenuto è semplice in termine di quantità di linee e colori.
Una foto, con la sua distribuzione organica di colori, sfumature e linee, è troppo complicata perché sia sensato trasformarla in vettore solo per ridurne il peso. Diverso il discorso per quello che riguarda la possibilità di ridimensionamento.
Il mio consiglio è di utilizzare le SVG per ogni grafica del sito, logo o icona. Su YouTube ho pubblicato dei video che mostrano come usare elementi grafici come SVG o PNG per migliorare l’aspetto di una pagina. Magari ti possono far venire delle idee da utilizzare anche sul tuo sito.
Ricorda sempre che le SVG possono essere rischiose solo se non conosci la loro provenienza. Se le hai fatte tu con un programma di grafica, allora non hai nulla di cui preoccuparti.
Ti ricordo i miei corsi su Udemy, trovi i link anche qui sotto. Iscriviti alla newsletter per ottenere degli sconti!
