Una guida al formato immagine SVG (Scalable Vector Graphics).

C'è un aspetto di Internet da cui non puoi sfuggire: le immagini. Agli albori del web, era un affare rigoroso, di solo testo. Tuttavia, ora abbiamo formati immagine dedicati per aiutarci a visualizzare immagini nitide. Il formato Scalable Vector Graphics (SVG) è uno dei più nuovi e flessibili disponibili.

Spiegheremo più avanti, ma un SVG è una raccolta di dati che si presenta come un'immagine sul front-end. Ciò significa che è possibile utilizzare Cascading StyleSheets (CSS) per manipolare l'immagine. Inoltre, puoi ridimensionarlo secondo necessità senza perdita di qualità.

Per questo post, parleremo di più sulla grafica vettoriale scalabile e su come possono aiutarti. Discuteremo anche come includerli nel tuo sito Web WordPress.

Una rapida introduzione ai formati di immagine Web più comuni

Prima di passare agli SVG e a come usarli, vale la pena parlare dei principali formati di immagine che utilizziamo per il web. Ce ne sono tre da notare:

• Gruppo congiunto di esperti fotografici (JPEG). Come suggerisce il nome, se vuoi visualizzare fotografie scattate con una fotocamera digitale, questo è il formato che fa per te.
• Grafica di rete portatile (PNG). Ti consigliamo di utilizzare il formato PNG per visualizzare qualsiasi grafica creata, come quelle di Adobe Illustrator.
• Graphics Interchange Format (GIF). Ehi, a tutti piacciono clip divertenti di programmi TV da usare come reazione sui social media! GIF è il formato perfetto per la grafica animata che è anche portatile.

Mentre alcuni sceglieranno il formato che preferiscono, questo non sarà un approccio ottimale. Ad esempio, se scegli di creare GIF per ogni immagine, potresti vedere dimensioni dei file astronomiche e immagini di scarsa qualità. Al contrario, non vorrai usare JPEGS per la grafica, perché PNG è un formato più ottimale.

Che cos'è il formato di grafica vettoriale scalabile

Avrai voglia di sopportarci in questa sezione, perché in alcune aree diventeremo tecnici. Inoltre, il concetto di SVG potrebbe creare confusione.

La grafica vettoriale scalabile non esiste (più o meno). In realtà, non sono affatto un elemento grafico o un'immagine, ma una forma di Extensible Markup Language (XML). Per chi non lo sapesse, questo è un parente stretto dell'HTML ma senza alcuni degli aspetti di quel linguaggio (come i tag predefiniti).

Come confronto che potresti già capire, considera come puoi creare forme usando i CSS. Questo è qualcosa di cui parleremo di più a breve. Bene, immagina questo CSS inserito in un wrapper di documenti che chiami utilizzando un formato e una struttura di file standard ( image.svg , ad esempio).

È più corretto affermare che poiché HTML fornisce un framework per definire intestazioni, paragrafi, sezioni, elenchi e altro, SVG fornisce il framework per definire forme come cerchi e rettangoli. Tuttavia, questo ancora non spiega perché abbiamo (e talvolta abbiamo bisogno) del formato SVG. Ne parleremo dopo.

Perché abbiamo SVG

Prima degli SVG, dovresti usare i PNG per visualizzare la grafica. Le prime immagini sul Web potrebbero essere GIF, ma in generale i PNG sono il formato immagine dominante. La domanda non è tanto: "Perché abbiamo gli SVG?", più "Cosa manca agli attuali formati di immagine che un SVG risolverà?" La risposta è: dinamismo.

Se guardi indietro ai formati di immagine web principali, due non si adattano molto alla grafica creata (JPEG e GIF). Questo lascia i PNG a sopportare lo sforzo. Tuttavia, i PNG soffrono di alcuni problemi che sono evidenti solo ora per il Web moderno:

• Sono statici, in quanto crei l'immagine offline e la esporti in quel particolare formato. Ciò significa che è alquanto rigido.
• Per estensione, non puoi cambiare il "trucco" dell'immagine. Dato che abbiamo un certo numero di dispositivi da creare e visualizzare, a volte è necessario adattarsi a quei "viewport". Fai lo sforzo di cui hai bisogno per creare tutte le dimensioni del logo solo per desktop e per i principali dispositivi mobili utilizzando i PNG.
• Sebbene i PNG possano essere leggeri, è responsabilità del designer e del proprietario del sito assicurarsi che l'ottimizzazione delle immagini avvenga. Un PNG potrebbe essere pesante, a volte più di un megabyte, senza alcuna ottimizzazione.

Inoltre, i PNG hanno riempito parte di una lacuna in un momento in cui c'erano poche opzioni in grado di fornire una qualità dell'immagine sufficientemente elevata. A quel tempo, i CSS erano agli albori e non avevamo ancora l'ambito di progettazione e sviluppo che abbiamo ora.

Ad esempio, siamo in grado di utilizzare la proprietà border-radius dal 2010. Ciò consente di definire bordi arrotondati e persino cerchi. Lo vedrai molto in azione sui pulsanti:

Utilizzerai i CSS per creare forme che possono ridimensionarsi e adattarsi allo schermo, ma la grafica vettoriale scalabile può fare di più. In effetti, ora ti rivolgerai agli SVG anziché ai CSS per farlo, anche se non sono nemmeno un proiettile magico.

I vantaggi della grafica vettoriale scalabile

