Canvas vs SVG: Elegir la herramienta adecuada para la tarea

HTML5 Canvas y SVG son ambas tecnologías basadas en estándares de HTML5 que puedes utilizar para crear increíbles gráficos y experiencias visuales. La pregunta que planteo en este artículo es la siguiente: ¿Debería importar cuál de ellas uses en tu proyecto? En otras palabras, ¿existen casos de uso para preferir HTML5 Canvas sobre SVG?

Primero, dediquemos unas palabras a presentar HTML5 Canvas y SVG.

¿Qué es HTML5 Canvas?

Así es como la especificación WHATWG introduce el elemento canvas:

El elemento canvas proporciona a los scripts una superficie de mapa de bits dependiente de la resolución, que puede utilizarse para renderizar gráficos, imágenes de juegos, arte u otras imágenes visuales sobre la marcha.

En otras palabras, la etiqueta <canvas> expone una superficie en la que puedes crear y manipular imágenes rasterizadas píxel por píxel mediante una interfaz programable de JavaScript.

Aquí hay un ejemplo de código básico:

El HTML:

<canvas id="myCanvas" width="800" height="800"></canvas>

El JavaScript:

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
context.fillStyle = '#c00';
context.fillRect(10, 10, 100, 100);

Puedes aprovecharte de los métodos y propiedades de la API de HTML5 Canvas obteniendo una referencia al objeto de contexto 2D. En el ejemplo anterior, he dibujado un simple cuadrado rojo, de 100 x 100 píxeles de tamaño, colocado a 10px desde la izquierda y a 10px desde la parte superior de la superficie de dibujo del <canvas> drawing surface.

Siendo dependiente de la resolución, las imágenes que crees en <canvas> pueden perder calidad al ampliarse o mostrarse en pantallas Retina.

Dibujar formas simples es solo la punta del iceberg. La API de Canvas de HTML5 te permite dibujar arcos, rutas, texto, gradientes, etc. También puedes manipular tus imágenes píxel por píxel. Esto significa que puedes reemplazar un color por otro en ciertas áreas de la gráfica, puedes animar tus dibujos, e incluso dibujar un video en el canvas y cambiar su apariencia.

¿Qué es SVG?

SVG significa Gráficos Vectoriales Escalables. Según la especificación:

SVG es un lenguaje para describir gráficos de dos dimensiones. Como formato independiente o cuando se mezcla con otros XML, usa la sintaxis XML. Cuando se mezcla con HTML5, usa la sintaxis de HTML5. …

Los dibujos SVG pueden ser interactivos y dinámicos. Las animaciones pueden definirse y activarse de manera declarativa (es decir, mediante la inclusión de elementos de animación SVG en contenido SVG) o mediante scripting.

SVG es un formato de archivo XML diseñado para crear gráficos vectoriales. Ser escalable tiene la ventaja de permitirte aumentar o disminuir una imagen vectorial manteniendo su nitidez y alta calidad. (Esto no se puede hacer con imágenes generadas por HTML5 Canvas.)

Aquí está el mismo cuadrado rojo (previamente creado con HTML5 Canvas) esta vez dibujado usando SVG:

<svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 600 600">
  <desc>Red rectangle shape</desc>
  <rect x="10" y="10" width="100" height="100" fill="#c00"  />  
</svg>

Puedes hacer con SVG la mayoría de las cosas que puedes hacer con Canvas, como dibujar formas y rutas, gradientes, patrones, animaciones, etc. Sin embargo, estas dos tecnologías funcionan de manera fundamentalmente diferente. A diferencia de una gráfica basada en Canvas, SVG tiene un DOM, y por lo tanto tanto CSS como JavaScript tienen acceso a él. Por ejemplo, puedes cambiar el aspecto de una gráfica SVG utilizando CSS, animar sus nodos con CSS o JavaScript, hacer que cualquiera de sus partes responda a un evento de ratón o teclado de la misma manera que un <div>. Como se hará más claro en las siguientes secciones, esta diferencia juega un papel significativo cuando necesitas elegir entre Canvas y SVG para tu próximo proyecto.

Modo Inmediato y Modo Retenido

Es crucial distinguir entre modo inmediato y modo retenido. HTML5 Canvas es un ejemplo del primero, SVG del segundo.

El modo inmediato significa que, una vez que tu dibujo está en el canvas, el canvas deja de realizar un seguimiento de él. En otras palabras, tú, como desarrollador, necesitas trabajar en los comandos para dibujar objetos, crear y mantener el modelo o escena de cómo debería verse la salida final, y especificar lo que necesita ser actualizado. La API de gráficos del navegador simplemente comunica tus comandos de dibujo al navegador, que luego los ejecuta.

SVG utiliza el enfoque de retención, donde simplemente emites tus instrucciones de dibujo de lo que deseas mostrar en la pantalla, y la API de gráficos del navegador crea un modelo en memoria o escena de la salida final y la traduce en comandos de dibujo para tu navegador.

