WordPress supporta molteplici formati di immagine, tra cui .jpg, .png, e .gif. ma non consente di utilizzare Scalable Vector Graphics (SVG), uno dei tipi di immagine più flessibili in circolazione. Per fortuna, imparare come aggiungere SVG a WordPress è abbastanza semplice.
Per abilitare questo formato di immagine, tutto ciò che devi fare è modificare un paio di file, dopodiché, sarai in grado di utilizzare i file SVG all’interno dei tuoi contenuti come normali immagini, logotipi e altro. Inoltre, una volta abilitato, WordPress funziona perfettamente con SVG.
In questo articolo vedremo cosa sono gli SVG e perché sono così utili. Quindi ti spiegheremo come aggiungere SVG a WordPress utilizzando due metodi diversi e spiegheremo come animarli con CSS.
Iniziamo!
Che cosa sono gli SVG (Scalable Vector Graphics) e perché sono utili
SVG non è un formato di immagine di per sé. In realtà, è un linguaggio di markup utilizzato per creare immagini bidimensionali composte da vettori. Questo può sembrare complesso in teoria, ma in pratica puoi utilizzare i file SVG nelle stesse situazioni in cui utilizzeresti qualsiasi altra immagine.
Questo è importante perché gli SVG hanno alcuni vantaggi rispetto ai tipi di immagine più comuni, come PNG e JPG. Per esempio:
- Occupano meno spazio. Invece di pixel, gli SVG sono composti da vettori. Quindi le tue immagini peseranno meno , il che dovrebbe aiutare il tuo sito a caricarsi più velocemente .
- Puoi ridimensionarli facilmente. Come forse saprai, ci sono limiti a quanto puoi ridimensionare le immagini regolari prima che inizino a sembrare terribili. Questo non è il caso degli SVG, poiché i vettori possono essere ridimensionati senza alcuna perdita di qualità (o modifiche alle dimensioni del file).
- Puoi animare SVG con i CSS. I vettori possono essere animati usando CSS, creando effetti unici (ne parleremo più avanti).
Creare i tuoi SVG personalizzati può essere difficile se non hai conoscenze di grafica. Ad ogni modo, puoi sempre cercare immagini stock SVG o chiedere al tuo designer se può replicare alcuni degli elementi del tuo sito utilizzando quel formato.
Tieni presente che più un’immagine è complessa, più difficile sarà replicarla utilizzando i vettori. In altre parole, gli SVG rappresentano una buona alternativa per elementi grafici semplici come logotipi e icone, ma non funzionano altrettanto bene per le fotografie.
Come aggiungere SVG a WordPress (due metodi)
Come accennato in precedenza, WordPress non supporta SVG nativamente ma puoi abilitare questa funzione manualmente o utilizzare un SVG plugin per farlo. Cominciamo con quest’ultimo metodo perché è il più semplice.
Metodo 1: utilizza il plugin SVG Support
Il modo più rapido per aggiungere SVG a WordPress, è questo. Utilizzeremo il plugin SVG Support, che abilita questo particolare formato immagine e aggiunge il supporto alla libreria multimediale di WordPress.
l processo è semplice. Devi solo installare e attivare il plugin come sempre, quindi sarai in grado di aggiungere SVG al tuo sito WordPress.
WordPress richiede di avere il tag XML nei file SVG prima del caricamento. Apri il tuo file SVG in qualsiasi editor di codice, aggiungi quanto segue alla prima riga del tuo file SVG e salva, in modo da non riscontrare errori di sicurezza:
<?xml version="1.0" encoding="utf-8"?>
Inoltre ci sono altre due impostazioni che potresti voler modificare in base alle tue esigenze. Prima di tutto, andiamo alla scheda Impostazioni → SVG Support :
All’interno troverai due opzioni. la primna attiva la modalità avanzata del plugin, che ti consente di caricare i tuoi SVG con i CSS. Se non vuoi animare i tuoi SVG, puoi saltare questa opzione.
In secondo luogo, puoi anche limitare la possibilità di caricare SVG solo agli amministratori abilitando l’opzione Restrict to Administrators?. Dipende da te.
Metodo 2: modifica il file functions.php del tuo sito
Ogni sito web WordPress ha il proprio file functions.php . Questo componente essenziale include importanti funzioni, classi e filtri. È anche il tuo biglietto per aggiungere il supporto SVG a WordPress tramite poche righe di codice.
Per raggiungere questo file, dovrai accedere al tuo sito web tramite FTP. Se non hai un client, ti consigliamo di utilizzare FileZilla . Dopo aver trovato le tue credenziali FTP e aver effettuato l’accesso al tuo sito, ti consigliamo di andare alla tua cartella root, che di solito è chiamata public_html oppure prende il nome dal tuo sito.
Ora, entra nella cartella del tuo tema attivo e cerca il file functions.php al suo interno.
Accedi ora al file functions.php facendo clic con il pulsante destro del mouse su di esso e scegli l’ opzione Visualizza/Modifica . Questo aprirà il file usando il tuo editor di testo predefinito. Scorri fino in fondo e incolla questo 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');
Salva le modifiche al file e chiudilo. Quindi puoi tornare alla tua dashboard e testare la tua nuova funzionalità caricando un file SVG nella tua libreria multimediale e tutto dovrebbe funzionare senza intoppi!
Anima le tue immagini SVG usando CSS
L’animazione dei tuoi SVG è un processo piuttosto complesso, soprattutto se non hai molta esperienza nell’uso dei CSS . Tuttavia, questa funzione può aiutarti a creare animazioni semplici che pesano molto poco, soprattutto se paragonate con le GIF. Inoltre, puoi ridimensionare i tuoi SVG animati in base alle necessità, il che è qualcosa che (di nuovo) non puoi fare con le GIF senza perdere qualità.
Se vuoi saperne di più su come animare SVG usando i CSS, puoi trovare diversi tutorial online che ti guideranno attraverso le basi del processo. Puoi dare un’occhiata ad alcuni esempi di ciò che puoi creare in modo da renderti conto.
Conclusione
Gli SVG sono uno dei tipi di immagini più interessanti che puoi utilizzare sul tuo sito web. La loro scalabilità non li rende solo una buona opzione per i siti responsive, ma puoi anche animarli in modo che possano sostituire le GIF in determinate situazioni. Inoltre, abilitarli in WordPress è straordinariamente semplice.
Scegli uno di questi due metodi per aggiungere file SVG a WordPress e sarai in grado di giocare con qualsiasi file SVG a tuo piacimento:
- Usa il plugin SVG support se non vuoi rischiare con il codice.
- Modifica il tuo file functions.php per aggiungere il supporto per SVG se non vuoi installare un plugin aggiuntivo.
Buon lavoro.
