Che cos'è un file SVG (e come lo usi)?

Una grafica vettoriale scalabile (SVG) è un tipo unico di formato immagine. A differenza di altre varietà, gli SVG non si basano su pixel unici per creare le immagini che vedi. Invece, usano dati "vettoriali".

Usando gli SVG, ottieni immagini che possono scalare fino a qualsiasi risoluzione, il che è utile per il web design tra molti altri casi d'uso. In questo articolo, faremo la domanda: che cos'è un file SVG? Ti insegneremo quindi come utilizzare il formato.

Arriviamo ad esso!

Iscriviti al nostro canale Youtube

Che cos'è un file SVG?

Gli SVG sono grafici creati utilizzando vettori. Per chi non lo sapesse, un vettore è un elemento con una grandezza e una direzione specifiche. In teoria, puoi generare quasi tutti i tipi di grafica che desideri utilizzando una raccolta di vettori. Prendi questa immagine di un rettangolo blu con un bordo nero e un'ombra, ad esempio:

Questo è un altro tipo di file immagine chiamato Portable Network Graphic (PNG), utilizzato per illustrazioni e disegni. Se volessi replicare qualcosa di simile usando la grafica vettoriale, dovresti generarlo con il codice XML (lo stesso trovato in uso per le sitemap). Il seguente codice potrebbe ottenere lo stesso risultato:

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" version="1.1"
baseProfile="full" > <rect x="0" y="0" width="60" height="60" style="stroke: blue;"/>
<rect id="myRect" x="25" y="25" rx="0.6" ry="0.6" width="150" height="150" fill="blue"
stroke="black" stroke-width="8"/>
</svg>

In teoria, se prendi questo codice e lo inserisci in un file HTML, vedrai un insieme di rettangoli simile al PNG, purché il browser che utilizzi supporti i file SVG. Sebbene entrambe le immagini abbiano lo stesso aspetto, i file SVG offrono tutta una serie di vantaggi che altri formati non offrono. Ad esempio, gli SVG sono in grado di mantenere la qualità dell'immagine mentre aumentano o diminuiscono.

Se continui a ingrandire il rettangolo PNG, noterai che la sua qualità inizia a diminuire a un certo punto. Con una grafica basata su pixel più complessa, il degrado diventa evidente molto più velocemente. Tuttavia, gli SVG hanno un bell'aspetto praticamente con qualsiasi risoluzione.

Perché utilizzare un file SVG?

Molti siti Web utilizzano formati come PNG e JPEG quasi in modo intercambiabile. Tuttavia, gli SVG non sono altrettanto versatili. Se provi a ricreare una fotografia complessa utilizzando i vettori, di solito ti ritroverai con file SVG enormi e inutilizzabili.

Tuttavia, il formato SVG è un'opzione fantastica per tutta una serie di altri scenari:

• Design del logo. Poiché probabilmente riutilizzerai i loghi su siti Web e social media, l'utilizzo di SVG risolve eventuali problemi di scalabilità.
• Diagrammi. Gli SVG sono un abbinamento perfetto per i diagrammi e qualsiasi altro tipo di illustrazione che si basa su linee semplici.
• Elementi animati. Puoi utilizzare i CSS per animare gli SVG, il che li rende un componente utile nella progettazione di siti Web, in particolare per le microinterazioni.
• Grafici e grafici. Puoi utilizzare SVG per creare grafici e diagrammi scalabili che supportano le animazioni.

Poiché gli SVG utilizzano il formato XML, questo li rende anche ricercabili e indicizzabili. I lettori dello schermo possono interpretare i file SVG purché si utilizzino i tag di accessibilità corretti.

Infine, i file SVG tendono ad essere molto più piccoli degli equivalenti ad alta risoluzione in altri formati. Sulla carta, ciò significa che potresti essere in grado di ridurre alcune delle dimensioni della pagina e ridurre i tempi di caricamento. Tuttavia, a meno che tu non abbia intenzione di convertire la maggior parte delle tue immagini in SVG, l'aumento delle prestazioni sarà probabilmente minimo.

Come creare un file SVG (2 modi)

Ci sono due approcci che puoi adottare quando si tratta di file SVG. Puoi crearli da zero o prendere un'immagine esistente e convertirla. Cominciamo con il metodo manuale.