Proprio come ogni altro formato di immagine, la grafica vettoriale scalabile non è perfetta. Ci sono molti aspetti positivi, ovviamente:

• Un SVG si adatta alle dimensioni di un dispositivo, spesso senza alcun ulteriore intervento da parte tua. Questo riduce il tuo tempo di sviluppo o creazione.
• Il file associato per un'immagine è piccolo, perché hai solo bisogno di un SVG. Al contrario, un logo PNG deve offrire diverse dimensioni e dimensioni. Questo occupa spazio sul server.
• Inoltre, gli SVG sono più performanti dei PNG, perché devi caricare un solo file al costo di kilobyte. Quel pacchetto di file PNG potrebbe trovarsi nei megabyte a seconda della qualità, della quantità e dell'ottimizzazione degli stessi.

Nel complesso, puoi fare di più con gli SVG rispetto a qualsiasi altro formato di immagine. Sia uno sviluppatore che un grafico possono creare SVG, tramite codice o esportando una creazione tipica da un'app di disegno dedicata. Poiché si collegano più strettamente allo sviluppo del web, l'adozione è in aumento.

Gli svantaggi della grafica vettoriale scalabile

Tuttavia, non tutto è roseo. Gli SVG hanno ancora alcuni problemi di cui vorrai essere a conoscenza:

• La tecnologia si sta sviluppando, a differenza della maggior parte degli altri aspetti principali del web. Poiché molte persone si aspettano molto dalla grafica vettoriale scalabile, c'è un "divario" tra ciò che puoi fare e ciò che vuoi fare.
• Sebbene il supporto SVG di base sia disponibile nella maggior parte dei browser, il set completo di funzionalità non è ancora disponibile a seconda del browser utilizzato. Ancora una volta, gli SVG hanno un potenziale maggiore che non è ancora evidente: abbiamo bisogno di un migliore supporto del browser per funzionalità più avanzate per vedere di cosa è capace il formato.
• In alcuni casi, potresti scoprire che le immagini SVG sono meno accurate o semplicemente errate. Questo perché devi fare affidamento su un caricamento del sito come ti aspetteresti. Se riesci a ricordare un momento in cui hai dovuto ricaricare una pagina Web a causa di errori, immagina che ciò accada solo con le tue immagini SVG.

Diciamo anche che in alcuni casi è anche più difficile creare SVG senza conoscenze di codifica. C'è un supporto molto migliore nei programmi di grafica come Affinity Designer e Adobe Illustrator. C'è anche il supporto per l'esportazione SVG in app come Google Drawing:

Questa è un'area in miglioramento, ma è ancora leggermente indietro rispetto ad altri formati di immagine.

Nonostante questi inconvenienti, puoi mitigarli. Certamente, per un utilizzo di base, puoi implementarli quasi subito. In effetti, WordPress offre anche questo supporto dopo alcuni passaggi e ne parleremo in seguito.

Come utilizzare gli SVG sul tuo sito Web WordPress

La cattiva notizia è che se vuoi caricare un SVG su WordPress senza alcun lavoro, non sarai in grado di farlo. Un ulteriore problema con l'attuale supporto per la grafica vettoriale scalabile è che WordPress non ti consente di caricare queste immagini come standard per motivi di sicurezza:

Le ragioni esulano dallo scopo di questo articolo. In breve, poiché il formato SVG è un documento anziché un'immagine reale, un utente malintenzionato potrebbe creare potenziali attacchi di scripting. Ciò significa che dovrai trovare un'alternativa più sicura.

Altrove sul Web, troverai le istruzioni per aggiungere del codice al tuo file functions.php per abilitare i caricamenti SVG. Tuttavia, non eseguiremo questo passaggio perché non possiamo garantire che sia sicuro. Invece, puoi fare quello che faresti spesso con WordPress: passare a un plugin. Consigliamo il supporto SVG:

Dopo aver installato e attivato il plug-in, vai alla schermata Impostazioni > Supporto SVG in WordPress. Questo ti mostrerà alcune schermate, ma devi solo spuntare l'opzione Limita agli amministratori? casella di controllo nel pannello Impostazioni.

Per impostazione predefinita, il plug-in consentirà a tutti gli utenti di caricare SVG. Questa potrebbe essere una cattiva notizia in base ai problemi di sicurezza intrinseci, ed è esattamente il motivo per cui WordPress non ti consente di caricare quei file in primo luogo. Tuttavia, se selezioni questa casella, il plug-in limiterà il caricamento solo agli amministratori del sito, oltre a rendere più sicuro l'utilizzo di SVG come standard.

In sintesi

Esistono molti modi per visualizzare le immagini sul Web e la maggior parte delle persone non ci pensa due volte al formato che utilizza. Tuttavia, se ti prendi il tempo necessario per adattare il formato alle necessità, otterrai immagini dettagliate e nitide che appariranno sbalorditive su tutti gli schermi.

In questo post, abbiamo offerto molte informazioni sulla grafica vettoriale scalabile. Utilizzerai i CSS per adattare l'immagine alle tue esigenze e l'ambito di manipolazione è molto più ampio di PNG e JPEG. Inoltre, sono leggeri, quindi perfetti per schermi piccoli e connessioni Internet scadenti.

Vuoi utilizzare la grafica vettoriale scalabile sul tuo sito Web e, in tal caso, questo articolo ti aiuterà? Fatecelo sapere nella sezione commenti qui sotto!

Credito immagine: GDJ.