Siendo un sistema de gráficos inmediato, Canvas no tiene un DOM, o Modelo de Objetos del Documento. Con Canvas, dibujas tus píxeles y el sistema olvida todo acerca de ellos, reduciendo así la memoria extra necesaria para mantener un modelo interno de tu dibujo. Con SVG, cada objeto que dibujas se agrega al modelo interno del navegador, lo que hace que tu vida como desarrollador sea un poco más fácil, pero con algunos costos en términos de rendimiento.

Sobre la base de la distinción entre modo inmediato y retención, así como otras características específicas de Canvas y SVG respectivamente, es posible esbozar algunos casos en los que utilizar una tecnología en lugar de la otra podría servir mejor a los objetivos de tu proyecto.

HTML5 Canvas: Pros y Contras

La especificación de HTML5 Canvas recomienda claramente que los autores no deberían usar el elemento <canvas> donde tienen otros medios más adecuados disponibles para ellos.

Por ejemplo, para un elemento <header> con mucha gráfica, las mejores herramientas son HTML y CSS, no <canvas> (y tampoco SVG, por cierto). Dr. Abstract, creador y fundador del marco de trabajo de Canvas Zim JS, Zim JS canvas framework, confirma esta opinión al escribir:

El DOM y los frameworks de DOM son buenos para mostrar información, especialmente información textual. En comparación, el canvas es como una imagen. Se puede agregar texto al canvas y hacerlo receptivo, pero el texto no se puede seleccionar ni buscar fácilmente como en el DOM. Las páginas de texto o texto e imágenes de gran extensión son una excelente aplicación del DOM. El DOM es ideal para sitios de redes sociales, foros, compras y todas las aplicaciones de información a las que estamos acostumbrados. — “Cuándo utilizar una biblioteca o framework de Canvas en JavaScript”

Entonces, ese es un claro ejemplo de cuándo no usar <canvas>. ¿Pero cuándo es <canvas> una buena opción?

Este tweet de Sarah Drasner resume algunos de los principales pros y contras de las características y capacidades del canvas, lo que puede ayudarnos a determinar algunos casos de uso para esta potente tecnología:

I had this slide in a lot of talks and workshops over the years: pic.twitter.com/4K0C7mNzg2

— Sarah Drasner (@sarah_edo) October 2, 2019

Puedes ver la imagen del tweet aquí.

Para qué puede ser excelente HTML5 Canvas

Alvin Wan ha realizado pruebas comparativas entre Canvas y SVG en términos de rendimiento, tanto en relación con el número de objetos dibujados como en relación con el tamaño de los objetos o el canvas en sí. Expone sus resultados de la siguiente manera:

En resumen, el sobrecosto de la representación del DOM es más agudo cuando se manejan cientos, si no miles, de objetos; en esta situación, Canvas es el claro ganador. Sin embargo, tanto el canvas como SVG son invariantes en cuanto a tamaños de objetos. Dado el resultado final, el canvas ofrece una clara ventaja en términos de rendimiento.

Basándonos en lo que sabemos sobre Canvas, especialmente su excelente rendimiento al dibujar muchos objetos, aquí hay algunos escenarios posibles en los que podría ser apropiado, e incluso preferible, a SVG.

Juegos y Arte Generativo

Para gráficos intensivos, juegos altamente interactivos, así como para arte generativo, Canvas generalmente es la opción correcta.

Trazado de Rayos

Trazado de rayos es una técnica para crear gráficos 3D.

El trazado de rayos puede usarse para realzar una imagen rastreando la trayectoria de la luz a través de píxeles en un plano de imagen y simulando los efectos de sus encuentros con objetos virtuales. … Los efectos logrados por el trazado de rayos, … varían de … crear imágenes realistas a partir de gráficos vectoriales simples hasta aplicar filtros fotográficos similares para eliminar el efecto de ojo rojo. — SVG vs Canvas: cómo elegir, Documentación de Microsoft.

Si tienes curiosidad, aquí tienes una aplicación de trazado de rayos en acción por Mark Webster.

Sin embargo, aunque HTML5 Canvas ciertamente es más adecuado para la tarea que SVG podría ser, no necesariamente se deduce que el trazado de rayos se ejecute mejor en un elemento <canvas>. De hecho, la tensión en la CPU podría ser considerable, hasta el punto de que tu navegador podría dejar de responder.

Dibujar un Número Significativo de Objetos en una Superficie Pequeña

Otro ejemplo es un escenario en el que tu aplicación necesita dibujar un número significativo de objetos en una superficie relativamente pequeña, como representaciones gráficas de patrones climáticos en tiempo real sin interacción.

La imagen anterior es de este artículo de MSDN, que fue parte de mi investigación para este artículo.

Sustitución de Píxeles en Vídeos

Como se demuestra en este artículo de HTML5 Doctor, otro ejemplo en el que Canvas sería apropiado es cuando se reemplaza el color de fondo de un video con un color diferente, otra escena o una imagen.

