Cos’è un file SVG? Guida su come usarlo

Scalable Vector Graphics (SVG) è un tipo speciale di formato immagine. Gli SVG non sono come gli altri tipi. Non dipendono da pixel unici per creare le immagini che vedete. Invece, usano dati “vettoriali”.

Gli SVG permettono di scalare le immagini fino a qualsiasi risoluzione. Questo è utile per il web design e per molti altri usi. Risponderemo alla domanda “Cos’è un file SVG? Poi vi mostreremo come usarlo.

Cos’è un file SVG e come si usa?

SVG è una grafica basata su vettori. Un vettore è un elemento che ha una particolare grandezza e direzione.

Scalable Vector Graphics è un markup basato su XML per descrivere la grafica vettoriale bidimensionale. È uno standard Web aperto e basato sul testo che descrive le immagini. Possono essere resi a qualsiasi dimensione. SVG è, essenzialmente, per la grafica ciò che l’HTML è per il testo.

Perché usare un file SVG?

SVG può risolvere molti dei più difficili problemi di sviluppo web di oggi. Vediamone alcuni.

Ricettività e scalabilità

Sotto il cofano, SVG usa forme, numeri e coordinate piuttosto che una griglia di pixel per rendere la grafica nel browser, il che lo rende indipendente dalla risoluzione e infinitamente scalabile. Puoi creare un cerchio con una penna o un piano di scrittura del cielo se lo guardi attentamente. Solo la scala è diversa.

SVG permette di combinare diverse forme, percorsi ed elementi di testo per creare immagini chiare e nitide in qualsiasi dimensione.

I formati basati su raster come GIF, JPG e PNG, d’altra parte, hanno dimensioni fisse che li fanno diventare pixel quando vengono scalati. Mentre le tecniche di immagine responsive sono utili per la grafica in pixel, non saranno mai in grado di competere con la scalabilità indistruttibile di SVG.

Programmabilità e interattività

SVG può essere modificato e scriptato. Puoi aggiungere animazioni e interazioni alla tua grafica SVG usando CSS o JavaScript.

Accessibilità

I file SVG possono essere ricercati e indicizzati essendo basati sul testo. Sono accessibili da lettori di schermo, motori di ricerca e altri dispositivi.

Prestazioni

La dimensione dei file di un sito web è uno dei fattori chiave che influenzano le sue prestazioni. La grafica SVG tende ad essere più piccola dei file bitmap.

Casi d’uso SVG comuni e supporto dei browser

SVG offre una moltitudine di applicazioni pratiche. Diamo un’occhiata alle più importanti.

Diagrammi e semplici illustrazioni

SVG è il formato perfetto per qualsiasi disegno tradizionale che può essere fatto con penna e matita.

Icone e loghi

SVG è ideale per icone e loghi che sono nitidi e chiari a tutte le dimensioni, come pulsanti e cartelloni. Le icone SVG sono anche più facili da individuare e più facilmente accessibili.

Animazioni

La grafica SVG può essere usata per creare animazioni attraenti. Il codice SVG può interagire sia con l’animazione JavaScript che con la sua funzionalità di animazione SMIL integrata.

Interattività (diagrammi e grafici, infografiche o mappe)

SVG può essere usato per tracciare dati e aggiornarli dinamicamente in base alle azioni dell’utente o ad altri eventi. Infografica SVG interattiva, mappa stradale SVG interattiva.

Effetti speciali

SVG può avere molti effetti dal vivo, come il morphing delle forme e altri effetti appiccicosi.

Progettazione di applicazioni e interfacce

SVG ti permette di fare interfacce sofisticate che puoi integrare con HTML5, applicazioni basate sul web e rich internet applications (RIA).

SVG può essere usato in molte situazioni e quasi ovunque, come potete vedere. La buona notizia su tutto questo è che il supporto dei browser per SVG è ottimo, come puoi verificare tu stesso su caniuse.com.

Due modi per creare un file SVG

I file SVG possono essere creati in due modi. Possono essere creati da zero o presi da un’immagine esistente da convertire. Cominciamo con il metodo manuale.

1. Creare un file SVG manualmente

I file SVG sono di solito creati senza la necessità di digitare le informazioni vettoriali, come abbiamo fatto prima. Questo era solo un esempio. Invece, gli SVG possono essere creati usando qualsiasi programma di design. Il file viene salvato come SVG. Gli SVG sono supportati da molti strumenti moderni di progettazione grafica. Queste sono alcune delle opzioni principali:

• Adobe Illustrator, Photoshop e InDesign
• Microsoft Visio
• Inkscape
• GIMP

Queste due soluzioni open-source sono le ultime due in questa lista. Sono un ottimo modo per provare la creazione di SVG senza dover pagare un software premium. Possono anche essere tutto ciò di cui avete bisogno.

Può essere difficile creare loghi e altri elementi per il tuo sito web se non hai esperienza nella progettazione grafica. Puoi usare immagini esistenti per convertirle in SVG.

2. Convertire immagini esistenti in SVG

È possibile convertire immagini da diversi formati a SVG con molti programmi gratuiti. La maggior parte dei software menzionati nella sezione precedente ti permette di aprire le immagini e salvarle come SVG.

Sono disponibili anche strumenti di conversione online se non vuoi scaricare alcun software. Ci sono molti servizi che puoi usare. Un esempio è Vector Magic, che puoi usare per convertire tutti i tipi di file in SVG:

Questo strumento è ottimo perché ti dà un’anteprima prima di scaricare effettivamente il file SVG. Un editor integrato ti permette di fare piccole modifiche prima di scaricare il file.

Questa è solo un’opzione. Convertio e Img2Go sono altri servizi di conversione da PNG e JPG a SVG. Per trovare la soluzione migliore per voi, è importante fare delle ricerche.

Abbiamo scoperto che la maggior parte dei convertitori SVG produce risultati simili. Le immagini che scegliete sono importanti quanto il convertitore che usate per ottenere i migliori risultati.

È meglio usare SVG per immagini semplici, cioè immagini con linee chiare e bordi definiti. Probabilmente ti ritroverai con un file SVG grande e difficile da modificare o animare, a seconda di quanto sia complessa la tua immagine.

Come utilizzare un file SVG (dentro e fuori WordPress)

Gli SVG possono essere utilizzati facilmente. È facile aggiungere un file SVG sul tuo sito web copiando il suo codice e incollandolo in un documento HTML dove vuoi l’immagine.

Se tu e i visitatori del tuo sito usate browser che supportano i file SVG (e la maggior parte lo fa di questi tempi), saranno in grado di vedere l’elemento. Poiché gli SVG possono essere animati usando i CSS, è più difficile.

Tuttavia, gli utenti di WordPress sperimenteranno un cambiamento nel processo. Gli SVG non sono supportati dal Content Management System (CMS). Se vuoi abilitare il supporto SVG in modo da poter caricare i file direttamente nel tuo sito web, vorrai usare un plugin come Safe SVG.

E’ anche possibile abilitare il supporto SVG in WordPress manualmente, ma il processo è molto più complesso. In questi casi, un plugin è più sicuro.

Conclusione

È più facile di quanto pensiate adattare il vostro sito web per i file SVG. Non è facile creare SVG o scegliere le immagini giuste da convertire. Ci sono molti strumenti che possono essere utilizzati per realizzare entrambe le cose.