HTML 5 Canvas vs. SVG

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

SVG

SVG é uma linguagem que usa XML para descrever gráficos 2D.

SVG é baseado em XML, o que significa que cada elemento no SVG DOM está disponível. Você pode anexar um manipulador 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, toda a cena também precisa ser redesenhada, 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 de resolução
  • Não suporta processadores de eventos
  • Capacidade de renderização de texto fraca
  • Pode salvar a imagem resultante no formato .png ou .jpg
  • Mais adequado para jogos intensivos em imagens, onde muitos objetos são redesenhados frequentemente

SVG

  • Não depende de resolução
  • Suporta processadores de eventos
  • Mais adequado para aplicações que possuam grandes áreas de renderização (por exemplo, Google Maps)
  • Alta complexidade pode reduzir 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 Jogos