Para Qué HTML5 Canvas No Es Tan Bueno

Por otro lado, hay varios casos en los que Canvas podría no ser la mejor opción en comparación con SVG.

Escalabilidad

La mayoría de los escenarios en los que la escalabilidad es una ventaja se beneficiarán más utilizando SVG en lugar de Canvas. Gráficos de alta fidelidad y complejos, como diagramas de construcción y de ingeniería, organigramas, diagramas biológicos, etc., son ejemplos de esto.

Cuando se dibujan con SVG, ampliar las imágenes o imprimirlas preserva todos los detalles con un alto nivel de calidad. También puedes generar estos documentos a partir de una base de datos, lo que hace que el formato XML de SVG sea muy adecuado para la tarea.

Además, estas gráficas suelen ser interactivas. Piensa en los mapas de asientos cuando reservas tu boleto de avión en línea como un ejemplo, lo que las convierte en un excelente caso de uso para un sistema de gráficos retentivos como SVG.

Dicho esto, con la ayuda de algunas grandes bibliotecas como CreateJS y Zim (que extiende CreateJS), los desarrolladores pueden integrar relativamente rápido eventos del mouse, pruebas de impacto, gestos multitáctiles, capacidades de arrastrar y soltar, controles y más, a sus creaciones basadas en Canvas.

Accesibilidad

Aunque hay pasos que puedes tomar para hacer que una gráfica Canvas sea más accesible —y una buena biblioteca Canvas como Zim podría ser útil aquí para acelerar el proceso—, Canvas no brilla en términos de accesibilidad. Lo que dibujas en la superficie del canvas son solo un montón de píxeles, que no pueden ser leídos ni interpretados por tecnologías de asistencia o bots de motores de búsqueda. Este es otro área en la que SVG es preferible: SVG es solo XML, lo que lo hace legible tanto para humanos como para máquinas.

No Confianza en JavaScript

Si no deseas utilizar JavaScript en tu aplicación, entonces Canvas no es tu mejor aliado. De hecho, la única manera de trabajar con el elemento <canvas> es mediante JavaScript. Por el contrario, puedes dibujar gráficos SVG utilizando un programa de edición de vectores estándar como Adobe Illustrator o Inkscape, y puedes usar CSS pura para controlar su apariencia y realizar animaciones sutiles y microinteracciones llamativas.

Combinando HTML5 Canvas y SVG para Escenarios Avanzados

Hay casos en los que tu aplicación puede obtener lo mejor de ambos mundos al combinar HTML5 Canvas y SVG. Por ejemplo, un juego basado en Canvas podría implementar sprites desde imágenes SVG generadas por un programa de edición de vectores, para aprovechar la escalabilidad y el menor tamaño de descarga en comparación con una imagen PNG. O un programa de pintura podría tener su interfaz de usuario diseñada con SVG, con un elemento <canvas> incrustado, que podría usarse para dibujar.

Finalmente, una biblioteca potente como Paper.js hace posible programar gráficos vectoriales sobre HTML5 Canvas, ofreciendo a los desarrolladores una forma conveniente de trabajar con ambas tecnologías.

Conclusión

En este artículo, he explorado algunas características clave de ambos HTML5 Canvas y SVG para ayudarte a decidir cuál tecnología podría ser más adecuada para tareas particulares.

¿Cuál es la respuesta?

Chris Coyier está de acuerdo con Benjamin De Cock, como el último tuitea:

Una manera muy básica de responder es “usa canvas cuando no puedas usar svg” (donde “no puedas” podría significar animar miles de objetos, manipular cada píxel individualmente, etc.). En otras palabras, SVG debería ser tu elección predeterminada, y canvas tu plan de respaldo.

— Benjamin De Cock (@bdc) October 2, 2019

Dr. Abstract ofrece una larga lista de cosas que se construyen mejor con Canvas, incluyendo logos interactivos y publicidad, infografías interactivas, aplicaciones de e-learning, y mucho más.

En mi opinión, no hay reglas rígidas y fijas sobre cuándo es mejor usar Canvas en lugar de SVG. La distinción entre modo inmediato y retención señala al Canvas de HTML5 como el indiscutido ganador cuando se trata de construir cosas como juegos intensivos en gráficos, y a SVG como preferible para cosas como imágenes planas, iconos y elementos de UI. Sin embargo, en medio hay espacio para que HTML5 Canvas expanda su alcance, especialmente considerando lo que las diversas bibliotecas poderosas de Canvas podrían aportar. No solo facilitan trabajar con ambas tecnologías en la misma obra gráfica, sino que también hacen que algunas características difíciles de implementar en un proyecto nativo basado en Canvas, como controles interactivos y eventos, respuesta, características de accesibilidad, y demás, ahora estén a solo un dedo de la mayoría de los desarrolladores, lo que deja la puerta abierta a la posibilidad de usos cada vez más interesantes de HTML5 Canvas.

Preguntas Frecuentes (FAQs) sobre Canvas vs SVG