¿Cuál es la diferencia entre SVG y HTML5 Canvas?

¿Cuáles son las diferencias entre SVG y HTML5 Canvas? Ambos parecen hacerme lo mismo. Básicamente, ambos dibujan ilustraciones vectoriales utilizando puntos de coordenadas.

¿Qué me estoy perdiendo? ¿Cuáles son las principales diferencias entre SVG y HTML5 Canvas? ¿Por qué debería elegir uno sobre el otro?

Ver Wikipedia: http://en.wikipedia.org/wiki/Canvas_element

SVG es un estándar anterior para dibujar formas en navegadores. Sin embargo, SVG se encuentra en un nivel fundamentalmente superior porque cada forma dibujada se recuerda como un objeto en un gráfico de escena o DOM, que posteriormente se representa en un mapa de bits. Esto significa que si se cambian los atributos de un objeto SVG, el navegador puede volver a renderizar automáticamente la escena.

En el ejemplo anterior, una vez que se dibuja el rectángulo, el sistema olvida el hecho de que fue dibujado. Si se cambiara su posición, sería necesario volver a dibujar toda la escena, incluidos los objetos que podrían haber sido cubiertos por el rectángulo. Pero en el caso de SVG equivalente, uno podría simplemente cambiar los atributos de posición del rectángulo y el navegador determinaría cómo repintarlo. También es posible pintar un lienzo en capas y luego recrear capas específicas.

Las imágenes SVG se representan en XML y las escenas complejas se pueden crear y mantener con herramientas de edición XML.

El gráfico de escena SVG permite que los controladores de eventos se asocien con objetos, por lo que un rectángulo puede responder a un evento onClick. Para obtener la misma funcionalidad con el lienzo, uno debe hacer coincidir manualmente las coordenadas del clic del mouse con las coordenadas del rectángulo dibujado para determinar si se hizo clic en él.

Conceptualmente, el lienzo es un protocolo de nivel inferior sobre el que se podría construir SVG. [Cita requerida] Sin embargo, este no es (normalmente) el caso, son estándares independientes. La situación es complicada porque hay bibliotecas de gráficos de escena para Canvas y SVG tiene algunas funciones de manipulación de mapas de bits.

ACTUALIZACIÓN: uso SVG debido a sus capacidades de lenguaje de marcado: puede ser procesado por XSLT y puede contener otro marcado en sus nodos. De manera similar, puedo mantener SVG en mi marcado (química). Esto me permite manipular atributos SVG (por ejemplo, renderizado) mediante combinaciones de marcado. Esto puede ser posible en Canvas, pero sospecho que es mucho más difícil.

SVG es como un programa de "dibujo". El dibujo se especifica como instrucciones de dibujo para cada forma y se puede cambiar cualquier parte de cualquier forma. Los dibujos están orientados a la forma.

Canvas es como un programa de "pintura". Una vez que los píxeles llegan a la pantalla, ese es tu dibujo. No puede cambiar las formas excepto sobrescribiéndolas con otros píxeles. Las pinturas están orientadas a píxeles.

Poder cambiar dibujos es muy importante para algunos programas; por ejemplo, aplicaciones de dibujo, herramientas de diagramación, etc. Así que SVG tiene una ventaja aquí.

Poder controlar píxeles individuales es importante para algunos programas artísticos.

Obtener un excelente rendimiento de animación para la manipulación del usuario mediante arrastres del mouse es más fácil con Canvas que con SVG.

Un solo píxel en la pantalla de la computadora a menudo consumirá 4 bytes de información y una pantalla de computadora en estos días ocupa varios megabytes. Por lo tanto, Canvas puede ser un inconveniente si desea permitir que el usuario edite una imagen y luego la vuelva a cargar.

Por el contrario, dibujar un puñado de formas que cubran toda la pantalla usando SVG ocupa pocos bytes, se descarga rápidamente y se puede cargar de nuevo fácilmente con las mismas ventajas yendo en esa dirección que cuando baja en la otra dirección. Entonces SVG puede ser más rápido que Canvas.

Google implementó Google Maps con SVG. Eso le da a la aplicación web un rendimiento rápido y un desplazamiento suave.

Resumen de alto nivel de Canvas frente a SVG

Lona

1. Basado en píxeles (.png dinámico)
2. Elemento HTML único (inspeccionar elemento en Developer Tool. Solo puede ver la etiqueta de lienzo)
3. Modificado solo mediante script
4. La interacción del usuario / modelo de evento es granular (x, y)
5. El rendimiento es mejor con una superficie más pequeña, una mayor cantidad de objetos (> 10k) o ambos

SVG

