Os beneficios do uso de gráficos vectoriales escalables
Os gráficos vectoriales escalables, ou SVG, desempeñan un papel importante no deseño do sitio web hoxe. Se aínda non está a usar o SVG no seu traballo de deseño web, aquí hai algúns motivos polos que debería comezar a facelo, así como os fallbacks que pode usar para navegadores máis antigos que non soportan estes ficheiros.
Resolución
O maior beneficio de SVG é a independencia de resolución. Debido a que os ficheiros SVG son gráficos vectoriais en vez de imaxes ráster baseadas en píxeles, poden ser redimensionadas sen perder ningunha calidade de imaxe. Isto é especialmente útil cando creas sitios web sensibles que precisan verse ben e funcionan ben nunha ampla gama de tamaños e dispositivos de pantalla .
Os ficheiros SVG pódense ampliar ou abaixar para acomodar o tamaño e as necesidades de deseño cambiantes do seu sitio web sensible e non se preocupe con aqueles gráficos que teñan calidade comprometida en calquera paso do camiño.
Tamaño do ficheiro
Un dos retos co uso de imaxes ráster (JPG, PNG, GIF) nos sitios web responsivos é o tamaño do ficheiro destas imaxes. Debido a que as imaxes de raster non escalan o xeito no que fan os vectores, debes entregar as imaxes baseadas en píxeles ao maior tamaño ao que se mostrarán. Isto é porque sempre podes facer unha imaxe máis pequena e conservar a súa calidade, pero o mesmo non é verdadeiro para facer que as imaxes sexan máis grandes. O resultado final é que moitas veces tes imaxes que son moito máis grandes do que se amosan na pantalla dunha persoa, o que significa que están obrigados a descargar un arquivo moi grande.
SVG aborda este desafío. Debido a que os gráficos vectoriais son escalables, pode ter tamaños de arquivos moi pequenos, independentemente da cantidade de grandes imaxes. Isto terá un impacto positivo no rendemento global e na velocidade de descarga dun sitio.
Estilo de CSS
O código SVG tamén se pode engadir directamente ao HTML dunha páxina. Isto é coñecido como "SVG en liña". Un dos beneficios do uso de SVG en liña é que, dado que os gráficos son realmente deseñados polo navegador en función do seu código, non hai necesidade de facer unha solicitude HTTP para obter un ficheiro de imaxe. Outro beneficio é que o SVG en liña pode ser estilizado con CSS.
Necesitas cambiar a cor dunha icona SVG? No canto de ter que abrir esa imaxe nalgún tipo de software de edición e exportar e cargar o ficheiro de novo, simplemente pode cambiar o ficheiro SVG cunhas cantas liñas de CSS.
Tamén pode usar outros estilos CSS en gráficos SVG para cambialos nos estados de desprazamento ou para determinadas necesidades de deseño. Podes incluso animar eses gráficos para engadir un pouco de movemento e interactividade a unha páxina.
Animacións
Debido a que os ficheiros SVG en liña poden ser estilizados con CSS, tamén pode usar animacións CSS nelas. As transformacións CSS e as transicións son dúas maneiras simples de engadir vida aos ficheiros SVG. Podes obter experiencias ricas en flash nunha páxina sen sucumbir ás desvantaxes que vén co uso de Flash nos sitios web de hoxe.
Usos de SVG
Tan potente como SVG, estes gráficos non poden substituír calquera outro formato de imaxe que estea usando no seu sitio web. As fotos que precisan profundidade de cor aínda terán que ser un ficheiro JPG ou quizais un PNG, pero as imaxes simples como os íconos son perfectamente axeitadas para executarse como SVG.
O SVG tamén pode ser apropiado para ilustracións máis complexas, como logotipos ou gráficos e gráficos. Todos os gráficos beneficiaranse de ser escalables, poden ser estilizados con CSS e as outras vantaxes que se detallan neste artigo.
Soporte para navegadores máis antigos
O soporte actual para SVG é moi bo nos navegadores web modernos. Os únicos navegadores que realmente non teñen soporte para estes gráficos son versións máis antigas de Internet Explorer (Versión 8 e abaixo) e algunhas versións máis antigas de Android. En xeral, unha porcentaxe moi pequena da poboación de navegación aínda usa estes navegadores e ese número segue a diminuír. Isto significa que SVG pódese usar con bastante seguridade nos sitios web de hoxe.
Se desexa fornecer unha alternativa para SVG, pode usar unha ferramenta como Grumpicon do Grupo Filament. Este recurso levará os seus ficheiros de imaxe SVG e creará fallos PNG para navegadores máis antigos.
Editado por Jeremy Girard o 27 de febreiro de 17