Avantatges de SVG
A mesura que construeixi un lloc web i afegiu imatges a aquest lloc, un dels aspectes més importants que haureu de determinar és el format dels fitxers que són els correctes. Depenent del gràfic, un format pot ser molt millor que els altres.
Molts dissenyadors web són còmodes amb el format d'arxiu JPG, i aquest format és perfecte per a imatges que tenen una profunditat de color profunda, com ara fotografies. Tot i que aquest format també funcionaria per a gràfics simples, com les icones il·lustrades, no és el millor format per utilitzar-lo. Per a aquestes icones, SVG seria una millor opció. Expliquem exactament per què:
SVG és una tecnologia vectorial
Això vol dir que no és una tecnologia ràster. Les imatges vectorials són una combinació de línies creades amb matemàtiques. Els fitxers ràster usen píxels o petits quadrats de color. Aquesta és una de les raons que SVG és escalable i perfecte per als llocs web responsables que s'han d'escalar juntament amb la mida de la pantalla d'un dispositiu. Com que existeixen gràfics vectorials en el món de les matemàtiques, per canviar la mida, simplement canvieu els números. Els fitxers de trama sovint requereixen una revisió significativa quan es tracta de dimensionar. Quan vulgueu ampliar la imatge vectorial, no hi ha cap distorsió perquè el sistema és matemàtic i el navegador acaba de tornar a calcular aquesta matemàtica i fa que les línies siguin tan suaus com mai. Quan es fa zoom en una imatge ràster, es perd la qualitat d'imatge i el fitxer comença a ser borrós quan comença a veure aquests píxels de color. La matemàtica s'amplia i contreu, els píxels no. Si voleu que les vostres imatges siguin independents de la resolució, SVG us donarà aquesta habilitat.
SVG està basat en text
Quan utilitzeu un editor de gràfics per produir una imatge, el programa fa una foto de la vostra obra completa. SVG funciona de manera diferent. Tot i així, podeu utilitzar alguns programes i sentir que està dibuixant una imatge, però el producte final és una col · lecció de línies vectorials o fins i tot paraules (que realment són només vectors a la pàgina). Els motors de cerca observen paraules, específicament paraules clau. Si carregueu un JPG , esteu limitant-vos al títol del vostre gràfic i potser a la frase de text alt . Amb la codificació SVG, ampliarà les possibilitats i crearà imatges que siguin més compatibles amb el motor de cerca.
SVG és XML i funciona en altres formats d'idioma
Això es torna al codi basat en text. Podeu fer la vostra imatge base a SVG i fer servir CSS per polir-la. Sí, podeu tenir una imatge que en realitat és un fitxer SVG, però també podeu codificar el SVG directament a la pàgina i editar-lo en el futur. Podeu modificar-lo amb CSS de la mateixa manera que alteraria el text de la pàgina, etc. Això és molt potent i facilita l'edició.
SVG és fàcilment editat
Probablement aquest sigui el major avantatge. Quan feu una foto d'un quadrat, és el que és. Per realitzar un canvi, heu de restablir l'escena i fer una nova imatge. Abans de conèixer-lo, teniu 40 imatges de quadrats i encara no teniu prou bé. Amb SVG, si cometeu un error, canvieu les coordenades o una paraula en un editor de text i ja heu acabat. Em refereixo a això perquè dibuixava un cercle SVG que no estava posicionat correctament. Tot el que havia de fer era ajustar les coordenades.
Les imatges JPG poden ser molt pesades
Si voleu que la vostra imatge creixi en mida física, també creixerà en mida de fitxer. Amb SVG, una lliura és encara una lliura, no importa el gran que ho faci. Un quadrat de 2 polzades d'ample pesarà el mateix que un quadrat de 100 polzades d'ample. La mida del fitxer no canvia, que és excel·lent des del punt de vista del rendiment de la pàgina.
Quin és millor?
Quin és el format millor - SVG o JPG? Això depèn de la imatge mateixa. Això és com preguntar "què és millor, un martell o un tornavís?" Depèn del que necessiteu per aconseguir! El mateix passa amb aquests formats d'imatge. Si necessiteu mostrar una foto, llavors JPG és la millor opció per a vostè. Si afegiu una icona, SVG és probable que tingueu una millor opció. Podeu obtenir més informació sobre quan és apropiat utilitzar fitxers SVG aquí .
Article original de Jennifer Krynin. Editat per Jeremy Girard el 6/6/17