Worköholics, comunicación y proyectos digitales.

Dibujando en la web con Canvas y SVG

Diseño de interacción/ Gráficos

Desde la llegada de HTML5 existen estándares para manipular gráficos en la web. El uso de Canvas y SVG (Scalable Vector Graphics) son la mejor opción para crear gráficos rápidos y ligeros en una página web. Son muchas las ventajas que nos proporcionan este tipo de estándares, por ejemplo, evitan la instalación de complementos, permiten un buen posicionamiento o se visualizan de forma correcta en dispositivos móviles. Pero, ¿Qué diferencias hay entre ellos? ¿Cuándo debemos utilizar uno u otro?

Canvas, pintando con JavaScript

Canvas es un elemento HTML que delimita un lienzo para dibujar gráficos mediante JavaScript haciendo uso de un objeto de contexto que los crea sobre la marcha. Su API contiene métodos que permiten crear trazados en contextos 2D y 3D. La representación de los gráficos utiliza el modelo “fire and forget”, los gráficos no se guardan, una vez generados  no podremos obtener su forma y posición. Para la creación de una escena, el desarrollador debe repintar el gráfico completamente cada vez que se quiera modificar.

HTML

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;">
</canvas>

JavaScript

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle="#e62a60";
ctx.fillRect(0,0,100,100);

Output

En el ejemplo se añade el elemento canvas en el HTML. En el script se obtiene su contexto 2d y con el método fillRect se dibuja un rectángulo en el lienzo.

SVG, vectores en HTML

Mientras que con Canvas los dibujos se generan mediante píxeles (mapa de bits), con SVG se crean a base de gráficos vectoriales. Los SVG se adaptan al tamaño, por lo tanto, si hacemos una ampliación no pierde calidad. Se basan en el lenguaje XML, pudiendo crear figuras y trazados a través de las etiquetas y sus atributos. Los elementos SVG pueden modificarse mediante CSS y JavaScript. La representación de los gráficos utiliza el modelo retenido, permitiendo modificar, transformar o trasladar un elemento las veces que se desee.

HTML

<svg width="100" height="100" >
<rect width="100" height="100" fill="#e62a60"/>
</svg>

Output

Con este código conseguimos el mismo resultado que en el anterior ejemplo utilizando el elemento SVG.

También podremos generar gráficos SVG haciendo uso de herramientas de dibujo vectorial como illustrator. Nos bastará con guardar el archivo en formato SVG, y puedes obtener su código abriendo el archivo con un editor de texto.

Comparación entre Canvas y SVG

Canvas SVG
Se generan mediante píxeles (Mapa de bits). Se generan mediante gráficos vectoriales.
Elemento HTML único. Forman parte del DOM.
Los gráficos se modifican mediante JavaScript. Los gráficos se pueden modificar mediante CSS o JavaScript.
La interacción entre el usuario y los gráficos se gestiona mediante coordenadas. La interacción entre el usuario y los gráficos se gestiona haciendo referencia al propio elemento.
El rendimiento es mayor con muchos objetos y superficies pequeñas. El rendimiento es mayor con pocos objetos y superficies grandes.
Pierde nitidez en impresiones y ampliaciones. No pierde nitidez.

¿Cuándo utilizo Canvas y cuándo SVG?

Escoger entre Canvas y SVG no nos limita a la hora de generar gráficos, ya que podremos conseguir el mismo objetivo con cualquiera de las dos opciones. Pero dependiendo del escenario es conveniente escoger uno u otro.

Rendimiento

Uno de los aspectos a valorar es el rendimiento de las dos tecnologías. Cuando el tamaño de la pantalla aumenta, el tiempo que Canvas necesita para representar los gráficos aumenta a medida que es necesario dibujar más píxeles. Por otra parte, con SVG el rendimiento disminuye cuando el número de objetos que se representan crece.

Tiempo de renderizado dependiendo del area

Drawing Area

Tiempo de renderizado dependiendo del número de objetos

Object Number

Calidad de los gráficos

En el caso de que el objetivo sea generar gráficos de alta fidelidad, SVG es la tecnología que nos permite dibujar con más nitidez. Para ver o imprimir documentos de alta fidelidad la mejor elección sería haciendo uso de trazados vectoriales, ya que el mismo gráfico es independiente del tamaño y resolución con que se muestre. No pierde calidad (ni pixela ni pierde nitidez) al modificar sus dimensiones.

