Qual é a diferença entre Canvas e SVG?

Canvas é uma API raster para desenhar gráficos em tempo real com JavaScript. Ele desenha pixels no canvas.

SVG (Gráficos Vetoriais Escaláveis) é um formato XML para descrever gráficos vetoriais em 2D. Ele descreve formas, linhas, texto, etc.

Principais diferenças:

• Base: Canvas — pixels, SVG — vetores (descrições matemáticas).
• Forma de desenhar: Canvas — imperativo (comandos de desenho), SVG — declarativo (descrição de elementos).
• Escalabilidade: Canvas escala com perda de qualidade (raster), SVG escala sem perda de qualidade (vetor).
• Desempenho: Canvas é melhor para gráficos dinâmicos, animações, jogos. SVG é melhor para gráficos estáticos, complexos, diagramas.
• Acessibilidade: Elementos SVG são acessíveis via DOM, podem ser modificados com CSS e JavaScript. Canvas desenha a nível de pixel, elementos individuais não são acessíveis.
• Interatividade: Interatividade no SVG é embutida ao nível dos elementos. No Canvas, é necessário rastrear eventos de mouse/toque e determinar em quais pixels eles ocorreram.
• Formato: Canvas é um elemento <canvas> e API JavaScript. SVG é um formato XML independente, que pode ser inserido diretamente em HTML ou usado como arquivo (.svg).

Exemplo de criação de um círculo:

// Canvas
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill();

<!-- SVG -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" fill="red" />
</svg>