Snap es una relativamente nueva librería Javascript para trabajar con elementos SVG, ya sabes, elementos generados con el formato de gráficos vectoriales escalables de HTML5. Con Snap podemos resumir muchas de las tareas habituales que querrás hacer dentro de un contenido SVG, como es el caso de insertar elementos, alterar sus características, animarlos, etc.

Digo "relativamente" nueva porque ya tiene más de un año, aunque solo se han lanzado 3 releases hasta el momento, estando en el instante de escribir este artículo a la versión 0.3. No obstante, el trabajo está ya muy avanzado, pues viene bien direccionado, ya que su creador es el mismo que otra librería SVG mucho más conocida, Raphael JS.

En este artículo vamos a presentar Snap y daremos algún ejemplo con el que puedas ponerte a jugar, así como también queremos sentar las bases para profundizar en breve en otras entregas.

De momento puedes echar un primer vistazo a Snap en su página web: http://snapsvg.io/. También puedes consultar su Github y ver en detalle todo el código fuente de esta librería de código abierto: https://github.com/adobe-webplatform/Snap.svg.

Observarás que los responsables de traerte Snap son "Adobe Web Platform" por lo que, además de la garantía de contar con un experimentado líder del proyecto Dmitry Baranovskiy (Creador de Raphael), tiene una gran empresa detrás. Todo ello nos hace entender que Snap tiene un futuro muy prometedor y de paso el interés de Adobe en SVG como lenguaje abierto con el que se desarrollarán seguramente una serie de productos de la compañía.

Las diferencias con Raphael JS son básicamente dos:

1) Snap no tiene soporte a Internet Explorer 6, sino que en su diseño se ha buscado optimizar la librería para navegadores modernos, permitiendo explorar características avanzadas del SVG y mejorar el rendimiento del código.
2) En Snap puedes manejar tanto los elementos SVG creados con código Javascript como aquellos elementos SVG que ya estaban en la página antes de la carga de la librería Snap. Eso quiere decir que puedes acceder al DOM mediante selectores CSS y cargar dentro de Snap contenidos escritos en SVG para su animación o para lo que sea necesario. Como dicen en la descripción del producto, puedes entenderlo con el simil "el jQuery para SVG".

Para encontrar más información sobre Snap.SVG, así como demos de uso y otros tutoriales puedes consultar este artículo con una serie de enlaces destacados para conocer Snap.

Por qué SVG

SVG es un formato vectorial, eso tiene muchas ventajas tanto relacionadas con la visualización de los elementos como con la carga de la página.

Visualización: Si se permite, podemos decir que SVG es un formato de imagen "responsive", dado que se puede adaptar perfectamente a la pantalla del ordenador o dispositivo donde estemos visualizando la imagen. Al ser vectorial, tanto la ampliación de la imagen como su reducción no pierden calidad, con lo que estamos seguros que el contenido gráfico se va a ver con su mejor cara.

Carga: El peso de los archivos SVG depende de los elementos que tenga y su complejidad. Las imágenes se escriben con texto, lo que resulta bastante ligero. Una gran imagen con una forma simple seguro que es más ligera si la especificas en SVG que como mapa de bits, aunque lo cierto es que carga de los elementos SVG puede ser más rápida, o también podría ser más lenta en ciertas condiciones, todo depende de la imagen y del tamaño como la quieras mostrar.

Animación: lo que en todo caso será siempre más rápido de carga es la animación, puesto que los elementos se pueden animar con un poco de código y cambiar sus características de manera radical, algo que si se hiciera por vídeo sería miles de veces más pesado.

Compatibilidad: El SVG está dentro del HTML5, lo soportan todos los navegadores modernos, tanto a nivel de escritorio como dispositivos móviles. Por tanto es una herramienta muy interesante para hacer todo tipo de aplicaciones multiplataforma.

Juegos: Al tratarse de gráficos vectoriales podemos crear todo tipo de juegos gran interactividad y animaciones muy ligeras. Al ser HTML5 funcionará en todos los navegadores y como lenguaje nativo en plataformas como Windows 8 o FirefoxOS. Como es multiplataforma podrías hacerlo funcionar en dispositivos de otros tipos por medio de WebApps.

