Canvas vs. SVG no HTML5

Canvas e SVG permitem que você crie gráficos no navegador, mas eles são fundamentalmente diferentes.

SVG

SVG é uma linguagem usada para descrever gráficos 2D usando XML.

SVG é baseado em XML, o que significa que cada elemento no SVG DOM está disponível. Você pode anexar manipuladores de eventos JavaScript a um elemento.

Em SVG, cada gráfico desenhado é tratado como um objeto. Se as propriedades do objeto SVG mudarem, o navegador pode automaticamente redesenhar o gráfico.

Canvas

O canvas é desenhado usando JavaScript para gráficos 2D.

O canvas é renderizado pixel a pixel.

No canvas, uma vez que o gráfico for desenhado, ele não continua a receber atenção do navegador. Se sua posição mudar, todo o cenário também precisa ser redesenhado, incluindo quaisquer objetos que possam ter sido cobertos pelo gráfico.

Comparação entre Canvas e SVG

A tabela a seguir lista algumas diferenças entre canvas e SVG.

Canvas

  • Depende da resolução
  • Não suporta manipuladores de eventos
  • Baixa capacidade de renderização de texto
  • Pode salvar as imagens resultantes em formato .png ou .jpg
  • Mais adequado para jogos gráficos intensivos, onde muitos objetos são redesenhados frequentemente

SVG

  • Não depende da resolução
  • Suporta manipuladores de eventos
  • Mais adequado para aplicativos com grandes áreas de renderização (por exemplo, Google Maps)
  • Alta complexidade pode diminuir a velocidade de renderização (qualquer aplicativo que faça uso excessivo do DOM não é rápido)
  • Não Adequado para Aplicações de Jogo