Como ya hemos explicado en alguna ocasión, tanto Canvas como SVG son dos elementos que permiten la generación de gráficos dinámicamente por medio del scripting y, además, pueden beneficiarse de la aceleración por hardware cuando el equipo donde se ejecuta lo soporta. En este artículo, enfrentamos Canvas y SVG, y explicamos qué nos aporta cada uno en distintos casos prácticos.
En documentos vectoriales complejos de alta fidelidad
Si lo que se necesita es ver la imagen a gran tamaño, imprimir un documento en un escalado concreto y mantener sus proporciones y definición, SVG sería la recomendación para documentos vectoriales complejos de alta fidelidad.
Manipulación de píxeles
En el caso de que necesitemos manipular los pixels de un dibujo con sofisticados algoritmos o crear efectos complejos, elegiríamos sin dudarlo Canvas. Aquí deberemos tener en cuenta que dependiendo de la complejidad del resultado que queremos obtener, los recursos de la CPU podrían verse afectados.
Diagramas/gráficos/mapas
Para este uso, la tecnología recomendada sería SVG y podríamos poner algunos ejemplos: los diagramas de flujo y organigramas interactivos, mapas interactivos y diseño de rutas óptimas, planos de construcción y distribución en planta, esquemas de ingeniería, mapas de ubicación de asientos en líneas aéreas y organización de eventos, gráficos financieros, etc.
Juegos en dos dimensiones
En este caso va a depender de la complejidad del juego, y si bien, ambos podrían realizar lo mismo, la balanza se decanta un poco más del lado de Canvas, aunque muchos juegos podrían estar realizados en un escenario mixto que sacarán todo el rendimiento a cada una de las tecnologías.
| Canvas | SVG |
| Está más orientado al pixel y principalmente es un elemento de imagen que utiliza una API de dibujo. | Está basado en el modelo de objetos similares a los elementos HTML. |
| Su comportamiento es similar a la etiqueta <img>, por tanto es un elemento HTML individual. |
Dispone de múltiples elementos gráficos que forman parte del Modelo de Objeto de Documento (DOM). |
| Los gráficos que se van a mostrar se crean y modifican por programa y mediante scripts | En este caso se generan a partir de las etiquetas y se modifican por CSS o por programa, mediante scripting. |
| El modelo de evento/interacción es muy simple y primitivo exclusivamente a nivel del elemento Canvas, las interacciones se programan de forma manual a partir de las coordenadas del ratón. | El modelo de evento/interacción con el usuario se basa en el objeto a nivel de elementos gráficos primitivos líneas, rectángulos, rutas, etc. |
| El API, en este caso, no soporta accesibilidad. Deben de utilizarse, además del canvas, otras técnicas basadas en markup (etiquetas) | Soporta accesibilidad de forma nativa tanto el markup SVG, como el modelo de objeto. |
| Canvas es un mapa de bits con una interfaz de programación de aplicaciones (API) para gráficos en modo inmediato. Restituye los gráficos directamente dentro de su mapa de bits y no tiene consciencia de las formas que se han dibujado en el lienzo. Lo único que permanece es el mapa de bits resultante. | Se le conoce como un modelo de gráficos en modo retenido. Cuando el elemento <svg> está contenido dentro de HTML5, funciona igual que un bloque inline y forma parte del árbol de documento HTML. |
Tanto Canvas como SVG son componentes muy importantes dentro de una web cada vez más volcada hacia los gráficos avanzados con HTML5. Su uso dependerá del proyecto que queramos realizar.