SVG animados

SVG animados

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:

  1. 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.

  2. 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.

  3. 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

https://www.imaginanet.com/

http://www.creativebloq.com/design/examples-svg-7112785


Comentarios

Sin comentarios
Ha habido un error en el envío
Comentario enviado. Será revisado por la moderación antes de ser publicado.

Deja tu comentario

Tu nombre:
Tu email:
Tu comentario: