El elemento Canvas de HTML5 vs SVG vs div

Para agregar a esto, he estado haciendo una aplicación de diagrama, e inicialmente empecé con canvas. El diagrama consta de muchos nodos, y pueden ser bastante grandes. El usuario puede arrastrar elementos en el diagrama.

Lo que encontré fue que en mi Mac, para imágenes muy grandes, SVG es superior. Tengo un MacBook Pro 2013 13" Retina, y funciona el violín a continuación bastante bien. La imagen es de 6000x6000 píxeles, y tiene 1000 objetos. Una construcción similar en canvas era imposible de animar para me cuando el usuario estaba arrastrando objetos en el diagrama.

En las pantallas modernas también tienes que tener en cuenta diferentes resoluciones, y aquí SVG te da todo esto de forma gratuita.

Violín: http://jsfiddle.net/knutsi/PUcr8/16/

Pantalla completa: http://jsfiddle.net/knutsi/PUcr8/16/embedded/result /

var wiggle_factor = 0.0;
nodes = [];

// create svg:
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute('style', 'border: 1px solid black');
svg.setAttribute('width', '6000');
svg.setAttribute('height', '6000');

svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink",
    "http://www.w3.org/1999/xlink");

document.body.appendChild(svg);


function makeNode(wiggle) {
    var node = document.createElementNS("http://www.w3.org/2000/svg", "g");
    var node_x = (Math.random() * 6000);
    var node_y = (Math.random() * 6000);
    node.setAttribute("transform", "translate(" + node_x + ", " + node_y +")");

    // circle:
    var circ = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    circ.setAttribute( "id","cir")
    circ.setAttribute( "cx", 0 + "px")
    circ.setAttribute( "cy", 0 + "px")
    circ.setAttribute( "r","100px");
    circ.setAttribute('fill', 'red');
    circ.setAttribute('pointer-events', 'inherit')

    // text:
    var text = document.createElementNS("http://www.w3.org/2000/svg", "text");
    text.textContent = "This is a test! ÅÆØ";

    node.appendChild(circ);
    node.appendChild(text);

    node.x = node_x;
    node.y = node_y;

    if(wiggle)
        nodes.push(node)
    return node;
}

// populate with 100 nodes:
for(var i = 0; i < 1000; i++) {
    var node = makeNode(true);
    svg.appendChild(node);
}

// make  one mapped to mouse:
var bnode = makeNode(false);
svg.appendChild(bnode);

document.body.onmousemove=function(event){
    bnode.setAttribute("transform","translate(" +
        (event.clientX + window.pageXOffset) + ", " +
        (event.clientY + window.pageYOffset) +")");
};

setInterval(function() {
    wiggle_factor += 1/60;
    nodes.forEach(function(node) {

        node.setAttribute("transform", "translate(" 
                          + (Math.sin(wiggle_factor) * 200 + node.x) 
                          + ", " 
                          + (Math.sin(wiggle_factor) * 200 + node.y) 
                          + ")");        
    })
},1000/60);

Conocer las diferencias entre SVG y Canvas sería útil para seleccionar el correcto.

Lienzo

• Depende de la resolución
• No hay soporte para controladores de eventos
• Capacidades de representación de texto pobres
• Puede guardar la imagen resultante como .png or .jpg
• Muy adecuado para juegos gráficos intensivos

SVG

• Resolución independiente
• Soporte para controladores de eventos
• Más adecuado para aplicaciones con grandes áreas de representación (Google Maps)
• Renderizado lento si es complejo (cualquier cosa que use mucho el DOM será lento)
• No es adecuado para la aplicación del juego

Estoy de acuerdo con las conclusiones de Simon Sarris:

He comparado algunas visualizaciones en Protovis (SVG) con Processingjs (Canvas) que muestran > 2000 puntos y processingjs es mucho más rápido que protovis.

El manejo de eventos con SVG es, por supuesto, mucho más fácil porque puede adjuntarlos a los objetos. En Canvas tienes que hacerlo manualmente (comprobar la posición del ratón, etc.) pero para una interacción simple no debería ser difícil.

También está el dojo.gfx biblioteca de la dojo toolkit. Proporciona una capa de abstracción y puede especificar el renderizador (SVG, Canvas, Silverlight). Eso también podría ser una opción viable, aunque no se cuánta sobrecarga agrega la capa de abstracción adicional, pero hace que sea fácil codificar interacciones y animaciones y es independiente del renderizador.

Aquí hay algunos interesantes puntos de referencia:

