Come aggiungere SVG a WordPress

GUIDA PER IMMAGINI VETTORIALI SVG IN WORDPRESS

0
674
Come aggiungere SVG a WORDPRESS
Come aggiungere SVG a WORDPRESS

WordPress supporta molti formati di immagine, tra cui .jpg, .jpeg, .png, e .gif. Tuttavia, non consente di utilizzare le immagini con estenzione SVG Scalable Vector Graphics, che attualmente è uno dei tipi di immagini più flessibili disponibili. Fortunatamente, aggiungere SVG a WordPress è abbastanza semplice.

COME AGGIUNGERE SVG A WORDPRESS - messaggio di errore
COME AGGIUNGERE SVG A WORDPRESS – messaggio di errore

Se proviamo ad inserire questo tipo di file riceveremo il seguente errore
Questo tipo di file non è permesso per ragioni di sicurezza.

Per abilitare questo formato di immagine, tutto ciò che devi fare è modificare un paio di file. Successivamente, sarai in grado di utilizzare gli SVG / SVGZ all’interno dei tuoi contenuti come immagini, loghi e altro ancora. Inoltre, WordPress funziona perfettamente con SVG una volta abilitato il formato file.

In questo articolo, parleremo di cosa sono gli SVG e perché sono così utili. Quindi ti insegneremo come aggiungere SVG a WordPress usando due metodi diversi e spiegando come animarli con i CSS. Iniziamo!

Che cosa sono gli SVG (Scalable Vector Graphics)

Perché sono utili gli SVG

svg vs bitmap
svg vs bitmap
Gli SVG sono ideali per immagini semplici senza troppi elementi complessi, come le icone.

SVG non è un formato immagine di per sé. In realtà, è in realtà un linguaggio di markup utilizzato per creare immagini bidimensionali composte da vettori. Questo può sembrare complesso in teoria, ma in pratica gli SVG possono essere usati nelle stesse situazioni di qualsiasi altra immagine.

Ciò è importante perché gli SVG hanno alcuni vantaggi rispetto a tipi di immagini più comuni, come PNG e JPG. Per esempio:

  • Occupano meno spazio.  Invece di pixel, gli SVG sono composti da vettori. Così le tue immagini peseranno meno, il che dovrebbe aiutare il tuo sito a caricarsi più velocemente.
  • Puoi ridimensionarli facilmente.  Come sicuramente saprai, ci sono dei limiti su quanto puoi aumentare le immagini prima che inizino a sgranare. Questo non è il caso degli SVG, poiché i vettori possono essere scalati verso l’alto o verso il basso senza alcuna perdita di qualità (o modifica delle dimensioni del file).
  • Puoi animare SVG con CSS.  I vettori possono essere animati usando i CSS, che possono creare effetti unici.

Creare i propri SVG può essere difficile se non hai delle buone basi di grafica. Tuttavia, puoi sempre cercare immagini SVG gratuite o a pagamento o chiedere al tuo grafico se può replicare alcuni elementi del tuo sito utilizzando il formato SVG.

Tieni presente che più un’immagine è complessa, più difficile sarà replicarla utilizzando i vettori. In altre parole, gli SVG rappresentano una buona alternativa per la grafica semplice come logo ed icone, ma non funzionano altrettanto bene per le fotografie.

Come aggiungere SVG a WordPress

Due metodi semplici

Come accennato in precedenza, WordPress non supporta i file SVG. Tuttavia, puoi abilitare questa funzione manualmente o utilizzare un plug-in. Iniziamo con quest’ultimo metodo perché è il più semplice.

Metodo 1: utilizzare il plug-in SVG support

Come aggiungere SVG a WordPress - SVG Support
Come aggiungere SVG a WordPress – SVG Support

Se stai cercando il modo più veloce per aggiungere SVG a WordPress, questa guida fa proprio per te. Utilizzeremo il plugin SVG Support, che abilita questo particolare formato di immagine ed aggiunge il supporto per il tuo media library:

svg-support.2.3.11.zip

Il processo è semplice, installa SVG support dallo store di WordPress o caricandolo il file manualmente e sarai in grado di aggiungere i i files SVG al tuo sito WordPress. Tuttavia, ci sono altre due impostazioni che potresti voler cambiare a seconda delle tue esigenze. Per prima cosa, andiamo alla  scheda Impostazioni → SVG Support:

Come aggiungere SVG a WordPress - SVG Support opzioni
Come aggiungere SVG a WordPress – SVG Support opzioni

All’interno, troverai due opzioni.

  1. La prima opzione Enable Advanced Mode ovvero l’attivazione della modalità avanzata del plugin, ti consente di indirizzare i tuoi SVG con CSS. Se non vuoi animare i tuoi SVG, puoi saltare questa opzione.
  2. La seconda opzione Restrict to Administrators se lo ritieni opportuno puoi limitare la possibilità di caricare gli SVG agli amministratori.

Metodo 2: modifica il file functions.php del tuo sito

Il file functions.php è un po’ il cervello di un sito WordPress, è un componente essenziale di del CMS WordPress tutti ne hanno uno. Functions.php include funzioni classiche e filtri importanti. Aggiungendo poche righe di codice possiamo abilitare wordpress all’utilizzo dei file SVG.

Per modificare questo file puoi utilizzare l’accesso tramite FTP (scelta migliore). Con il tuo client ftp preferito esempio Filezilla o CoreFTP tramite nome utente e password potrai accedere alla cartella root del tuo sito. Accedi all’ FTP del tuo sito dalla cartella root cerca la cartella public_htm (generalmente è quella che contiene il tuo sito):

COME AGGIUNGERE SVG A WORDPRESS - Tramite FTP
COME AGGIUNGERE SVG A WORDPRESS – Tramite FTP

È importante notare che /wp-includes/functions.php è il file principale, ogni tema ha il suo file functions.php con qualche codice aggiuntivo, ma cambiando tema andremmo a perdere le modifiche effettuate.

Se modifichi il file functions.php del tuo tema tramite il backend del tuo sito in WordPress avrai lo stesso effetto.
Aspetto –> Editor sulla colonna di destra cerca il file functions.php (funzioni del tema) fai la modifica e poi salva. l’operazione fatta da qui è più semplice, ma usando questo metodo ogni volta che andrai ad aggiornare il tuo tema perderai la modifica effettuata sul tuo file functions.php

Codice da aggiungere nel file functions.php:

Salva le modifiche nel file e chiudilo. Quindi puoi tornare alla tua dashboard e testare la tua nuova funzionalità caricando un file SVG nella tua libreria multimediale, che dovrebbe funzionare senza problemi!

Anima le tue immagini SVG usando i CSS

L’animazione degli SVG è un processo piuttosto complesso, se non si ha molta esperienza con i CSS. Tuttavia, questa funzione può aiutarti a creare animazioni semplici che pesano molto poco, soprattutto confrontate con le GIF. Inoltre, essendo .svg grafica vettoriale potrai ridimensionare a piacimento i tuoi SVG animati senza perdere la qualità, cosa con le GIF animate non è assolutamente possibile fare.

Conclusione

Come aggiungere SVG a WordPress - SVG logo
Come aggiungere SVG a WordPress – SVG logo

Gli SVG sono dei file di immagine molto interessanti posso essere utilizzati con qualsiasi browser, la loro più grande peculiarità è che sono scalabili ma pesano pochissimo. Sono molto utili per creare loghi e anche se questa funzione è un po’ più complessa posso essere usati anche come gif animati.

Scegli uno di questi due metodi per aggiungere SVG a WordPress e sarai in grado di giocare con il tipo di file al contenuto del tuo cuore:

  1. Usa il plugin SVG Support se non vuoi lavorare sul codice.
  2. Modifica il tuo functions.php file per aggiungere supporto per SVG se non vuoi installare un plugin aggiuntivo.

Avete domande su come aggiungere SVG a WordPress? Scrivimi nella sezione commenti qui sotto!

Summary
Come aggiungere SVG a WordPress
Article Name
Come aggiungere SVG a WordPress
Description
WordPress supporta molti formati di immagine, tra cui .jpg, .jpeg, .png, e .gif, ma non supporta le estenzione SVG Scalable Vector Graphics, con questa guida spieghiamo come poter aggiungere questa funzione
Marco D'Elia
Marco D'Elia
Marco D'Elia
Publisher Logo

LASCIA UN COMMENTO

Per favore inserisci il tuo commento!
Per favore inserisci qui il tuo nome