Mentre crei un sito Web e aggiungi immagini a quel sito, uno se le cose più importanti da determinare sono quali formati di file sono quelli corretti da utilizzare. A seconda del grafico, un formato può essere molto migliore di altri.
Molti web designer si trovano a proprio agio con il formato file JPG e questo formato è perfetto per immagini con profondità di colore profonde, come le fotografie. Sebbene questo formato possa funzionare anche per una grafica semplice, come le icone illustrate, non è il formato migliore da utilizzare in quell'istanza. Per quelle icone, SVG sarebbe una scelta migliore. Diamo un'occhiata esattamente al motivo:
SVG è tecnologia vettoriale
Ciò significa che non è una tecnologia raster. Le immagini vettoriali sono una combinazione di linee create usando la matematica. I file raster utilizzano pixel o piccoli quadrati di colore. Questo è uno dei motivi per cui SVG è scalabile e perfetto per i siti Web reattivi che devono essere adattati alle dimensioni dello schermo di un dispositivo. Poiché la grafica vettoriale esiste nel mondo della matematica, per cambiare le dimensioni, è sufficiente modificare i numeri. I file raster richiedono spesso una revisione significativa quando si tratta di ridimensionare. Quando si desidera ingrandire un'immagine vettoriale, non c'è distorsione perché il sistema è matematico e il browser ricalcola la matematica e rende le linee più agevoli che mai. Quando si ingrandisce un'immagine raster, si perde la qualità dell'immagine e il file inizia a diventare sfocato mentre si iniziano a vedere quei pixel di colore. La matematica si espande e si contrae, i pixel no. Se vuoi che le tue immagini siano indipendenti dalla risoluzione, SVG ti darà quell'abilità.
SVG è basato sul testo
Quando si utilizza un editor di grafica per produrre un'immagine, il programma scatta una foto della grafica completata. SVG funziona diversamente. Puoi ancora usare alcuni programmi software e sentirti come se stessi disegnando un'immagine, ma il prodotto finale è una raccolta di linee vettoriali o anche di parole (che sono in realtà solo vettori sulla pagina). I motori di ricerca guardano le parole, in particolare le parole chiave. Se carichi un JPG, ti stai limitando al titolo della tua immagine e forse alla frase del testo alternativo. Con la codifica SVG, puoi ampliare le possibilità e creare immagini più favorevoli ai motori di ricerca.
SVG è XML e funziona in altri formati di lingua
Questo torna al codice basato sul testo. Puoi creare la tua immagine di base in SVG e usare CSS per lucidarla. Sì, puoi avere un'immagine che è in realtà un file SVG, ma puoi anche codificare l'SVG direttamente nella pagina e modificarlo in futuro. Puoi modificarlo con i CSS allo stesso modo in cui cambieresti il testo della pagina, ecc. Questo è molto potente e facilita la modifica.
SVG è facilmente editabile
Questo è probabilmente il più grande vantaggio. Quando fai una foto di un quadrato, è quello che è. Per apportare una modifica, è necessario ripristinare la scena e scattare una nuova foto. Prima che tu lo sai, hai 40 immagini di quadrati e ancora non ce l'hai proprio bene. Con SVG, se commetti un errore, modifica le coordinate o una parola in un editor di testo e il gioco è fatto. Posso identificarlo perché ho disegnato un cerchio SVG che non era posizionato correttamente. Tutto quello che dovevo fare era regolare le coordinate.
Le immagini JPG possono essere pesanti
Se vuoi che la tua immagine cresca in dimensioni fisiche, crescerà anche nelle dimensioni del file. Con SVG, una sterlina è ancora una sterlina, non importa quanto tu la faccia. Un quadrato largo 2 pollici avrà lo stesso peso di un quadrato largo 100 pollici. La dimensione del file non cambia, il che è eccellente dal punto di vista delle prestazioni della pagina!
Quindi quale è meglio?
Allora, qual è un formato migliore - SVG o JPG? Dipende dall'immagine stessa. È come chiedere "cosa è meglio, un martello o un cacciavite?" Dipende da ciò che devi realizzare! Lo stesso vale per questi formati di immagini. Se devi visualizzare una foto, JPG è la scelta migliore per te. Se si aggiunge un'icona, SVG è probabilmente una scelta migliore. Puoi saperne di più su quando è appropriato usare i file SVG qui.
Articolo originale di Jennifer Krynin. Modificato da Jeremy Girard il 6/6/17
