Come utilizzare SVG in WordPress

Nonostante SVG sia stato standardizzato all'inizio degli anni 2000, il formato immagine molto attraente non ha visto molta luce del giorno a causa dello scarso supporto del browser. Tutto questo è cambiato drasticamente negli ultimi anni, poiché SVG sta rapidamente diventando la forma di immagine de facto sul web.

E non sono solo i grafici ad innamorarsi di SVG, ma anche gli utenti di WordPress che desiderano velocizzare i loro blog riducendo le dimensioni complessive dell'immagine. Questo post esplorerà l'argomento su come utilizzare SVG su un sito basato su WordPress.

Cos'è SVG?

SVG (Scalable Vector Graphics) è un formato immagine basato su XML per la visualizzazione di grafica sul Web e all'interno delle app. Fondamentalmente, un file SVG è semplicemente una raccolta di codice XML che specifica diverse forme e colori utilizzati all'interno di un'immagine SVG.

E poiché puoi aprire file SVG con un editor di testo, è anche facile effettuare personalizzazioni utilizzando il codice CSS3 e JS di base. Di conseguenza, gli SVG sono molto apprezzati dagli utenti Web moderni per la loro versatile flessibilità.

Ancora più importante, il W3C riconosce SVG come uno standard leader del settore. Quindi, SVG funziona perfettamente insieme ad altre tecnologie basate sul Web come DOM, HTML e così via.

Perché SVG è importante?

Le immagini SVG sono basate su vettori, di conseguenza un'immagine SVG può essere ridimensionata all'infinito sullo schermo senza perdere qualità. L'interazione principale a questo proposito è Browser XML; dove il browser traccia la specifica XML ad ogni aumento o diminuzione.

Inutile dire che i file SVG sono molto più flessibili dei formati tradizionali come PNG o JPEG. E l'interazione diretta tra CSS e JavaScript significa che puoi adattare le tue immagini SVG in movimento. Questo è fondamentale quando stai lavorando su un nuovo design o altro.

Per quanto riguarda le prestazioni, le immagini SVG tendono ad essere di dimensioni notevolmente inferiori rispetto a qualsiasi controparte. Di conseguenza, è comune vedere illustrazioni, loghi e icone costruiti come grafica vettoriale. Questo ha portato anche allo sviluppo di molti Icon Fonts, che menzioneremo brevemente nell'articolo più avanti.

In poche parole, gli SVG offrono flessibilità, dimensioni dell'immagine ridotte e una solida base per migliorare le prestazioni delle immagini sul tuo sito WordPress.

Come vengono create le immagini SVG?

La creazione di immagini SVG può avvenire in due modi: scrivendo "codice" e utilizzando un moderno software di progettazione grafica. Il primo metodo, che consiste nello scrivere script XML, è il modo tradizionale di creare file SVG, ma può rivelarsi una tecnica lenta e inefficiente.

Una semplice raccolta di quadrati potrebbe assomigliare a questa in formato XML:

Come puoi vedere, scriverlo ripetutamente per una grafica complessa equivale a spararti un piede.

L'altro metodo consiste nell'utilizzare il software e questo è il modo più rapido ed efficiente per creare grafica SVG. Con il software basato su vettori, puoi concentrarti sulla creazione di elementi grafici e successivamente esportarli come file SVG già pronti.

Affinity Designer è un noto programma di editing vettoriale professionale, ma lo è anche software come Adobe Illustrator, Sketch, Figma e Inkscape.

Qualunque sia il software con cui decidi di utilizzare, l'unica cosa che conta davvero sono i tuoi piani per il tipo di grafica che desideri creare. La funzionalità di esportazione funziona allo stesso modo in tutti i programmi moderni.

Inutile dire che SVG è sempre la stessa struttura XML. Quindi, puoi usare le immagini SVG sia come Documento ma anche inserirle Inline.

WordPress supporta SVG?

Per quanto strano possa sembrare, una piattaforma con l'ambito di WordPress in realtà non supporta il formato di file SVG. Ma solo a causa di gravi problemi di sicurezza.

