Qual é a diferença entre SVG e HTML5 Canvas?

Quais são as diferenças entre SVG e HTML5 Canvas? Ambos parecem fazer o mesmo comigo. Basicamente, ambos desenham arte vetorial usando pontos de coordenadas.

o que estou perdendo? Quais são as principais diferenças entre o SVG e o HTML5 Canvas? Por que devo escolher um em vez do outro?

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

SVG é um padrão anterior para desenhar formas em navegadores. No entanto, o SVG está em um nível fundamentalmente mais alto porque cada forma desenhada é lembrada como um objeto em um gráfico de cena ou DOM, que é subsequentemente renderizado em um mapa de bits. Isso significa que se os atributos de um objeto SVG forem alterados, o navegador pode renderizar novamente a cena automaticamente.

No exemplo acima, uma vez que o retângulo é desenhado, o fato de ter sido desenhado é esquecido pelo sistema. Se sua posição fosse alterada, a cena inteira precisaria ser redesenhada, incluindo quaisquer objetos que pudessem estar cobertos pelo retângulo. Mas no caso SVG equivalente, pode-se simplesmente alterar os atributos de posição do retângulo e o navegador determina como repintá-lo. Também é possível pintar uma tela em camadas e, em seguida, recriar camadas específicas.

As imagens SVG são representadas em XML e cenas complexas podem ser criadas e mantidas com ferramentas de edição XML.

O gráfico de cena SVG permite que os manipuladores de eventos sejam associados a objetos, portanto, um retângulo pode responder a um evento onClick. Para obter a mesma funcionalidade com a tela, deve-se combinar manualmente as coordenadas do clique do mouse com as coordenadas do retângulo desenhado para determinar se ele foi clicado.

Conceitualmente, o canvas é um protocolo de nível inferior no qual o SVG pode ser construído. [Carece de fontes?] No entanto, este não é (normalmente) o caso - eles são padrões independentes. A situação é complicada porque existem bibliotecas de gráficos de cena para Canvas e o SVG tem algumas funcionalidades de manipulação de mapas de bits.

ATUALIZAÇÃO: Eu uso SVG por causa de suas habilidades de linguagem de marcação - ele pode ser processado por XSLT e pode conter outras marcações em seus nós. Da mesma forma, posso manter SVG em minha marcação (química). Isso me permite manipular atributos SVG (por exemplo, renderização) por combinações de marcação. Isso pode ser possível no Canvas, mas suspeito que seja muito mais difícil.

SVG é como um programa de "desenho". O desenho é especificado como instruções de desenho para cada forma e qualquer parte de qualquer forma pode ser alterada. Os desenhos são orientados para a forma.

O Canvas é como um programa de "pintura". Quando os pixels atingem a tela, esse é o seu desenho. Você não pode alterar as formas, exceto sobrescrevendo-as com outros pixels. As pinturas são orientadas por pixels.

Poder alterar desenhos é muito importante para alguns programas; por exemplo, aplicativos de desenho, ferramentas de diagramação, etc. Portanto, o SVG tem uma vantagem aqui.

Ser capaz de controlar pixels individuais é importante para alguns programas artísticos.

Obter um ótimo desempenho de animação para manipulação do usuário por meio do movimento do mouse é mais fácil com o Canvas do que com o SVG.

Um único pixel na tela do computador costuma consumir 4 bytes de informação, e uma tela de computador atualmente leva vários megabytes. Portanto, o Canvas pode ser inconveniente se você quiser permitir que o usuário edite uma imagem e depois carregue-a novamente.

Por outro lado, desenhar um punhado de formas que cobrem a tela inteira usando SVG ocupa alguns bytes, é baixado rapidamente e pode ser carregado novamente facilmente com as mesmas vantagens indo nessa direção como quando desce na outra direção. Portanto, o SVG pode ser mais rápido do que o Canvas.