1. Basado en forma
2. Múltiples elementos gráficos, que pasan a formar parte del DOM
3. Modificado mediante script y CSS
4. Se abstrae la interacción del modelo de evento / usuario (rect, ruta)
5. El rendimiento es mejor con un número menor de objetos (<10k), una superficie más grande o ambos

Para conocer la diferencia detallada, lea http://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx

Hay una diferencia en lo que son y en lo que hacen por ti.

• SVG es un formato de documento para gráficos vectoriales escalables.
• Canvas es una API de JavaScript para dibujar gráficos vectoriales en un mapa de bits de un tamaño específico.

Para desarrollar un poco, sobre formato versus API:

Con svg puede ver, guardar y editar el archivo en muchas herramientas diferentes. Con el lienzo, simplemente dibuja y no se retiene nada sobre lo que acaba de hacer, aparte de la imagen resultante en la pantalla. Puede animar ambos, SVG maneja el redibujado por usted con solo mirar los elementos y atributos especificados, mientras que con el lienzo debe volver a dibujar cada marco usted mismo usando la API. Puede escalar ambos, pero SVG lo hace automáticamente, mientras que con el lienzo nuevamente, debe volver a emitir los comandos de dibujo para el tamaño dado.

Dos cosas que me impresionaron más de SVG y Canvas fueron:

Posibilidad de usar Canvas sin DOM, donde SVG depende en gran medida de DOM y a medida que aumenta la complejidad, el rendimiento se ralentiza. Como en el diseño de juegos.

La ventaja de usar SVG sería que la resolución sigue siendo la misma en todas las plataformas que carece de Canvas.

En este sitio se proporcionan muchos más detalles. http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/

Depende absolutamente de su necesidad / requisito.

• Si solo desea mostrar una imagen / gráfico en una pantalla, el enfoque recomendado es lienzo. (El ejemplo es PNG, GIF, BMP, etc.)

• Si desea ampliar las características de sus gráficos, por ejemplo, si pasa el mouse sobre el gráfico y desea hacer zoom en cierta área sin estropear la calidad de visualización, seleccione SVG. (Un buen ejemplo son los archivos AutoCAD, Visio, GIS).

Si desea crear una herramienta de creación de diagrama de flujo dinámico con conector de forma, es mejor seleccionar SVG en lugar de CANVAS.

• Cuando aumenta el tamaño de la pantalla, el lienzo comienza a degradarse a medida que es necesario dibujar más píxeles.

• Cuando la cantidad de objetos aumenta en la pantalla, SVG comienza a
  degradarse ya que los agregamos continuamente al DOM.

También consulte: http://msdn.microsoft.com/en-us/library/gg193983(v=vs.85).aspx

SVG

Basado en el caso de uso, SVG se usa para logotipos, gráficos porque sus gráficos vectoriales se dibujan y se olvidan. Cuando el puerto de visualización cambia, como cambiar el tamaño (o hacer zoom), se ajustará solo y no será necesario volver a dibujarlo.

Lona