Vedi, a differenza dei tipi di file PNG/JPG/GIF, SVG non è un'immagine rasterizzata ma un vettore. Di conseguenza, SVG è esposto ai rischi dello sfruttamento di JavaScript e WordPress ha scelto di non consentire SVG in WordPress per impostazione predefinita. Ha senso sotto tutti i punti di vista.

Anche se i contributori di WordPress parlano di SVG da molti anni, ci sono troppe angolazioni da affrontare per prevenire problemi di sicurezza su larga scala.

Quindi, l'unico modo per aggirare questo problema è tramite i plug-in o abilitando SVG come formato di file utilizzando le funzioni del tema.

Come abilitare le immagini SVG su un sito Web WordPress?

Prima di arrivare alla parte dei plugin, puoi effettivamente abilitare SVG in WordPress tramite il file functions.php nella directory del tuo tema. Questo è sicuramente il modo più rapido, ma anche il meno sicuro poiché stai abilitando SVG in formato raw.


//enable SVG file format for WordPress Uploads
function add_file_types_to_uploads($file_types){

$nuovi_tipi_file = array();
$new_filetypes['svg'] = 'immagine/svg+xml';
$ tipi_file = array_merge($ tipi_file, $ nuovi tipi_file );

restituisce $tipi_file;
}
add_action('upload_mimes', 'add_file_types_to_uploads');

E l'altra opzione, più sicura, è quella di utilizzare i plug-in. Ecco tre dei plugin più importanti per abilitare SVG in WordPress.

Supporto SVG

L'aggiunta del supporto SVG è metà della battaglia, potresti anche voler aggiungere uno stile personalizzato, effetti di animazione e abilitare le restrizioni. Ma per fare tutto questo, hai bisogno di supporto.

Con il supporto SVG: puoi iniziare ad aggiungere file SVG ai tuoi post e pagine utilizzando il tradizionale tag Immagine. Ad esempio, puoi aggiungere una nuova classe CSS alle tue immagini: "style-SVG", che recupererà l'immagine SVG caricata e ne visualizzerà il contenuto in una visualizzazione in linea.

Le caratteristiche principali di questo plugin sono:

• Abilita la gestione dei file SVG all'interno della Libreria multimediale di WordPress.
• Converti le immagini SVG caricate in codice inline.
• Supporta il widget immagine per aggiungere tag Alt e Didascalia a tutte le immagini SVG.
• Disegna le singole immagini SVG utilizzando CSS personalizzati.
• Implementa effetti di animazione utilizzando CSS3 e JavaScript.
• Pagine di impostazioni dettagliate all'interno della dashboard del plug-in.
• Applicare l'accesso basato sulle autorizzazioni. Ad es. Limita il caricamento solo agli account con privilegi di amministratore.

Avvertenza che, nonostante ciò che offre questo plugin, i rischi dello sfruttamento SVG sono abbastanza reali. Non abilitare la gestione dei file SVG per utenti di cui non ti fidi. Quindi, idealmente, abiliteresti questa funzione solo per gli utenti a livello di amministratore.

Per ribadire, chiunque abbia i privilegi di caricamento può caricare nuovi file SVG, ma poiché i file SVG sono basati su XML, sono aperti allo sfruttamento tramite iniezioni dannose e altro.

SVG sicuro

Safe SVG è un plug-in che ti darà tranquillità in termini di preoccupazione per potenziali rischi per la sicurezza. Il plug-in è stato creato appositamente per disinfettare eventuali nuovi caricamenti SVG e prevenire intenzioni dannose. Inoltre, Safe SVG aggiunge la possibilità di vedere che tipo di file SVG hai caricato tramite la tua libreria multimediale.

Con 50.000 utenti attivi, puoi contare su Safe SVG per fornire un track record stellare di prestazioni sicure. Degno di nota è che ci sono due diverse versioni per questo plugin; gratuito e a pagamento.

La versione gratuita include funzionalità per disinfettare i nuovi caricamenti e aggiunge anche il supporto per la visualizzazione SVG all'interno della Libreria multimediale.

Se scegli la versione Pro, otterrai funzionalità aggiuntive come l'ottimizzazione SVGO. Questa tecnica di ottimizzazione ridurrà ulteriormente la dimensione del file dei tuoi caricamenti SVG.