O Google implementou o Google Maps com SVG. Isso dá ao aplicativo da web seu desempenho rápido e rolagem suave.

Resumo de alto nível do Canvas vs. SVG

Tela de pintura

1. Baseado em pixels (Dynamic .png)
2. Elemento HTML único. (Inspecionar elemento na ferramenta Desenvolvedor. Você pode ver apenas a tag de tela)
3. Modificado apenas por meio de script
4. O modelo de evento / interação do usuário é granular (x, y)
5. O desempenho é melhor com superfície menor, um número maior de objetos (> 10k) ou ambos

SVG

1. Com base na forma
2. Vários elementos gráficos, que se tornam parte do DOM
3. Modificado por meio de script e CSS
4. O modelo de evento / interação do usuário é abstraído (ret, caminho)
5. O desempenho é melhor com menor número de objetos (<10k), uma superfície maior ou ambos

Para obter as diferenças detalhadas, leia http://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx

Há uma diferença entre o que eles são e o que fazem por você.

• SVG é um formato de documento para gráficos vetoriais escalonáveis.
• Canvas é uma API javascript para desenhar gráficos vetoriais em um bitmap de tamanho específico.

Para elaborar um pouco, sobre formato versus API:

Com o svg você pode ver, salvar e editar o arquivo em muitas ferramentas diferentes. Com a tela, você apenas desenha e nada é retido sobre o que você acabou de fazer, exceto a imagem resultante na tela. Você pode animar ambos, o SVG lida com o redesenho para você apenas observando os elementos e atributos especificados, enquanto com a tela você precisa redesenhar cada quadro usando a API. Você pode dimensionar ambos, mas o SVG faz isso automaticamente, enquanto com o canvas novamente, você deve reemitir os comandos de desenho para o tamanho determinado.

Duas coisas que mais me impressionaram para SVG e Canvas foram,

Capacidade de usar o Canvas sem o DOM, já que o SVG depende muito do DOM e à medida que a complexidade aumenta, o desempenho fica mais lento. Como no design de jogos.

A vantagem de usar SVG seria que a resolução permanece a mesma em todas as plataformas que não têm o Canvas.

Mais detalhes são fornecidos neste site. http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/

Depende absolutamente da sua necessidade / exigência.

• Se você deseja apenas mostrar uma imagem / gráfico em uma tela, a abordagem recomendada é a tela. (O exemplo é PNG, GIF, BMP etc.)

• Se você deseja estender os recursos de seus gráficos, por exemplo, se você passar o mouse sobre o gráfico, deseja ampliar determinada área sem prejudicar a qualidade de exibição, selecione SVG. (Bons exemplos são os arquivos AutoCAD, Visio, GIS).

Se você deseja construir uma ferramenta de criação de diagrama de fluxo dinâmico com conector de forma, é melhor selecionar SVG em vez de CANVAS.

• Quando o tamanho da tela aumenta, a tela começa a se degradar à medida que mais pixels precisam ser desenhados.

• Quando o número de objetos aumenta na tela, o SVG começa a
  degradar à medida que os adicionamos continuamente ao DOM.

Consulte também: http://msdn.microsoft.com/en-us/library/gg193983(v=vs.85).aspx

SVG

Com base no caso de uso, o SVG é usado para logotipos, gráficos porque seus gráficos vetoriais você desenha e se esquece deles. Quando a porta de visualização muda como redimensionamento (ou zoom), ela se ajusta e não há necessidade de redesenhar.

Tela de pintura