1. Crea manualmente un file SVG

La creazione di un file SVG di solito non implica la digitazione di informazioni vettoriali come abbiamo fatto in precedenza. Quello era solo un esempio per mostrare il concetto. Invece, crei SVG come qualsiasi altra grafica, utilizzando un programma di progettazione e salvando il file come SVG. Molti moderni strumenti di progettazione grafica supportano SVG immediatamente. Alcune opzioni principali includono:

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

Le ultime due opzioni in questo elenco sono soluzioni open source. Questo li rende un'ottima opzione per sperimentare la creazione di SVG senza pagare per software premium. In effetti, potrebbero essere tutto ciò di cui hai bisogno.

Se non hai alcuna esperienza con la progettazione grafica, creare i tuoi loghi o altri elementi per il tuo sito web sarà una sfida. In questo caso, la soluzione migliore sarà prendere immagini esistenti e convertirle in SVG.

2. Converti immagini esistenti in SVG

Esistono molti strumenti gratuiti che puoi utilizzare per convertire immagini da altri formati in SVG. La maggior parte del software che abbiamo menzionato nell'ultima sezione ti consente di aprire le tue immagini e salvarle come file SVG.

Se non vuoi scaricare alcun software, puoi anche utilizzare strumenti di conversione online e ci sono molti servizi a cui puoi rivolgerti. Un esempio è Vector Magic, che puoi usare per convertire tutti i tipi di file in SVG:

Ci piace questo particolare strumento perché ti mostra un'anteprima del tuo file SVG prima di scaricarlo. Puoi anche utilizzare un editor integrato per apportare piccole modifiche e correzioni prima di scaricare il file:

Naturalmente, questa è solo un'opzione. Altri servizi di conversione da PNG e JPG a SVG includono Convertio e Img2Go. Ti consigliamo di fare qualche ricerca per trovare la soluzione più adatta alle tue esigenze.

Nella nostra esperienza, la maggior parte dei convertitori SVG offre risultati di qualità simile. Per i migliori risultati possibili, il convertitore che usi non è importante quanto le immagini che selezioni.

Come regola generale, ha senso utilizzare il formato SVG solo per immagini "semplici", ovvero immagini con bordi definiti e linee pulite. Più l'immagine è complessa, più è probabile che ti ritroverai con un enorme file SVG che è un lavoro ingrato da modificare manualmente o animare.

Come utilizzare un file SVG (dentro e fuori WordPress)

Gli SVG non sono poi così difficili da usare. Aggiungere un file SVG al tuo sito web è facile come prendere il suo codice e incollarlo all'interno di un documento HTML dove vuoi che l'immagine vada.

Se tu e i visitatori del tuo sito utilizzate browser che supportano i file SVG (e la maggior parte lo fa in questi giorni), saranno in grado di vedere l'elemento. L'animazione di SVG è, ovviamente, più complicata poiché richiede l'uso di CSS.

Tuttavia, il processo cambia se utilizzi WordPress. Il Content Management System (CMS) non supporta gli SVG pronti all'uso. Se desideri abilitare il supporto SVG in modo da poter caricare i file direttamente nel tuo sito web, ti consigliamo di utilizzare un plug-in come Safe SVG:

È anche possibile abilitare manualmente il supporto SVG in WordPress, ma il processo è molto più complicato. In questo caso, l'utilizzo di un plug-in è l'opzione più sicura.

Conclusione

Adattare il tuo sito Web per utilizzare i file SVG è molto più semplice di quanto tu possa immaginare. La vera sfida consiste nel progettare SVG da zero o nella scelta delle immagini giuste da convertire nel formato. Fortunatamente, ci sono molti strumenti che puoi usare per fare entrambe le cose.

Alcune ottime opzioni includono Adobe Illustrator, InDesign e GIMP. Usando questi strumenti, puoi creare e convertire immagini esistenti in SVG. Se stai utilizzando WordPress, puoi caricare quegli SVG utilizzando il plug-in Safe SVG, quindi divertirti ad animarli.

Hai domande su come utilizzare i file SVG? Parliamo di loro nella sezione commenti qui sotto!

Miniatura dell'immagine dell'articolo di VettoriMarket / shutterstock.com