Los vectores gráficos escalables, conocidos como SVG (Scaleable Vector Graphics), son un lenguaje gráfico que emplea el formato XML. Estas imágenes se pueden editar con un editor de textos básicos. Estos están soportados desde ya hace algunas versiones en la mayoría de navegadores de la actualidad, IE, Chrome, Firefox, Opera. El formato SVG está recomendado por el W3C.
Hoy en día los SVG han pasado a ser una de las partes importantes dentro de la User Experience (UX) a la hora de navegar por páginas web y aplicaciones, añadiendo una capa extra de personalidad en todas ellas.
Utilizando unas funcionalidades básicas en programas como Sketch y Illustrator, los diseños de SVG son fácilmente exportados en código HTML.
Solo con CCS, los vectores gráficos SVG, se adaptan al tamaño y a otras animaciones CSS3, como desplazamientos laterales o verticales, transformaciones de tamaño, rotaciones, transiciones, asi como utilizar repeticiones temporales y controlar el tiempo de cada una de las transiciones.
Estas son las ventajas de los gráficos vectoriales:
-
La escalabilidad de estos gráficos es una de las principales ventajas. Esto quiere decir que aunque aumentemos o disminuyamos el tamaño, la resolución del dibujo se mantiene, a diferencia de los tradicionales gráficos jpg, gif, etc. Los gráficos SVG, en vez de utilizar mapas de bits, contienen las instrucciones para que el navegador cree el dibujo de forma nativa.
-
El reducido tamaño de estos gráficos también es una de sus ventajas, ya que nos ayudará a minimizar el tamaño de las páginas y maximizar su velocidad de carga.
-
Otra de las ventajas, es que con los gráficos SVG se pueden crear animaciones, de esta forma podemos crear mejores efectos a nuestras páginas Web..
En estas páginas podéis encontrar algunos ejemplos prácticos:
https://norfipc.com/web/imagenes-svg-como-crearlas-ejemplos-usos-practicos.php
http://www.creativebloq.com/design/examples-svg-7112785
Comentarios