A nivel de SVG hay cientos de demos en la web, que seguramente conozcamos y con los que podemos entender las posibilidades del formato.

Librería Javascript para SVG

SVG no deja de ser un lenguaje de marcación, igual que entendemos el HTML. De hecho el código SVG se puede embeber dentro del HTML y el aspecto es muy similar. Podemos definir en código SVG ya muchas utilidades e incluso animaciones y algo de interactividad. Pero a poco que quieras avanzar, experimentarás que el lenguaje de marcación se queda corto.

Para que SVG cobre vida necesitas un poco de Javascript, para responder a la interactividad (definiendo eventos) y manipular los elementos SVG cuando el usuario haga ciertas cosas. Si llevas un tiempo en el mundo del desarrollo web podrás perfectamente hacerte a la idea.

Ahora bien, con Javascript hay muchas cosas que son un poco costosas para realizar y que te llevarían un tiempo de investigación para conseguir. Acceder al DOM de un contenido SVG, inyectar nuevos elementos, definir eventos, utilidades como el Drag&Drop, animarlos, etc. Además, debido a que existen muchos navegadores y no siempre el Javascript es exactamente igual, te verías en la necesidad de probar tu proyecto en decenas de plataformas (SO y navegadores distintos) y depurar cuando encuentres diferencias en el lenguaje.

Todo ello se puede resumir de manera palpable si te ayudas de una librería como Snap, que te proporcionará un API de funciones que realizan las tareas más útiles, sin que tengas que aprender y trabajar tanto como si partieras de cero.

Primeros pasos con Snap

Lo primero que haremos para empezar a jugar con Snap es bajarnos la librería, desde la página del producto y con el botón de "Download".

Observarás que la descarga ya viene con una carpeta llamada "Demos" que será genial para observar cómo trabajar ciertas cosas y ver que tipo de tareas puedes realizar con Snap.

El archivo de la librería en si está en la carpeta "dist", lo encuentras en "snap.svg-min.js" o bien en la versión sin minimizar, adecuada para la etapa de desarrollo. Ese archivo lo tendrás que incluir en tu código HTML para disponer de la librería:

<script src="snap.svg-min.js"></script>

Ahora podemos hacer un primer código de prueba nosotros mismos con el que crear algún elemento y colocarlo en la página. De momento vamos a crear todo el dibujo SVG desde cero, enteramente con Javascript, luego aprenderemos a usar SVG que ya tengamos como contenido en el HTML o en archivos aparte. Como lo vamos a hacer todo desde Javascript no necesitas ni crear la etiqueta SVG, así que no necesitas colocar nada en el BODY de la página.

Vamos a crear todo el sistema dentro del evento onload, así nos aseguraremos que el Javascript se ejecuta cuando ya está el DOM listo. Por facilitar las cosas, muestro el código de una sola vez, con comentarios para explicarlo.

window.onload = function(){
   //creo el "espacio" SVG donde voy a trabajar
   //el área tendrá 800px de anchura x 300 de altura
   var misvg = Snap(800, 300);

   //creo un rectangulo, posición (0,0) y anchura y altura el máximo. ç
   //Este rectángulo ocupará todo el área de trabajo
   //será como una especie de fondo para mi diseño
   var rect = misvg.rect(0,0,"100%", "100%");
   //el rectángulo tiene negro como color predeterminado
   //cambiamos su atributo fill para que sea de otro color.
   rect.attr({
      fill: "#ccc"
   });

   //creo un círculo. Radio 150 píxeles y posición (100, 200)
   var bola = misvg.circle(100, 200, 150);
   //la bola será negra, puesto que no hemos cambiado el color

   //coloco un texto, lo posiciono en la coordenada (500,290)
   var txt = misvg.text(500, 290, "http://www.desarrolloweb.com");
   //cambio diversas propiedades del texto
   txt.attr({
      fill: "#950",
      "font-size": "18",
      "font-family": "verdana"
   });
}

De momento eso es todo. Espero que te haya parecido interesante y te hayas quedado con ganas de más. Pronto volveremos a la carga con nuevas explicaciones.