Come caricare SVG su WordPress: 2 metodi

Vuoi imparare a caricare SVG su WordPress? Presenteremo in questo tutorial i metodi per raggiungere questo obiettivo..

Gli amministratori Web e i web designer sono tenuti a utilizzare diversi formati di file multimediali nel loro lavoro. Uno dei formati più popolari oggi è SVG, un formato vettoriale basato su XML. Sfortunatamente, non tutti i browser e le piattaforme supportano SVG, quindi devi prima abilitare il supporto SVG manualmente.

Questo articolo tratterà i passaggi per caricare i file SVG su un sito Web WordPress utilizzando il plug-in di supporto SVG. Risponderemo anche ad alcune domande riguardanti i problemi di sicurezza che circondano questo particolare formato di file multimediali e perché vale la pena utilizzare SVG.

Per iniziare, prendiamo familiarità con SVG e come funziona.

Ma prima di iniziare, se non hai mai installato WordPress, scoprilo Come installare un blog Wordpress passi 7 et Come trovare, installare e attivare un tema WordPress sul tuo blog 

Quindi torniamo al perché siamo qui.

Cos'è SVG?

Scalable Vector Graphics (SVG) è un formato di immagine grafica vettoriale basato su testo XML. Sebbene i formati di immagine comuni come JPG e PNG siano costituiti da tonnellate di minuscoli quadrati chiamati pixel, questo formato si basa sul linguaggio di markup XML per descrivere gli attributi dell'immagine.

A gennaio 2022, 42% di tutti i siti web nel mondo usa SVG. Questa percentuale è aumentata da gennaio 2021, quando solo 29,4% dei siti web l'ho usato. Simile ai formati PNG e JPG, SVG è popolare tra i siti Web ad alto traffico come Google, Wikipedia e YouTube.

Un'altra cosa grandiosa di SVG è che è ampiamente supportato da tutti i principali browser.

Ecco il elenco di browser che supportano il formato di file SVG:

navigatore	Sostegno parziale	Supporto totale
Pannelli di segnalazione	-	Versione 12-18, 79-96, 97
Firefox (in inglese)	Versione: 2	Versioni 3-94, 95, 96-97
Firefox per Android	-	Versione: 95
Chrome	-	Versioni 4-96, 97, 98-100
Chrome per Android	-	Versione: 96
Safari	Versione: 3.1	Versione 3.2-15.1, 15.2, TP
opera	-	Versioni 10-81, 82
Mini Opera	-	Tutte le versioni
Opera mobile	-	Versione 12-12.1, 64
Safari su iOS	-	Versione 3.2-15.1, 15.2
browser di Android	Versione 3-4.3	Versione 4.4-4.4.4, 96
Browser UC per Android	-	Versione: 12.12
Samsung Internet	-	Versione 4-14.0, 15.0
Browser QQ	-	Versione: 10.4
Baidu Browser	-	Versione: 7.12
Browser KaiOS	-	Versione: 2.5

Come funziona SVG?

Gli SVG utilizzano XML per produrre immagini vettoriali bidimensionali. A differenza di JPG e PNG, la grafica vettoriale non ha pixel. Il loro comportamento è invece descritto in file di testo XML.

Per questo motivo, gli SVG possono essere cercati, indicizzati, inseriti in script, modificati e compressi come il codice. Di conseguenza, chiunque può crearli utilizzando un editor di testo o un software di grafica vettoriale.

WordPress supporta SVG?

Non c'è supporto SVG in WordPress per impostazione predefinita a causa dei rischi per la sicurezza che impone: tratteremo i problemi di sicurezza che circondano SVG in modo più approfondito in seguito.

Ecco un messaggio di errore che appare quando si carica una grafica SVG su un sito Web WordPress:

C'è un discussione in corso sul rendere SVG parte delle funzionalità principali di WordPress. Fino ad allora, dobbiamo essere creativi e utilizzare altre soluzioni per caricare immagini SVG su WordPress.

Perché usare WordPress SVG?

Nonostante i suoi problemi di sicurezza, molti utenti usano ancora questo formato immagine in quanto presenta vari vantaggi. Ecco alcuni dei vantaggi dell'utilizzo di file SVG:

• evoluzione: Poiché SVG è un formato di immagine vettoriale, i file SVG mantengono la stessa qualità su tutte le risoluzioni dello schermo. Questo vantaggio è presente anche dopo averli ingranditi, motivo per cui molte persone usano questo formato immagine scalabile per icone e loghi.
• File di dimensioni inferiori : i file SVG semplificano il miglioramento delle prestazioni del sito Web perché occupano meno spazio di archiviazione Web e si caricano molto più velocemente rispetto ad altre immagini.
• SEO friendly : Google indicizza i file SVG, consentendo loro di apparire su Google Ricerca immagini e migliorando le tue attività di ricerca. SEO. Con altri tipi di immagini, sei limitato a ottimizzare i loro attributi alt.
• SVG basati su codice sono modificabili utilizzando un editor di testo o un software di editing di grafica vettoriale. Puoi ottimizzare i file SVG per i siti Web o persino aggiungere animazioni per rendere la grafica interattiva.

