Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. SVG
Webdesign

Cómo manipular y animar SVG con Snap.svg

by
Length:ShortLanguages:

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

En este tutorial vamos a introducir Snap.svg, una biblioteca de JavaScript que ayuda a animar y manipular contenido SVG. Para demostrar algunas de las funciones disponibles, vamos a animar un ojo SVG.

¿Qué es Snap.svg?

Snap.svg es una biblioteca de JavaScript que facilita la creación y manipulación de gráficos SVG para los navegadores modernos. Es sucesora de Raphaël de Dmitry Baranovskiy; la biblioteca de JavaScript más popular para trabajar con SVG.

Raphäel

Raphäel.js es una gran biblioteca. Lanzada en el año 2008, su mayor victoria fue su soporte para navegadores desde IE 5.5 en adelante. Sin embargo, brindar soporte para tantos navegadores era limitante y ocasionaba una incapacidad para implementar los desarrollos más recientes, por lo que dependía de un subconjunto común de herramientas para SVG.

Después de un tiempo la comunidad de Raphäel.js se dividió en dos, un grupo que dependía de ella para la compatibilidad entre múltiples plataformas, y otro que la usaba para crear SVGs. Este último grupo exigió cambios para dar soporte a más herramientas para SVG, lo que Raphäel.js no pudo lograr.

Por esta razón se creó Snap.svg, escrita completamente desde cero por Dmitry Baranovskiy (del equipo de la Plataforma Web de Adobe), para trabajar con SVG de forma más sencilla y usando lo más reciente que SVG ofrece; funciones como el enmascaramiento, patrones, gradientes, grupos, animaciones y más.

¿Qué puedes hacer con Snap.svg?

Revisa su documentación API y verás funciones como mask (máscara), group (grupo), gradient (gradiente), filter (filtro), animate (animar) y pattern (patrón), todas las cuáles pueden ser aplicadas a los SVGs.

Snap.svg te ayudará a generar gráficos, pero también puede trabajar con SVG existentes. Esto significa que tu contenido SVG no tiene que ser creado necesariamente con Snap.svg, sino que también tienes la libertad de manipular gráficos creados con herramientas como Adobe Illustrator, Inkscape o Sketch.

Iniciando con Snap.svg

Descarga

Primero necesitarás descargar Snap.svg. Cuando hayas hecho lo anterior, encontrarás lo siguiente en el archivo:

  • demos - aquí hay algunos ejemplos, que también puedes encontrar en la sección Demo de su sitio web
  • dist - esta es la secuencia de comandos de snap.svg minimizada y descomprimida (para desarrollo)
  • doc - aquí encontrarás la documentación API que también está disponible en snapsvg.io
  • src - estos son los componentes, herramientas y complementos que conforman a Snap.svg, tales como animate (animar), paper (papel), ejecutar una tarea Grunt, etcétera.
  • test - este directorio contiene pruebas unitarias para Snap.svg

Configurando un proyecto

Después de descargar los recursos de Snap.svg, comienza un nuevo proyecto web que debe incluir:

  • index.html - el archivo HTML principal
  • js/snap.svg.js - el complemento snap.svg
  • js/main.js - nuestro espacio de trabajo principal

Crea una plantilla HTML y haz referencia a las secuencias de comandos "scripts/snap.svg.js" y "scripts/main.js" en algún lugar de tu página.

Después de eso, coloca un contenedor <svg> dentro de <body> y asígnale un id. Deberás tener algo ligeramente similar a lo siguiente:

Trabajando con SVG

Ahora pasemos directamente a la codificación. Para seguir estos pasos necesitarás un poco de comprensión y conocimientos básicos de JavaScript, pero no importa demasiado porque no vamos a profundizar mucho en este tutorial.

Primero vamos a inicializar Snap, apuntando al svg que acabas de crear y asignándolo a una variable. En nuestro caso la variable se llama s.

De ahora en adelante, dentro de la variable s tendremos acceso a todos los métodos de Snap.svg. Por ejemplo, digamos que queremos crear un círculo, o un rectángulo.

  • Circle (círculo) puede recibir tres argumentos: x, y y radio (consulta la API Circle)
  • Rectangle (rectángulo) puede recibir seis argumentos: x, y, ancho, alto, radio horizontal y radio vertical (consulta la API Rect)
  • Ellipse (elipse) puede recibir cuatro argumentos: x, y, radio horizontal y radio vertical (consulta la API Ellipse)

El código anterior generará el siguiente resultado:

Como puedes ver en la captura de pantalla adjunta, las figuras, de forma predeterminada, tienen un color de relleno #000 (negro) sin ningún otro estilo. Vamos a interactuar con ellas y a añadir más atributos de estilo, como un color de relleno, opacidad de relleno, color del trazo, ancho del trazo y opacidad del trazo. Puedes consultar los Atributos SVG para obtener más información.

¡Estos atributos han logrado que nuestras figuras svg se vean mucho más bonitas!

Manipulación SVG adicional

Tomemos nuestro ejemplo y vayamos más allá de lo básico.

Agrupando figuras

Snap.svg usa una poderosa herramienta llamada group (grupo) que, como el nombre sugiere, agrupa vectores entre sí, convirtiéndolos en una figura. Puedes agrupar tantas figuras como quieras añadiéndolas como una lista.

Vamos a crear dos círculos, a agruparlos y a reducir el relleno de cada círculo para visualizar más claramente lo que está pasando.

Enmascarando figuras con otras figuras

Ahora digamos que queremos crear un ojo imaginario usando los elementos agrupados que ya construimos. Podemos hacerlo usando mask (máscara). Primero necesitamos crear una elipse adicional y colocarla en medio del grupo.



Ahora necesitamos enmascarar los círculos con nuestra elipse, añadiendo un color de relleno diferente al de la elipse:

Animando figuras

Continuando con nuestro ejemplo, podemos lograr que este ojo parpadee añadiendo un método animate (animar). Para animar la elipse que acabamos de crear, vamos a modificar el radio vertical de 1 a 90 (que es el valor actual) y de vuelta a su valor.

Crea la animación y colócala dentro de una función llamada blink (parpadear).

Estos estados que vamos a animar van de ry: 90 a ry: 1 y de ry: 90 a ry: 1 con tiempos diferentes.

Ahora crea un setInterval para invocar al método blink una vez cada tres segundos y así crear un efecto de parpadeo.

El código final debe verse así:

Soporte para navegadores

Como mencionamos anteriormente, estas características son compatibles con los navegadores modernos: IE9+, Safari, Chrome, Firefox y Opera.

Gratis y de código abierto

Snap.svg está disponible con una licencia de Apache 2, lo que significa que es totalmente gratuita y completamente de código abierto.

Conclusión

Snap.svg disminuye la barrera para lograr una manipulación de SVG muy sorprendente.  ¡Espero que hayas disfrutado siguiendo este tutorial y que te haya inspirado para conocer más sobre SVG!

Vínculos útiles

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.