Els avantatges d'utilitzar gràfics vectorials escalables
Els gràfics vectorials escalables, o SVG, tenen un paper important en el disseny del lloc web avui mateix. Si actualment no esteu utilitzant SVG en el vostre treball de disseny web, aquí teniu alguns motius pels quals haureu de començar a fer-ho, així com també les fallbacks que podeu utilitzar per a navegadors antics que no admetin aquests fitxers.
Resolució
El major benefici de SVG és la independència de la resolució. Com que els fitxers SVG són gràfics vectorials en lloc de imatges ràster basades en píxels, es poden canviar de mida sense perdre cap qualitat d'imatge. Això és especialment útil quan creeu llocs web responsables que necessiten tenir un bon aspecte i funcionar bé en una àmplia gamma de mides i dispositius de pantalla .
Els fitxers SVG es poden ampliar o reduir per adaptar-los a les necessitats canviants de mida i disseny del vostre lloc web sensible i no cal que us preocupeu perquè els gràfics tinguin una qualitat compromesa en qualsevol pas del camí.
Mida de l'arxiu
Un dels reptes amb l'ús d'imatges ràster (JPG, PNG, GIF) en els llocs web responsables és la mida del fitxer d'aquestes imatges. Atès que les imatges ràster no escalen la forma en què fan els vectors, haureu d'entregar les imatges basades en píxels a la mida més gran a la qual es mostraran. Això és perquè sempre podeu fer una imatge més petita i conservar la seva qualitat, però el mateix no és cert per fer que les imatges siguin més grans. El resultat final és que sovint tens imatges que són molt més grans del que es mostren a la pantalla d'una persona, el que significa que no es necessiten baixar un fitxer molt gran.
SVG aborda aquest repte. Com que els gràfics vectorials són escalables, podeu tenir mides de fitxers molt petites, independentment de la mida de les imatges que calgui mostrar. Això tindrà un impacte positiu en el rendiment general i la velocitat de descàrrega d'un lloc.
Estilisme CSS
El codi SVG també es pot afegir 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, atès que els gràfics són realment dibuixats pel navegador en funció del codi, no cal fer una sol·licitud HTTP per obtenir un fitxer d'imatge. Un altre avantatge és que l'SVG en línia es pot dissenyar amb CSS.
Necessiteu canviar el color d'una icona SVG? En lloc de necessitar obrir aquesta imatge en algun tipus de programari d'edició i exportar i pujar de nou el fitxer, simplement podeu canviar el fitxer SVG amb algunes línies de CSS.
També podeu utilitzar altres estils CSS en gràfics SVG per canviar-los en els estats que es desplacen o per a certes necessitats de disseny. Fins i tot podeu animar aquests gràfics per afegir-hi algun moviment i interactivitat a una pàgina.
Animacions
Atès que els fitxers SVG en línia es poden dissenyar amb CSS, també podeu fer servir animacions CSS. Les transformacions CSS i les transicions són dues maneres senzilles d'afegir una mica de vida als fitxers SVG. Podeu obtenir experiències ricas en Flash en una pàgina sense sucumbir a les desavantatges que ve amb l'ús de Flash als llocs web d'avui.
Usos de SVG
Tan potent com SVG, aquests gràfics no poden substituir qualsevol altre format d'imatge que feu servir al vostre lloc web. Les fotografies que requereixen profunditat de color profund encara hauran de ser un fitxer JPG o potser un PNG, però les imatges senzilles com les icones són perfectament adequades per executar-se com a SVG.
SVG també pot ser apropiat per a il·lustracions més complexes, com ara logotips d'empresa o gràfics i gràfics. Tots els gràfics es beneficiaran de ser escalables, capaços de ser dissenyats amb CSS i els altres avantatges que es detallen en aquest article.
Suport per a navegadors antics
El suport actual per SVG és molt bo en navegadors web moderns. Els únics navegadors que realment no tenen suport per a aquests gràfics són versions anteriors d'Internet Explorer (versió 8 i versions posteriors) i algunes versions anteriors d'Android. Tot plegat, un percentatge molt reduït de la població de navegació segueix utilitzant aquests navegadors, i aquest nombre continua disminuint. Això significa que SVG es pot utilitzar de forma segura als llocs web d'avui.
Si voleu proporcionar una alternativa per a SVG, podeu utilitzar una eina com Grumpicon des del Filament Group. Aquest recurs farà que els vostres fitxers d'imatge SVG creïn fallbacks PNG per navegadors antics.
Editat per Jeremy Girard el 27/01/17