HTML 5 Canvas vs. SVG

Canvas y SVG permiten crear gráficos en el navegador, pero son fundamentalmente diferentes.

SVG

SVG es un lenguaje que utiliza XML para describir gráficos 2D.

SVG se basa en XML, lo que significa que cada elemento en el SVG DOM está disponible. Puede agregar procesadores de eventos de JavaScript a algún elemento.

En SVG, cada gráfica dibujada se considera un objeto. Si los atributos del objeto SVG cambian, el navegador puede reproducir automáticamente la gráfica.

Canvas

Canvas se dibuja mediante JavaScript 2D.

Canvas se renderiza píxel a píxel.

En canvas, una vez que se ha dibujado la gráfica, ya no recibe la atención del navegador. Si su posición cambia, toda la escena también debe redibujarse, incluidos cualquier objeto que pueda haber sido cubierto por la gráfica.

Comparación entre Canvas y SVG

La siguiente tabla enumera algunas diferencias entre canvas y SVG.

Canvas

  • Depende de la resolución
  • No admite procesadores de eventos
  • Capacidad de renderizado de texto débil
  • Puede guardar las imágenes de resultados en formato .png o .jpg
  • Más adecuado para juegos intensivos en imágenes, donde muchos objetos se dibujan con frecuencia

SVG

  • No depende de la resolución
  • Soporta procesadores de eventos
  • Más adecuado para aplicaciones que tienen grandes áreas de renderizado, como Google Maps
  • La alta complejidad puede ralentizar la velocidad de renderizado (cualquier aplicación que utilice excesivamente DOM no es rápida)
  • No adecuado para aplicaciones de juegos