Els gràfics vectorials escalables, o SVG, tenen un paper important en el disseny de llocs web actuals. Si actualment no utilitzeu SVG al vostre treball de disseny web, aquí teniu alguns motius pels quals hauríeu de començar a fer-ho, així com alternatives que podeu utilitzar per a navegadors antics que no admeten aquests fitxers.
Resolució
El major benefici d'SVG és la independència de la resolució. Com que els fitxers SVG són gràfics vectorials (a diferència de les imatges ràster basades en píxels), podeu canviar-ne la mida sense perdre la qualitat de la imatge. Això és especialment útil quan creeu llocs web responsius que han de tenir un bon aspecte i funcionar bé en una àmplia gamma de mides de pantalla i dispositius. Podeu augmentar o reduir els fitxers SVG per adaptar-vos a les necessitats de mida i disseny canviants del vostre lloc web responsiu sense comprometre la seva qualitat de cap manera.
En general, els SVG tenen un aspecte més suau i nítid que les imatges d' altres formats, independentment de la mida.
Mida del fitxer
Un repte amb l'ús d'imatges ràster (p. ex., JPG, PNG, GIF) en llocs web responsius és la mida del fitxer. Com que les imatges ràster no s'escalen com ho fan les imatges vectorials, heu de lliurar les vostres imatges basades en píxels amb la mida més gran a la qual es mostraran. Això es deu al fet que sempre podeu fer una imatge més petita i conservar la seva qualitat, però no passa el mateix per fer imatges més grans. El resultat són imatges molt més grans que la mida en què es veuen, cosa que obliga els navegadors a baixar fitxers grans.
En canvi, els gràfics vectorials són escalables, de manera que podeu utilitzar fitxers de mides molt petites, independentment de la mida que s'hagin de mostrar aquestes imatges. Això en última instància optimitza el rendiment general i la velocitat de descàrrega d'un lloc.
Estil CSS
Podeu afegir fàcilment SVG directament a l'HTML d'una pàgina. Això es coneix com a SVG en línia. Un dels avantatges d'utilitzar SVG en línia és que, com que els gràfics són realment dibuixats pel navegador, no cal que hi hagi una sol·licitud HTTP per obtenir un fitxer d'imatge.
Un altre avantatge: podeu estilitzar SVG en línia amb CSS. Necessites canviar el color d'una icona SVG? En lloc d'editar aquesta imatge al programari d'edició de gràfics i després exportar i carregar el fitxer de nou, podeu canviar el fitxer SVG simplement amb unes poques línies de CSS. També podeu utilitzar CSS per canviar els SVG per als estats de desplaçament del cursor i altres necessitats de disseny.
Conclusió
Com que podeu dissenyar fitxers SVG en línia amb CSS, també podeu utilitzar-hi animacions CSS. Les transformacions i transicions CSS són dues maneres senzilles d'afegir una mica de vida als SVG. Podeu obtenir experiències riques semblants a Flash en una pàgina sense utilitzar Flash, que l'iPad ja no admet. De fet, Adobe està eliminant progressivament Flash a finals del 2020.
Usos de SVG
Per poderosos que són els SVG, no poden substituir tots els altres formats d'imatge. Les fotos que requereixen una gran profunditat de color encara haurien d'estar en format-j.webp
SVG també és adequat per a algunes il·lustracions complexes, com ara gràfics, gràfics i logotips d'empreses. Tots aquests gràfics es beneficien perquè són escalables i es poden dissenyar amb CSS.
Compatibilitat per a navegadors antics
El suport actual per a SVG és molt bo als navegadors web moderns. Els únics navegadors que no tenen suport per a aquests gràfics són les versions antigues d'Internet Explorer (que Microsoft ja no admet) i algunes versions antigues d'Android. Amb tot, un percentatge molt reduït de la població de navegació encara utilitza aquests navegadors, i aquest nombre continua reduint-se. Això vol dir que podeu utilitzar SVG al vostre lloc web sense preocupacions.
Si voleu oferir una alternativa per a SVG, utilitzeu una eina com Grumpicon del Filament Group. Aquest recurs crea-p.webp