• http://svbreakaway.info/tp.php#jan21a
• http://www.eleqtriq.com/2010/02/canvas-svg-flash /
• http://smus.com/canvas-vs-svg-performance /

Solo mis 2 centavos con respecto a la opción divs.

Famous/Infamous y SamsaraJS (y posiblemente otros) usan divs no anidados absolutamente posicionados (con contenido HTML/CSS no trivial), combinados con matrix2d/matrix3d para el posicionamiento y las transformaciones 2D/3D, y logran una estabilidad de 60 FPS en hardware móvil moderado, por lo que argumentaría en contra de que divs sea una opción lenta.

Hay un montón de grabaciones de pantalla en Youtube y en otros lugares, de material 2D/3D de alto rendimiento que se ejecuta en el navegador con todo siendo un elemento DOM en el que puede Inspeccionar el elemento, a 60 FPS (mezclado con WebGL para ciertos efectos, pero no para la parte principal del renderizado).

Para sus propósitos, recomiendo usar SVG, ya que obtiene eventos DOM, como el manejo del mouse, incluyendo arrastrar y soltar, incluido, no tiene que implementar su propio redibujo y no tiene que realizar un seguimiento del estado de sus objetos. Use Canvas cuando tenga que manipular imágenes de mapa de bits y use un div regular cuando quiera manipular cosas creadas en HTML. En cuanto al rendimiento, encontrará que los navegadores modernos ahora están acelerando los tres, pero que canvas ha recibido la mayor parte atención hasta ahora. Por otro lado, lo bien que escribes tu javascript es fundamental para obtener el máximo rendimiento con canvas, por lo que todavía recomendaría usar SVG.

Aunque todavía hay algo de verdad en la mayoría de las respuestas anteriores, creo que merecen una actualización:

A lo largo de los años, el rendimiento de SVG ha mejorado mucho y ahora hay transiciones y animaciones CSS aceleradas por hardware para SVG que no dependen del rendimiento de JavaScript en absoluto. Por supuesto, el rendimiento de JavaScript también ha mejorado y con él el rendimiento de Canvas, pero no tanto como SVG mejoró. También hay un "niño nuevo" en el bloque que está disponible en casi todos los navegadores actuales y eso es WebGL . Para usar las mismas palabras que Simon usó anteriormente: supera a Canvas y SVG sin duda. Sin embargo, esto no significa que deba ser la tecnología de referencia, ya que es una bestia para trabajar y solo es más rápido en casos de uso muy específicos.

En mi humilde opinión para la mayoría de los casos de uso actuales, SVG ofrece la mejor relación rendimiento/usabilidad. Las visualizaciones deben ser realmente complejas (con respecto al número de elementos) y realmente simples al mismo tiempo (por elemento) para que Canvas y aún más WebGL realmente brillen.

En esta respuesta a una pregunta similarestoy proporcionando más detalles, por qué creo que la combinación de las tres tecnologías a veces es la mejor opción que tiene.

Mientras busco en Google, encuentro una buena explicación sobre el uso y la compresión de SVG y Canvas en http://teropa.info/blog/2016/12/12/graphics-in-angular-2.html

Espero que ayude:

• SVG, al igual que HTML, utiliza representación retenida: Cuando queremos dibujar un rectángulo en la pantalla, utilizamos declarativamente un elemento en nuestro DOM. El navegador dibujará un rectángulo, pero también creará un SVGRectElement en memoria objeto que representa el rectángulo. Este objeto es algo que se queda para que lo manipulemos-es conservar. Podemos asignarle diferentes posiciones y tamaños con el tiempo. También podemos adjuntar oyentes de eventos para que sea interactivo.
• Canvas usa representación inmediata: Cuando dibujamos un rectángulo, el navegador renderiza inmediatamente un rectángulo en la pantalla, pero hay nunca va a haber ningún "objeto rectángulo" que lo represente. Hay sólo un montón de píxeles en el búfer de lienzo. No podemos mover el rectángulo. Sólo podemos dibujar otro rectángulo. No podemos responder a clics u otros eventos en el rectángulo. Solo podemos responder a eventos en el lienzo completo .

Así que canvas es una API más restrictiva y de bajo nivel que SVG. Pero hay un al revés de eso, que es que con canvas puedes hacer más con el la misma cantidad de recursos. Porque el navegador no tiene que crear y mantener el objeto en memoria gráfico de todas las cosas que tenemos dibujado, necesita menos memoria y recursos de computación para dibujar el mismo escena visual. Si usted tiene una visualización muy grande y compleja a dibujar, Lienzo puede ser su boleto.