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

¿Cuáles son las diferencias entre SVG y HTML5 Canvas? Ambos parecen hacer lo mismo para mí. Básicamente, ambos dibujan ilustraciones vectoriales usando 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 está en un nivel fundamentalmente más alto porque cada forma dibujada se recuerda como un objeto en un gráfico de escena o DOM, que posteriormente se representa en un bitmap. 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, se debería 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 volver a pintarlo. También es posible pintar un canvas en capas y luego recrear capas específicas.

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

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

Conceptualmente, el canvas es un protocolo de nivel inferior sobre el que se puede 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 escenas para Canvas, y SVG tiene algunas funciones de manipulación de mapas de bits.

ACTUALIZACIÓN: utilizo SVG debido a sus habilidades de lenguaje de marcado: puede ser procesado por XSLT y puede contener otro marcado en sus nodos. Del mismo modo, puedo mantener SVG en mi marcado (química). Esto me permite manipular los atributos de SVG (por ejemplo, representación) mediante combinaciones de marcado. Esto puede ser posible en Canvas, pero sospecho que es mucho más difícil.

SVG es como un progtwig de “sorteo”. 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 progtwig de “pintura”. Una vez que los píxeles golpean 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.

Ser capaz de cambiar dibujos es muy importante para algunos progtwigs; por ejemplo, redactar aplicaciones, herramientas de diagtwigción, etc. Así que SVG tiene una ventaja aquí.

Ser capaz de controlar píxeles individuales es importante para algunos progtwigs artísticos.

Obtener un gran rendimiento de animación para la manipulación del usuario a través de arrastres de ratón es más fácil con Canvas que con SVG.

Un solo píxel en la pantalla de la computadora a menudo consume 4 bytes de información y una pantalla de computadora en estos días toma varios megabytes. Por lo tanto, Canvas podría ser un inconveniente si desea permitir que el usuario edite una imagen y luego cargarla de nuevo.

Por el contrario, dibujar un puñado de formas que cubran toda la pantalla usando SVG toma pocos bytes, se descarga rápidamente y se puede subir de nuevo fácilmente con las mismas ventajas 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 increíble y un desplazamiento suave.

Resumen de alto nivel de Canvas vs. SVG

Lona

  1. Basado en píxeles (.png dynamic)
  2. Elemento HTML único. (Inspeccione el elemento en Developer Tool. Puede ver solo la etiqueta canvas)
  3. Modificado a través de solo script
  4. La interacción entre el modelo de evento y el usuario 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. Forma basada
  2. Múltiples elementos gráficos, que se vuelven parte del DOM
  3. Modificado a través de script y CSS
  4. La interacción entre el modelo de evento y el usuario está resumida (rect, path)
  5. El rendimiento es mejor con un número menor de objetos (<10k), una superficie más grande o ambos

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

Hay una diferencia entre lo que son y 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 a un bitmap de un tamaño específico.

Para elaborar un poco, en formato versus API:

Con svg puedes ver, guardar y editar el archivo en muchas herramientas diferentes. Con el canvas, 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 rediseño solo mirando los elementos y atributos especificados, mientras que con el canvas debe volver a dibujar cada cuadro usando la API. Puede escalar ambos, pero SVG lo hace de forma automática, mientras que con canvas de nuevo, debe volver a emitir los comandos de dibujo para el tamaño dado.

Dos cosas que más me impactaron para SVG y Canvas fueron,

Posibilidad de usar Canvas sin el DOM, donde como SVG depende en gran medida de DOM y a medida que aumenta la complejidad, el rendimiento se ralentiza. Al igual que en el diseño del juego.

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

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

Es absolutamente depende de su necesidad / requisito.

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

  • Si desea ampliar las características de sus gráficos, por ejemplo, si pasa el mouse por encima del gráfico y desea ampliar el área sin estropear la calidad de visualización, seleccione SVG. (Buen ejemplo es AutoCAD, Visio, archivos GIS).

Si desea construir una herramienta creadora de diagtwig de flujo dynamic con conector de forma, es mejor seleccionar SVG en lugar de CANVAS.

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

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

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

SVG

Según el caso de uso, SVG se usa para logotipos, gráficos porque dibuja gráficos vectoriales y se olvidó de ellos. Cuando el puerto de visualización cambie como el redimensionamiento (o el zoom) se ajustará solo y no será necesario volver a dibujar.

Lona

El canvas es bitmap (o raster) que se hace pintando píxeles en la pantalla. Se usa para desarrollar juegos o experiencia gráfica ( https://www.chromeexperiments.com/webgl ) en un área determinada, pinta píxel y cambia por redibujar otro. Como es un tipo de ráster, tenemos que 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

SVG es 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, dado que los elementos SVG y los elementos HTML comparten la misma API DOM, es posible usar JavaScript para generar un DOM SVG del mismo modo que es posible crear un DOM HTML. Pero no necesita JavaScript para generar el archivo SVG. Un editor de texto simple es suficiente para escribir un SVG. Pero necesita al menos una calculadora para calcular las coordenadas de las formas en el dibujo.

CANVAS es solo un área de dibujo. Es necesario usar JavaScript para generar los contenidos de un canvas. No puedes intercambiar un canvas. No es un documento. Y los elementos del canvas no son parte del árbol DOM. No puede usar la API DOM para manipular el contenido de un canvas. En su lugar, debe usar una API de canvas dedicada para dibujar formas en el canvas.

La ventaja de un SVG es que puede intercambiar el dibujo como un documento. La ventaja de CANVAS es que tiene una API de JavaScript menos descriptiva 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; } 
 
VG
CANVA

añadiendo 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 al cambiar el tamaño sin perder la calidad.