examples - svg html5 ejemplos

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

Question

¿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?

Answer 1

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/

Answer 2

Es absolutamente depende de su necesidad / requisito.

• Si solo desea mostrar una imagen / gráfico en una pantalla, entonces el enfoque recomendado es lienzo. (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 diagrama de flujo dinámico con conector de forma, es mejor seleccionar SVG en lugar de CANVAS.

• Cuando el tamaño de la pantalla aumenta, el lienzo 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

Answer 3

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 mapa de bits 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 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 rediseño solo mirando los elementos y atributos especificados, mientras que con el lienzo 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.

Answer 4

Resumen de alto nivel de Canvas vs. SVG

Lona

1. Basado en píxeles (.png dinámico)
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

Answer 5

SVG es como un programa 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 programa 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 programas; por ejemplo, redactar aplicaciones, herramientas de diagramación, etc. Así que SVG tiene una ventaja aquí.

Ser capaz de controlar píxeles individuales es importante para algunos programas 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.

Answer 6

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 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, 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 lienzo 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 lienzo, 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 lienzo 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.

Answer 7

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.

Answer 8

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 lienzo. No puedes intercambiar un lienzo. No es un documento. Y los elementos del lienzo no son parte del árbol DOM. No puede usar la API DOM para manipular el contenido de un lienzo. En su lugar, debe usar una API de lienzo dedicada para dibujar formas en el lienzo.

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;
}

<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 , setAttribute y appendChild . Todos los gráficos están en las cadenas de atributos. SVG tiene primitivas más potentes. El CANVAS, por ejemplo, no tiene nada equivalente a la ruta de arco SVG. El ejemplo de CANVAS intenta emular el arco SVG con una curva Bezier. En SVG puedes reutilizar elementos para transformarlos. En el CANVAS no puedes reutilizar elementos. En su lugar, debe escribir una función de JavaScript para llamarla dos veces. SVG tiene un viewBox que permite utilizar coordenadas normalizadas, lo que simplifica las rotaciones. En el CANVAS usted tiene que calcular las coordenadas usted mismo en función de clientWidth y clientHeight . Y puede aplicar estilo a todos los elementos SVG con CSS. En el CANVAS no se puede diseñar nada con CSS. Como SVG es un DOM, puede asignar controladores de eventos a todos los elementos SVG. Los elementos en el CANVAS no tienen controladores de eventos DOM ni 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 de gráficos, porque no necesita construir un DOM.

La lección es clara: si quiere dibujar algunos gráficos rápidamente, use el LONA. Si necesita compartir los gráficos, desea diseñarlos con CSS o desea usar los manejadores de eventos DOM en sus gráficos, cree un SVG.

Answer 9

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 lienzo es mapa de bits (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