Canvas é um bitmap (ou rasterizado) feito pintando pixels na tela. Ele é usado para desenvolver jogos ou experiência gráfica ( https://www.chromeexperiments.com/webgl ) em uma determinada área ele pinta pixel e muda redesenhando-o em outra. Como é um tipo raster, precisamos redesenhar inteiramente à medida que a porta de visualização muda.

Referência

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é uma especificação de um desenho como um formato de arquivo. Um SVG é um documento. Você pode trocar arquivos SVG como arquivos HTML. Além disso, como os elementos SVG e HTML compartilham a mesma API DOM, é possível usar JavaScript para gerar um DOM SVG da mesma maneira que é possível criar um DOM HTML. Mas você não precisa de JavaScript para gerar o arquivo SVG. Um editor de texto simples é suficiente para escrever um SVG. Mas você precisa de pelo menos uma calculadora para calcular as coordenadas das formas no desenho.

CANVASé apenas uma área de desenho. É necessário usar JavaScript para gerar o conteúdo de uma tela. Você não pode trocar uma tela. Não é um documento. E os elementos da tela não fazem parte da árvore DOM. Você não pode usar a API DOM para manipular o conteúdo de uma tela. Em vez disso, você deve usar uma API de tela dedicada para desenhar formas na tela.

A vantagem de a SVGé que você pode trocar o desenho como um documento. A vantagem CANVASé que tem uma API JavaScript menos detalhada para gerar o conteúdo.

Aqui está um exemplo, que mostra que você pode obter resultados semelhantes, mas a maneira como fazê-lo em JavaScript é muito 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 você pode ver, o resultado é quase o mesmo, mas o código JavaScript é completamente diferente.

O SVG é criado com a API DOM usando createElement, setAttributee appendChild. Todos os gráficos estão nas cadeias de atributos. SVG tem primitivas mais poderosas. O CANVAS, por exemplo, não tem nada equivalente ao caminho do arco SVG. O exemplo CANVAS tenta emular o arco SVG com uma curva de Bezier. Em SVG você pode reutilizar elementos para transformá-los. No CANVAS você não pode reaproveitar elementos. Em vez disso, você precisa escrever uma função JavaScript para chamá-la duas vezes. O SVG tem um viewBoxque permite usar coordenadas normalizadas, o que simplifica as rotações. No CANVAS, você deve calcular as coordenadas com base no clientWidtheclientHeight. E você pode estilizar todos os elementos SVG com CSS. No CANVAS você não pode estilizar nada com CSS. Como o SVG é um DOM, você pode atribuir manipuladores de eventos a todos os elementos SVG. Os elementos da CANVAS não têm DOM e nem manipuladores de eventos DOM.

Mas, por outro lado, o código CANVAS é muito mais fácil de ler. Você não precisa se preocupar com espaços de nomes XML. E você pode chamar diretamente as funções gráficas, porque você não precisa construir um DOM.

A lição é clara: se você quiser desenhar alguns gráficos rapidamente, use a tela CANVAS. Se você precisa compartilhar os gráficos, como estilizá-los com CSS ou deseja usar manipuladores de eventos DOM em seus gráficos, construa um SVG.

adicionando aos pontos acima:

SVG é leve para transferência pela web quando comparado a JPEG, GIF etc e também escalável extremamente quando redimensionado sem perder a qualidade.

SVG
É baseado em um modelo de objeto.
É adequado para usar grandes áreas de renderização.
O SVG fornece qualquer suporte para manipuladores de eventos.
A modificação é permitida por meio de script e CSS.
SVG tem melhor escalabilidade O
SVG é baseado em vetores (composto de formas).
SVG não é adequado para gráficos de jogos. O SVG não depende da resolução.
SVG é compatível com animação API.
O SVG é adequado para impressão com alta qualidade e qualquer resolução.

Elementos de tela

É baseado em pixels.

É adequado para usar renderização pequena

O Canvas não oferece nenhum recurso para manipuladores de eventos.

A modificação é permitida apenas por meio de script.

O Canvas tem escalabilidade ruim.

O Canvas é baseado em Raster (composto de um pixel).

O Canvas é adequado para gráficos de jogos.

O canvas é totalmente dependente da resolução.

O Canvas não tem API para animação.

A tela não é adequada para impressão de alta qualidade e alta resolução.