Inoltre, con Pro, puoi scegliere chi può o non può caricare nuovi file SVG. Di conseguenza, puoi limitare l'accesso solo a utenti specifici. E infine, acquistando il plug-in hai accesso al supporto premium: ottieni risposte alle tue domande ogni volta che ne hai più bisogno.

Aggiungi il supporto SVG completo

Dovresti ottenere risultati ragionevoli con i primi due plugin che abbiamo elencato. Ma se ti piace l'idea di aggiungere SVG al tuo sito usando Shortcodes, dai un'occhiata a questo plugin.

Questo plugin aggiunge alcune funzionalità SVG al tuo WordPress e utilizza una tecnica SVG basata su un'idea di Alexey Ten. Questo modo di includere le immagini SVG in HTML sembra essere quello con la migliore combinazione di prestazioni e compatibilità al momento.

Aggiungi supporto SVG completo abilita il caricamento SVG e la generazione di shortcode. Inoltre, puoi personalizzare lo stile di ogni elemento SVG usando CSS personalizzato. Ultimo ma non meno importante, puoi specificare una foto di riserva per uno o tutti gli SVG che hai caricato.

Quali sono altri utili plugin SVG per WordPress?

Oltre ad aggiungere il supporto SVG a un sito WordPress, quali altri plugin sono disponibili che potrebbero avvantaggiare il tuo sito? Tutti e la loro nonna sanno che ci sono notevoli vantaggi in termini di prestazioni. Sia in termini di dimensioni del file, ma anche di capacità del browser di eseguire il rendering di grafica vettoriale in linea.

Icone WP SVG

Le icone sono un elemento visivo e tali elementi tendono a dare nuova vita ai design. È interessante notare che questo plugin è nato per necessità personale. L'autore voleva iniziare a implementare più file SVG nei suoi progetti, ma non riusciva a trovare una soluzione. Quindi, ha preso il suo tempo e il suo impegno e ha creato WP SVG Icons.

Questo plugin è semplicissimo da usare e puoi sostituire le icone esistenti sul tuo sito in pochi clic. Soprattutto, non è necessario ricreare tutte le immagini per i display Retina, purché imposti la larghezza massima, l'icona si ridimensionerà automaticamente.

Proprio come nel caso degli autori, questo plugin è eccezionale per tutti i tipi di lavoro di sviluppo, multisito e client. Senza restrizioni, non devi preoccuparti della compatibilità dei temi o di qualcosa di simile.

Sembra esserci anche una versione premium nell'offerta con una funzionalità che consente il caricamento di icone personalizzate. Quindi, non sei limitato alle icone integrate.

Menu sociale SVG

Questo è un plug-in che funziona come widget per la visualizzazione delle icone dei social media tramite le immagini SVG. Per far funzionare questo plugin, tutto ciò che devi fare è creare un nuovo menu WordPress con collegamenti ai tuoi profili sui social media.

Successivamente, seleziona la posizione del menu sociale SVG personalizzato e salva il nuovo menu. Successivamente, puoi utilizzare il widget SVG Social Menu nella barra laterale o in altre aree pronte per i widget del tuo blog.

Le icone attualmente disponibili sono per i seguenti siti e piattaforme: plus.google, WordPress, facebook, twitter, dribbble, Pinterest, Github, Tumblr, Youtube, Flickr, Vimeo, Instagram, LinkedIn, xing /feed, mailto.

Logo SVG ed effetti di testo

SLATE è un plug-in che abilita il supporto dello shortcode per l'aggiunta di effetti SVG personalizzati. Puoi utilizzare questo plugin per promuovere un'immagine forte del marchio, enfatizzare i widget CTA o per far risaltare gli elementi a modo loro. L'uso intelligente del supporto dello shortcode significa che puoi modificare e personalizzare i tuoi effetti in qualsiasi momento.

Ad esempio, puoi mescolare diversi colori, caratteri, filtri e utilizzare numerosi modelli di riempimento che si manifestano come effetti di design che catturano l'attenzione. SLATE offre la stessa libertà creativa di un software di editing vettoriale, ma solo senza la necessità di utilizzare alcun software!

Quindi, quali sono alcune delle caratteristiche principali?

