Scalable Vector Graphics, o SVG, gioca un ruolo importante nella progettazione di siti Web oggi. Se al momento non stai utilizzando SVG nel tuo lavoro di progettazione web, ecco alcuni motivi per cui dovresti iniziare a farlo, oltre ai fallback che puoi utilizzare per i browser meno recenti che non supportano questi file.
Risoluzione
Il più grande vantaggio di SVG è l'indipendenza dalla risoluzione. Poiché i file SVG sono grafica vettoriale (al contrario delle immagini raster basate su pixel), puoi ridimensionarli senza perdere la qualità dell'immagine. Ciò è particolarmente utile quando si creano siti Web reattivi che devono avere un bell'aspetto e funzionare bene su un'ampia gamma di dimensioni dello schermo e dispositivi. Puoi ridimensionare i file SVG verso l' alto o verso il basso per soddisfare le mutevoli esigenze di dimensioni e layout del tuo sito Web reattivo senza comprometterne in alcun modo la qualità.
In genere, gli SVG hanno un aspetto più uniforme e nitido rispetto alle immagini di altri formati, indipendentemente dalle dimensioni.
Dimensione file
Una sfida con l'utilizzo di immagini raster (ad es. JPG, PNG, GIF) su siti Web reattivi è la dimensione del file. Poiché le immagini raster non vengono ridimensionate come le immagini vettoriali, è necessario fornire le immagini basate sui pixel nella dimensione massima in cui verranno visualizzate. Questo perché puoi sempre rimpicciolire un'immagine e mantenerne la qualità, ma lo stesso non vale per ingrandire le immagini. Il risultato sono immagini molto più grandi delle dimensioni in cui vengono visualizzate, costringendo i browser a scaricare file di grandi dimensioni.
Al contrario, la grafica vettoriale è scalabile, quindi puoi utilizzare file di dimensioni molto ridotte indipendentemente dalla dimensione di visualizzazione di tali immagini. Questo in definitiva ottimizza le prestazioni complessive di un sito e la velocità di download.
Stile CSS
Puoi facilmente aggiungere SVG direttamente all'HTML di una pagina. Questo è noto come SVG in linea. Uno dei vantaggi dell'utilizzo di SVG inline è che, poiché la grafica è effettivamente disegnata dal browser, non è necessaria una richiesta HTTP per recuperare un file immagine.
Un altro vantaggio: puoi modellare SVG in linea con CSS. Hai bisogno di cambiare il colore di un'icona SVG? Invece di modificare quell'immagine nel software di editing grafico e quindi esportare e caricare nuovamente il file, puoi modificare il file SVG semplicemente con poche righe di CSS. Puoi utilizzare CSS per modificare gli SVG anche per gli stati al passaggio del mouse e altre esigenze di progettazione.
Linea inferiore
Poiché puoi modellare file SVG in linea con CSS, puoi anche usare animazioni CSS su di essi. Le trasformazioni e le transizioni CSS sono due semplici modi per aggiungere un po' di vita agli SVG. Puoi ottenere ricche esperienze simili a Flash su una pagina senza utilizzare Flash, che l'iPad non supporta più. In effetti, Adobe ritirerà gradualmente Flash entro la fine del 2020.
Usi di SVG
Per quanto potenti siano gli SVG, non possono sostituire tutti gli altri formati di immagine. Le foto che richiedono una ricca profondità di colore dovrebbero essere comunque in formato-j.webp
SVG è appropriato anche per alcune illustrazioni complesse, come grafici, diagrammi e loghi aziendali. Tutti questi elementi grafici traggono vantaggio dall'essere scalabili e in grado di essere stilizzati con CSS.
Supporto per browser meno recenti
L'attuale supporto per SVG è molto buono nei moderni browser web. Gli unici browser che non supportano questa grafica sono le vecchie versioni di Internet Explorer (che Microsoft non supporta più) e alcune vecchie versioni di Android. Tutto sommato, una percentuale molto piccola della popolazione che naviga ancora utilizza questi browser e quel numero continua a ridursi. Ciò significa che puoi utilizzare SVG sul tuo sito web senza preoccupazioni.
Se vuoi fornire un fallback per SVG, usa uno strumento come Grumpicon del Filament Group. Questa risorsa crea-p.webp
