Il formato di file SVG è uno strumento molto diffuso per la visualizzazione di grafica, diagrammi e illustrazioni bidimensionali sui siti web. Inoltre, essendo un file vettoriale, può essere ridimensionato senza perdere risoluzione. Vieni a conoscere le caratteristiche principali delle immagini SVG, valuta i pro e contro di questo formato e scopri come si è evoluto nel tempo.
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.
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.
I file SVG hanno fatto molta strada negli ultimi anni, ma a cosa servono in pratica?
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.
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.
Vale la pena analizzare i vantaggi e gli svantaggi degli SVG prima di salvare le immagini in questo formato.
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.
Segui questi passaggi in Adobe Photoshop:
Nota: poiché Photoshop è un editor di grafica raster, molti preferiscono creare e modificare file SVG in Adobe Illustrator, un editor di grafica vettoriale.
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.
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.
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.
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.
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.
Quale formato ha la meglio sul fronte del web design?
Scopri qual è il file più affidabile per la stampa.
Produci incredibili grafiche vettoriali e illustrazioni.
Gratis per 7 giorni, poi CHF 23.70/mese.
Sviluppa disegni e layout per la stampa e il publishing digitale.
Gratis per 7 giorni, poi CHF 23.70/mese.
Acquista l’intera raccolta di app creative e molto altro.
Gratis per 7 giorni, poi CHF 61.40/mese.