Diagramas en SVG frente a HTML5 Canvas

Question

Quiero comenzar un proyecto en el que necesito dibujar diagramas que consisten en rectángulos redondeados conectados con líneas y una acción de JavaScript cuando hago clic en algunos elementos. Esto debe funcionar en todos los navegadores modernos.

Tanto SVG como HTML5 Canvas parecen ser capaces de hacer esto, así que me pregunto qué sería lo mejor.

Además, no quiero reinventar la rueda, así que si hay bibliotecas que hacen tales cosas, me gustaría saber; Eché un vistazo a Raphaël y algunas otras librerías de dibujo de JavaScript, pero no ofrecen todas las funcionalidades que necesito. En la API de Google existe una herramienta de este tipo, pero es muy limitada.

Answer 1

Uso SVG porque — como retenido en modo dibujo API — puede adjuntar detectores de eventos directamente a elementos específicos, y cambiar las propiedades de los elementos específicos y tienen la página mágicamente actualizar. Además, como un formato basado en vectores, es independiente de la resolución.

HTML5 Canvas, en comparación, es una API de dibujo non-retained-mode (también conocida como modo inmediato); cada píxel que dibuja se mezcla con todos los demás píxeles en el lienzo, sin ningún concepto de la forma original. Además, como un formato basado en ráster, necesitaría hacer un trabajo adicional para que los comandos de dibujo se ajusten para diferentes tamaños de visualización.

En general, se debe utilizar la lona si y sólo si es necesario:

1. entorno directo de píxeles (por ejemplo, faltas de definición, efectos brillantes), o
2. directa conseguir de píxeles (por ejemplo, la lectura de un dibujo del usuario para guardar como PNG, sampling portions of the image to detect visual overlaps) o
3. masivo número de 'objetos' que no se moverán mucho o rastrear eventos individuales (SVG puede demorarse en volver a dibujar con miles de objetos).

Tenga en cuenta también que no tiene que elegir solo una u otra. Puedes dibujar SVG en el lienzo. Puede incluir mapas de bits (imágenes) en SVG. Incluso puede incluir HTML5 Canvas en SVG a través del <foreignElement>. Puede tener una sola página HTML con varios lienzos superpuestos y elementos SVG con fondos transparentes, mezclando la salida de cada uno.