En el ejemplo se puede observar nuestro loader generado mediante las dos tecnologías y comprobamos como la versión SVG tiene más nitidez.

Canvas

SVG

Imágenes estáticas

También podremos utilizar los SVG para sustituir imágenes simples de webs o aplicaciones siempre que dispongamos de su versión vectorizada. Como son escalables, no sería necesario generar 2 archivos diferentes para  utilizar una imagen a su tamaño natural y otra versión más grande.
Por otra parte, en pantallas de retina es necesario duplicar las imágenes doblando su dimensión, para no perder nitidez en la visualización. Al utilizar el formato SVG nos bastaría con una versión de la imagen.

Datos en tiempo real

Canvas es muy adecuado para la representación de datos a tiempo real. Al usar su API para crear los gráficos, se puede dibujar y borrar rápidamente sin alterar el DOM. Para este tipo de uso suelen utilizarse un gran número de elementos, por lo tanto, el utilizar SVG afectaría negativamente al rendimiento.

Un ejemplo de visualización de datos a tiempo real mediante canvas es http://tweetping.net/que muestra tweets geolocalizados en un mapa.

Juegos 2D

Para el desarrollo de juegos bidimensionales, se puede escoger cualquiera de las opciones, pero en este tipo de escenarios suele haber un gran número de elementos, por eso sería más adecuado utilizar Canvas. Además su API basada en JavaScript es la forma natural de gestionar el comportamiento de un juego.

Existen muchas librerías para la gestión de gráficos Canvas. Un ejemplo de este tipo de librerías es CreateJS, nosotros la hemos utilizado en nuestra web para crear un juego tipo “Break it” en la página del error 404.

Diseño de la interfaz de usuario

Para el diseño de la interfaz de usuario de una página web, utilizar SVG sería una opción acertada. De esta manera cada elemento forma parte del DOM y podemos gestionarlos a través de CSS como haríamos con un elemento HTML cualquiera.

No necesitamos la limitación de un lienzo como Canvas en caso de querer añadir gráficos repartidos por diferentes espacios de la web, con lo que usar gráficos vectoriales independientes sería mejor opción que generar un Canvas por cada dibujo.

Actualmente hay muchas webs que empiezan a utilizar gráficos SVG en elementos tradicionales de la web. En el siguiente enlace encontraremos checkbox y radio buttons animados mediante esta tecnología.

Estadísticas

Este tipo de escenarios pueden realizarse con SVG y Canvas con muy buenos resultados. Existen muchas librerías que hacen su uso facilitándonos el uso de cuadros y gráficas. Google hace uso de elementos SVG en la librería de gráficas que ofrece en su espacio para desarrolladores. Otras librerias como http://www.chartjs.org/ utilizan Canvas para ello.

Animaciones

Con las animaciones no existe una opción predominante para su desarrollo. Todo dependerá del tipo de animación y la afinidad que tenga el desarrollador con una tecnología u otra.

En mi caso, las primeras animaciones las hice utilizando Canvas, ejemplo de ello son las transformaciones de los polígonos que desarrollamos para la sección de servicios de nuestra web. En cambio, actualmente prefiero programar animaciones SVG por la nitidez que nos ofrecen los gráficos vectoriales. A su vez, el hecho de que los elementos sean parte del DOM y se puedan gestionar a través de CSS me parece de gran utilidad.

 

 

En conclusión, estas dos herramientas nos aportan propiedades más que suficientes para gestionar gráficos de calidad. Escoger una u otra opción es una decisión importante, que puede simplificar el trabajo de desarrollo y conseguir satisfacer las necesidades del proyecto.

CUÁNDO

Jueves 1 de Octubre de 2015

QUIÉN

Igor Nieto

Front-End Developer

DÓNDE

Bilbao

COMPARTE


Igor Nieto

Front-End Developer

  • CUÁNDO:

    Jueves 1 de Octubre de 2015

  • DÓNDE:

    Bilbao

  • QUÉ:
    Diseño de interacción , Gráficos
  • COMPARTE:
  • Blog