SVG su WordPress e sicurezza

Poiché SVG è essenzialmente un file di testo XML, presenta vulnerabilità sfruttabili che non influiscono su altri formati di immagine. Pertanto, le persone possono facilmente dirottarlo con codice dannoso per lanciare attacchi Cross-Site Scripting (XSS) e XML External Entity (XXE) sul tuo sistema.

Per questo motivo, dovresti prestare attenzione quando maneggi i file SVG e li aggiungi a WordPress.

Per ridurre al minimo i rischi per la sicurezza, assicurati di disinfettare i file SVG prima di caricarli nella libreria multimediale di WordPress. Questo processo rimuove il codice sospetto e gli errori, rendendo le immagini sicure per il tuo sito web.

Puoi ripulire i file SVG caricati utilizzando un plug-in SVG: ne tratteremo i passaggi in seguito. Tuttavia, ti consigliamo di disinfettarlo due volte con il Test disinfettante SVG -

Un altro modo per proteggere il tuo sito Web WordPress è limitare i caricamenti SVG solo agli utenti fidati. Gli utenti selezionati dovrebbero essere consapevoli dei problemi di sicurezza che circondano il formato SVG: questo li scoraggerà dall'ottenere file SVG da fonti dubbie.

Come caricare file SVG su WordPress in 2 metodi sicuri

Tecnicamente, ci sono due modi per aggiungere il supporto SVG a WordPress: usando a WordPress Plugin oppure attivandolo manualmente. Qualunque sia la tua scelta, ti consigliamo vivamente di limitare i privilegi di download agli amministratori e agli utenti fidati solo per ridurre al minimo i download dannosi.

Usa un plugin per WordPress

In questo tutorial useremo Supporto SVG. questo WordPress Plugin utilizza una libreria di disinfettante SVG che si attiverà automaticamente durante il caricamento di file SVG nella libreria multimediale. È anche facile da configurare e gratuito da usare.

Di seguito sono riportati i passaggi per configurare il supporto SVG:

1. IInstalla il plugin e attivarlo.

2. Accesso a impostazioni -> supporto SVG dalla dashboard di WordPress.

3. Seleziona la casella accanto all'opzione Limita agli amministratori per limitare i privilegi di caricamento. Fai lo stesso per l'opzione Attiva la modalità avanzata se desideri accedere a funzionalità avanzate, come il rendering SVG in linea e lo stile CSS.

4. Dopo aver salvato le modifiche, puoi iniziare a caricare in sicurezza i file SVG nel catalogo multimediale.

Aggiungi manualmente il supporto per WordPress SVG

Questo metodo prevede la modifica del file functions.php del tuo sito Web WordPress. Pertanto, ti consigliamo vivamente di seguire questi passaggi se hai familiarità con PHP e comprendi appieno il problema di sicurezza di SVG.

Assicurati di eseguire il backup del tuo sito Web WordPress prima di apportare modifiche per evitare la perdita di dati in caso di configurazione errata.

I seguenti passaggi spiegheranno come abilitare manualmente SVG in WordPress con l'aiuto di un client FTP come fileZilla.

1. Vai alla directory dei file del tuo sito web sul tuo host
2. Accesso a public_html -> wp-includes. Scorri verso il basso fino a te trova functions.php.

3. Fare clic con il pulsante destro del mouse su questo file e selezionare Visualizza/Modifica per aprirlo e incollarvi il seguente snippet di codice:

function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_filter('upload_mimes', 'add_file_types_to_uploads');

4. Salva le modifiche e prova a caricare un nuovo file SVG. Se il processo ha esito positivo, la tua libreria multimediale dovrebbe accettare il caricamento del file.

I numerosi vantaggi dei file SVG contribuiscono alla crescente popolarità di questo tipo di file. Sfortunatamente, i file di testo XML sono inclini all'iniezione di codice, motivo principale per cui WordPress non include il supporto SVG per impostazione predefinita.

Detto questo, ci sono due modi per fare in modo che il tuo sito Web WordPress accetti i file SVG: utilizzando un file WordPress Plugin o modificare il file functions.php. Oltre a limitare i privilegi di caricamento, sarai in grado di caricare in modo sicuro file SVG nella libreria multimediale del sito web.

Altre risorse consigliate

Vi invitiamo inoltre a consultare il risorse di seguito per approfondire l'inizio e il controllo del tuo sito Web e blog.

• Come creare un semplice plugin per WordPress
• Come creare un semplice plugin per WordPress a blocchi di Gutenberg
• Come impostare la tua home page in WordPress
• Come capire il dashboard di WordPress
• Come creare un semplice plugin per WordPress

Conclusione

Questo è tutto per questa guida che ti mostra come caricare SVG su WordPress. Ci auguriamo che questo articolo ti abbia fornito alcune informazioni sui vantaggi e sui rischi del caricamento di file SVG su un sito Web WordPress. Se hai dubbi o suggerimenti, faccelo sapere all'interno commentaires.

Tuttavia, sarai anche in grado di consultare il nostro risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.

Nel frattempo, condividi questo articolo sui tuoi diversi social network.   

...