• Testo. Genera codici brevi in ​​grado di replicare gli effetti di effetti di testo che catturano l'attenzione ma compatibili con la SEO. Proprio come quello che vedi nell'istantanea sopra.
• Caratteri. Non sai dove trovare i caratteri personalizzati? Nessun problema poiché SLATE viene fornito preconfezionato con l'enorme libreria di Google Fonts.
• Schemi di riempimento. Le lettere sono riempite con un motivo di riempimento a tua scelta. I modelli di riempimento hanno parametri. Controlla varie dimensioni, distanze e colori per produrre variazioni uniche o lascia che le impostazioni predefinite funzionino per te.

e molto altro ancora! Questo plugin è una centrale elettrica per ottenere uno stile di testo e loghi con eccezionale precisione. E attraverso SVG, nientemeno.

Dove puoi trovare la grafica SVG?

Cosa puoi fare se non hai alcuna esperienza precedente con la progettazione grafica vettoriale? Fortunatamente, trovare SVG al giorno d'oggi è semplice e diretto. Al massimo, devi solo ricollegarti all'autore originale che ha realizzato la grafica. E molte piattaforme forniscono immagini gratuite senza il requisito dell'attribuzione.

Ecco alcuni fantastici siti che offrono contenuti SVG gratuiti:

• FontAwesome — Font Awesome la più fantastica libreria di icone di font al mondo. Il progetto va forte da diversi anni e ha un supporto approfondito non solo per i browser ma anche framework specifici e software di progettazione. Questo pacchetto di font orientato all'accessibilità è un killer assoluto e così semplice da usare! In effetti, sono sicuro che ci sono una dozzina di plugin per WordPress che forniscono supporto per Font Awesome!
• Vecteezy — Vecteezy è probabilmente la più grande piattaforma di grafica vettoriale del pianeta. Alimentato da design personalizzati, contributi della community e dati basati sul Web: Vecteezy ha vettori disponibili in qualsiasi tipo di categoria, forma o forma. Ed è anche semplicissimo scaricare file. Tutto quello che devi fare è collegarti alla pagina dell'autore da cui hai ottenuto il file. Questo è un sito che mi ritrovo ad utilizzare frequentemente.
• Sfondi SVG — Sei al passo con le ultime tendenze del web design? Ci sono così tante aree creative in cui i design vengono esplorati ora. E una di queste aree sono gli sfondi SVG. Li hai visti anche tu. Motivi ondulati, linee curve e così via. Usa questo sito per generare sfondi SVG facilmente accessibili!
• SVG Grabber : questa estensione di Chrome è un'assoluta manna dal cielo per ottenere immagini SVG da diverse pagine di siti Web. Basta fare clic sull'icona e l'estensione può recuperare ogni singolo file SVG su una pagina. Ovviamente, devi seguire le regole del copyright ovunque puoi, ma nel complesso sembra un'estensione solida da utilizzare frequentemente.
• Vector Logo Zone : a seconda della nicchia in cui lavori, potresti trovare utile avere una raccolta di loghi vettoriali dei marchi leader a livello mondiale. Puoi anche utilizzare questi file quando fai annunci o promozioni specifici. E la maggior parte degli editor di foto in questi giorni può convertire i file SVG in PNG e comunque.

E siamo noi che tocchiamo la superficie di ciò che è là fuori, davvero. Personalmente, SVG ha fatto molta differenza nel modo in cui lavoro con la progettazione di siti Web e persino nella creazione di immagini in primo piano. Con un SVG puoi davvero fare tutto lo spettro dei colori, diversi allineamenti di forme, ecc.

Certo, non è la stessa cosa che usare una bella fotografia della vita reale, ma su qualsiasi sito Web puoi trovare molti posti in cui un JPG potrebbe essere sostituito con una grafica vettoriale. Ed è proprio questo l'obiettivo di questo post, darti un'ampia panoramica su come utilizzare SVG con WordPress.

Se abbiamo raggiunto quell'obiettivo, ti lasceremo giudicare. Se c'è qualcosa che hai voglia di aggiungere a questo post o hai risorse aggiuntive da condividere, sappi che la nostra sezione commenti è sempre aperta.