Come utilizzare le immagini SVG nel web design

Menu

SVG è il futuro

Torna alle news
06/02/2015
Web design, Web, Grafica

Con l'aumento dei diversi dispositivi utilizzati per navigare sui siti web, sta diventando sempre più importante utilizzare buone pratiche di design per consentire al numero massimo di utenti possibile di visualizzare un sito web e per fornire un buon livello di user experience.
Ed ecco perché entrano in gioco le immagini SVG.

Che cos’è un ‘immagine SVG?
L’ SVG (Scalable Vector Graphics), come suggerisce il nome, è un formato di file immagine basato sul codice XML, creato e modificato con software come Adobe Illustrator o CorelDRAW, anche se, essendo un formato basato su XML, può essere modificato con un semplice editor di testo.
 

I vantaggi di utilizzare SVG

1. SVG offre un enorme vantaggio rispetto all'utilizzo di altri formati di file immagine come jpeg, png o bmp, ed è più appropriato per i responsive website. Questo perché formati jpeg, png e bmp sono formati di grafica raster. In breve, questi formati di file immagine non sono adatti per i loghi o le icone.

2. SVG crea file di dimensioni più piccole: dal punto di vista delle prestazioni, un SVG è spesso un file di dimensioni molto più piccole rispetto ai tradizionali formati bitmap grafici come JPEG e PNG.
Questo comporta una maggior velocità di caricamento della pagina web.

3. Un'immagine adatta a tutti: più versioni e dimensioni di un'immagine non sono necessari. Ne è sufficiente una sola e questo è incredibilmente utile per il web responsive design, perché l'immagine può essere ridimensionata automaticamente senza perdere definizione e impatto. La possibilità di ridimensionare l'SVG significa che qualsiasi immagine apparirà nitida al variare della risoluzione.

immagini svg versus png
 

Gli inconvenienti

Nonostante tutti i lati positivi, SVG non è, purtroppo, una soluzione perfetta. Uno dei maggiori problemi è che non si può manipolare il vostro SVG con CSS a meno che il codice XML venga inserito direttamente nel DOM HTML, che è ben lungi dall'essere l'ideale.
L'altro problema è che hai bisogno di includere un file in png o jpg per soddisfare le esigenze di coloro che utilizzano ancora versioni come Internet Explorer 8.
 

Conclusione

Non solo il file SVG è migliore per il ridimensionamento e lo zoom dell’immagine, ma anche per mantenere la dimensione del file minore rispetto ai formati di grafica raster, che rallentano i tempi di caricamento.

SVG è il futuro, e con un tale ampio spettro di browser che lo supportano, non c'è motivo per non iniziare ad utilizzarlo già da oggi.

browser che supportano SVG

Metti un like

Vuoi saperne di più? Contattaci subito!

Privacy Policy
Ho letto e autorizzo il trattamento dei miei dati personali.


Invia

Non perderti le nostre news

Privacy Policy
Ho letto e autorizzo l'invio della newsletter.