File SVG.

Ecco cosa imparerai.

• Cos’è un file SVG?
  
• Storia del file SVG
  
• A cosa servono i file SVG?
  
• Pro e contro dei file SVG
  
• Come aprire un file SVG
  
• Come creare e modificare un file SVG
  
• Domande frequenti sui file SVG

Cos’è un file SVG?

Lo Scalable Vector Graphics (SVG) è un formato di file vettoriale compatibile con il web. A differenza dei file raster basati su pixel come i JPEG, i file vettoriali memorizzano le immagini tramite formule matematiche basate su punti e linee su una griglia. Ciò significa che i file vettoriali come gli SVG possono essere ridimensionati in modo significativo senza perdere qualità, caratteristica che li rende ideali per loghi e grafica online complessa. 

Gli SVG sono estremamente popolari tra i web designer non solo per le loro capacità di ridimensionamento. Questi file sono scritti in codice XML, quindi memorizzano le informazioni di testo come caratteri alfabetici e non come forme. Ciò consente ai motori di ricerca come Google di leggere la grafica SVG per le parole chiave, migliorando gli indici di popolarità di un sito web.

Puoi riconoscere facilmente un file SVG dalla sua estensione .svg.

Storia del file SVG.

La storia del file SVG risale alla fine degli anni ‘90, quando il World Wide Web Consortium (W3C) invitò gli sviluppatori a proporre un nuovo tipo di formato grafico vettoriale. Furono presentate sei proposte concorrenti che contribuirono a creare quello che alla fine è diventato il formato SVG del W3C.  

Ci è voluto del tempo perché gli SVG trovassero ampia diffusione. Non hanno incontrato grande supporto fino al 2017, quando le persone hanno iniziato a constatare i vantaggi del loro utilizzo nei moderni browser web. I file SVG ora sono ampiamente utilizzati per le immagini 2D dei siti web, perché la maggior parte dei browser e delle app di disegno per file vettoriali riesce a gestirli senza problemi.

A cosa servono i file SVG?

I file SVG hanno fatto molta strada negli ultimi anni, ma a cosa servono in pratica?

Loghi e icone di siti web.

I designer utilizzano spesso gli SVG per visualizzare loghi aziendali e icone di siti web, ad esempio i pulsanti. Questo tipo di file ha la capacità di ingrandire o rimpicciolire le immagini senza mai comprometterne la qualità, il che lo rende ideale per contenuti grafici che devono essere visualizzati in più posizioni e in diverse dimensioni.

Infografiche e illustrazioni.

Grazie all’uso di XML all’interno dei file SVG, i motori di ricerca come Google possono leggere grafici e diagrammi che contengono molti elementi testuali, contribuendo a migliorarne gli indici di popolarità. Dato che Google è in grado di rilevare le parole chiave negli SVG, può far salire una pagina web più in alto nei risultati di ricerca. Inoltre, per rendere le pagine web molto più interessanti, gli SVG supportano anche l’animazione.

Scopri altri file vettoriali

Pro e contro dei file SVG.

Vale la pena analizzare i vantaggi e gli svantaggi degli SVG prima di salvare le immagini in questo formato.

Vantaggi dei file SVG.

• A differenza dei file raster, che sono costituiti da pixel, le grafiche vettoriali come gli SVG mantengono sempre la risoluzione, indipendentemente da quanto vengono ingrandite o rimpicciolite. Non devi preoccuparti che le immagini SVG perdano qualità in determinati browser o quando le ridimensioni per visualizzarle in punti diversi.
  
• I file SVG di base spesso sono più piccoli delle immagini raster, che sono costituite da molti pixel colorati e non utilizzano algoritmi matematici.
  
• I file SVG trattano il testo come tale (e non come disegno), quindi gli screen reader possono eseguire la scansione di qualunque parola contenuta nelle immagini SVG. Questo è molto utile per le persone che necessitano di aiuto per leggere le pagine web. I motori di ricerca possono anche leggere e indicizzare il testo delle immagini SVG.

Svantaggi dei file SVG.

• I file SVG sono ottimi per grafiche web come loghi, illustrazioni e grafici, ma l’assenza di pixel rende difficile la visualizzazione di foto digitali di alta qualità. I file JPEG in genere sono più indicati per le fotografie dettagliate.
  
• Solo i browser moderni supportano le immagini SVG. Potrebbe essere problematico utilizzare i file SVG con Internet Explorer 8 e altri browser meno recenti.
  
• Il codice contenuto nelle immagini SVG può risultare di difficile comprensione per chi non conosce il formato. 

Come aprire un file SVG.

Da Chrome a Edge, Safari e Firefox, oggi tutti i principali browser consentono di aprire i file SVG, sia su Mac che su Windows. Ti basterà avviare il browser e fare clic su File > Apri per scegliere il file desiderato, che verrà quindi visualizzato nel browser.

Aprire un’immagine SVG con un programma integrato sul computer è altrettanto facile. Fai doppio clic sul nome del file per visualizzare un elenco di programmi in grado di aprirlo o per lanciarlo automaticamente con un programma compatibile.

Come creare e modificare un file SVG.

Segui questi passaggi in Adobe Photoshop:

1. Dopo aver creato un’immagine in Photoshop, fai clic su File > Esporta > Esporta come.
   
2. Fai clic sul menu a discesa Formato all’interno della finestra di dialogo, quindi seleziona SVG.
   
3. Seleziona Esporta tutto e salva il file. 

Nota: poiché Photoshop è un editor di grafica raster, molti preferiscono creare e modificare file SVG in Adobe Illustrator, un editor di grafica vettoriale.

Domande frequenti sui file SVG.

I file SVG supportano l’animazione?

Il formato di file SVG non è solo per immagini statiche. È disponibile un’ampia gamma di strumenti online utili che consentono di introdurre elementi in movimento nella grafica web. Le animazioni SVG possono includere elementi relativamente semplici, come una funzione di scorrimento per spostarsi tra le diverse slide di un’infografica. Anche le illustrazioni possono anche essere animate, ad esempio facendo muovere le lancette sul quadrante di un orologio.

Come posso riconoscere un file SVG?

Il modo più semplice per riconoscere un file SVG è controllare il codice di estensione, che per questo formato è .svg. Per individuare i file vettoriali come gli SVG, puoi anche provare a ingrandire le immagini fino al 200% o più sullo schermo del computer. Un’immagine vettoriale manterrà le sue linee pulite e i colori uniformi invece di diventare pixelata o sfocata.

I file SVG possono essere utilizzati solo su Internet?

Le immagini SVG sono utilizzate principalmente sul web, ma hanno anche altri impieghi oltre il mondo online. Ad esempio, dato che non subiscono distorsioni quando vengono ridimensionati, i file SVG sono utili come modelli per la stampa su capi di abbigliamento come felpe e magliette. Un file JPEG creato da molti pixel non verrebbe decalcato in modo così pulito.

Quanto sono grandi i file SVG?

La dimensione di un SVG dipende dalla quantità di dati immagine che contiene, ma di solito è inferiore alla maggior parte degli altri tipi di file. Le grafiche complesse con molti tracciati e punti di ancoraggio occuperanno più spazio di archiviazione rispetto a progetti più semplici e puliti. Cerca di ridurre al minimo il numero di istruzioni complesse contenute nel file.

Qual è la differenza tra i file SVG e PNG?

In poche parole, gli SVG sono file vettoriali mentre i PNG sono file raster. Se allunghi o comprimi troppo un file PNG, diventerà sfocato e pixelato. Gli SVG non contengono pixel, quindi non perderanno mai risoluzione. Inoltre, i PNG non supportano l’animazione.