El lienzo es un mapa de bits (o ráster) que se realiza pintando píxeles en la pantalla. Se utiliza para desarrollar juegos o experiencia gráfica ( https://www.chromeexperiments.com/webgl ) en un área determinada, pinta píxel y cambia redibujándolo en otro. Dado que es un tipo de ráster, necesitamos volver a dibujar por completo a medida que cambia el puerto de visualización.

Referencia

http://www.sitepoint.com/7-reasons-to-consider-svgs-instead-of-canvas

http://en.wikipedia.org/wiki/WebGL

http://vector-conversions.com/vectorizing/raster_vs_vector.html

SVGes una especificación de un dibujo como un formato de archivo. Un SVG es un documento. Puede intercambiar archivos SVG como archivos HTML. Y además, debido a que los elementos SVG y los elementos HTML comparten la misma API DOM, es posible usar JavaScript para generar un DOM SVG de la misma manera que es posible crear un DOM HTML. Pero no necesita JavaScript para generar archivos SVG. Un simple editor de texto es suficiente para escribir un SVG. Pero necesitas al menos una calculadora para calcular las coordenadas de las formas en el dibujo.

CANVASes solo un área de dibujo. Es necesario utilizar JavaScript para generar el contenido de un lienzo. No se puede intercambiar un lienzo. No es ningún documento. Y los elementos del lienzo no forman parte del árbol DOM. No puede utilizar la API DOM para manipular el contenido de un lienzo. En su lugar, debe utilizar una API de lienzo dedicada para dibujar formas en el lienzo.

La ventaja de a SVGes que puede intercambiar el dibujo como un documento. La ventaja CANVASes que tiene una API de JavaScript menos detallada para generar los contenidos.

Aquí hay un ejemplo, que muestra que puede lograr resultados similares, pero la forma de hacerlo en JavaScript es muy diferente.

// Italic S in SVG

(function () {

  const ns='http://www.w3.org/2000/svg';
  let s = document.querySelector('svg');
  let p = document.createElementNS (ns, 'path');
  p.setAttribute ('id', 'arc');
  p.setAttribute ('d', 'M 0.9 -0.9 a 0.8,0.4 -10 0,0 -0.9,0.9');
  s.appendChild (p);
  let u = document.createElementNS (ns, 'use');
  u.setAttribute ('href', '#arc');
  u.setAttribute ('transform', 'rotate(180)');
  s.appendChild (u);

})();

// Italic S in CANVAS

(function () {

  let c = document.querySelector('canvas');
  let w = c.width = c.clientWidth;
  let h = c.height = c.clientHeight;
  let x = c.getContext('2d');
  x.lineWidth = 0.05 * w;
  x.moveTo (w/2, h/2);
  x.bezierCurveTo (w*0.02, h*0.4,
                   w*0.4, -h*0.02,
                   w*0.95, h*0.05);
  x.moveTo (w/2, h/2);
  x.bezierCurveTo (w*(1-0.02), h*(1-0.4),
                   w*(1-0.4), h*(1+0.02),
                   w*(1-0.95), h*(1-0.05));
  x.stroke();

})();

svg, canvas {
  width: 3em;
  height: 3em;
}

svg {
  vertical-align: text-top;
  stroke: black;
  stroke-width: 0.1;
  fill: none;
}

canvas {
  vertical-align: text-bottom;
}

div {
  float: left;
}

<div><svg viewBox="-1 -1 2 2"></svg>VG</div>
<div>CANVA<canvas></canvas></div>

Como puede ver, el resultado es casi el mismo, pero el código JavaScript es completamente diferente.

SVG se crea con la API DOM utilizando createElement, setAttributey appendChild. Todos los gráficos están en las cadenas de atributos. SVG tiene primitivas más poderosas. El CANVAS, por ejemplo, no tiene nada equivalente a la trayectoria del arco SVG. El ejemplo CANVAS intenta emular el arco SVG con una curva Bezier. En SVG puedes reutilizar elementos para transformarlos. En el CANVAS no se pueden reutilizar elementos. En su lugar, debe escribir una función de JavaScript para llamarla dos veces. SVG tiene un viewBoxque permite usar coordenadas normalizadas, lo que simplifica las rotaciones. En el lienzo tiene que calcular las coordenadas sí mismos basado de la clientWidtheclientHeight. Y puede diseñar todos los elementos SVG con CSS. En CANVAS no puedes diseñar nada con CSS. Dado que SVG es un DOM, puede asignar controladores de eventos a todos los elementos SVG. Los elementos de CANVAS no tienen DOM ni controladores de eventos DOM.

Pero, por otro lado, el código CANVAS es mucho más fácil de leer. No necesita preocuparse por los espacios de nombres XML. Y puede llamar directamente a las funciones gráficas, porque no necesita construir un DOM.

La lección es clara: si desea dibujar rápidamente algunos gráficos, use CANVAS. Si necesita compartir los gráficos, le gusta darle estilo con CSS o desea usar controladores de eventos DOM en sus gráficos, cree un SVG.

agregando a los puntos anteriores:

SVG es liviano para transferir a través de la web en comparación con JPEG, GIF, etc. y también escala extremadamente cuando se cambia de tamaño sin perder la calidad.

SVG
Está basado en modelos de objetos.
Es adecuado para utilizar grandes áreas de renderizado.
SVG proporciona soporte para controladores de eventos.
Se permite la modificación mediante script y CSS.
SVG tiene mejor escalabilidad
SVG está basado en vectores (compuesto de formas).
SVG no es adecuado para gráficos de juegos. SVG no depende de la resolución.
SVG es capaz de realizar animaciones API.
SVG es adecuado para imprimir con alta calidad y cualquier resolución.

Elementos de lienzo

Está basado en píxeles.

Es adecuado para usar renderizado pequeño

Canvas no proporciona ningún recurso para los controladores de eventos.

La modificación solo se permite a través de un script.

Canvas tiene escasa escalabilidad.

Canvas está basado en ráster (compuesto por un píxel).

Canvas es adecuado para gráficos de juegos.

Canvas depende completamente de la resolución.

Canvas no tiene ninguna API para la animación.

El lienzo no es adecuado para imprimir en alta calidad y alta resolución.