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.

I file SVG sono molto popolari nel mondo della progettazione web 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ò permette ai motori di ricerca, come Google, di leggere la grafica SVG per individuarne le parole chiave, contribuendo potenzialmente a migliorare il posizionamento di un sito nei risultati di ricerca.

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

Storia del file SVG.

Il formato di file SVG fu proposto per la prima volta nel 1994 dall’ingegnere informatico olandese Martijn Koster.

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

I file SVG hanno guadagnato popolarità solo con il tempo. 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.

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 contesti diversi.
• I file SVG di base spesso sono più piccoli delle immagini raster, che sono costituite da molti pixel colorati anziché utilizzare 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.
• Grazie al supporto dell’interattività attraverso linguaggi di scripting come JavaScript, il formato SVG consente di realizzare grafiche dinamiche e coinvolgenti.
• SVG è un linguaggio XML, perciò consente una facile manipolazione e integrazione con altre tecnologie web.

Svantaggi dei file SVG

• I file SVG sono ottimi per le 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 ed Edge a Safari e Firefox, oggi tutti i principali browser consentono di aprire i file SVG, sia su Mac che su Windows. Avvia il browser e fai clic su File.

Posizionati sul file desiderato e fai clic su Apri per visualizzarlo nel browser.

Aprire un’immagine SVG con un programma integrato sul computer è altrettanto facile. Facendo doppio clic sul nome del file verrà visualizzato un elenco di programmi in grado di aprirlo, oppure si aprirà in automatico 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, molte persone preferiscono creare e modificare file SVG in Adobe Illustrator, un editor di grafica vettoriale.

Come creare un file SVG in Illustrator

Segui questi passaggi in Adobe Illustrator:

1. Dopo aver realizzato una composizione in Illustrator, seleziona il testo per creare i contorni. Questo accorgimento previene eventuali problemi di sostituzione del font quando la composizione viene visualizzata su altri computer. Seleziona Testo - Crea contorno.
2. Salva il file con i comandi File > Salva con nome. Fai clic sul menu a discesa Formato all’interno della finestra di dialogo, quindi seleziona SVG.
3. Puoi anche esportare il file SVG modificato: usa il comando File > Esporta > Esporta come e seleziona SVG come formato. In questo modo puoi regolare le impostazioni di esportazione, come la precisione e la compatibilità.

Come modificare un file SVG in Illustrator

1. Seleziona il file SVG da aprire in Illustrator. In alternativa, puoi importare il file SVG nel documento Illustrator esistente con il comando File > Posiziona.
2. Usa lo Strumento Selezione (o Strumento Selezione diretta) per selezionare singoli tracciati, forme o gruppi all’interno del file SVG. Puoi ridimensionare, modellare, trasformare o modificare i tracciati, aggiungere colori ed effetti.