Qual é a diferença entre os elementos canvas e SVG?

canvas — imagem raster, desenhada em tempo real usando a API JS. Controlada por pixels. Usada para jogos, gráficos, animação de dados.

SVG — imagem vetorial, descrita em XML. Escala sem perda de qualidade. Controlada por objetos (linhas, curvas). Usada para logótipos, ícones, ilustrações. Ideal para design responsivo.

Comparação entre Canvas e SVG:

Característica	Canvas	SVG
Tipo de gráficos	Raster (pixels)	Vetorial (baseado em XML)
Desenho	Com API de JavaScript	Descrito em XML, renderizado pelo navegador
Controle	Controla pixels individuais	Controla objetos (linhas, formas, etc.)
Escalabilidade	Perde qualidade ao aumentar	Escala sem perda de qualidade
Interatividade	Requer lógica adicional para cliques	Integrada ao nível de objetos (via DOM)
Desempenho	Melhor para cenas complexas e dinâmicas	Melhor para cenas estáticas ou menos complexas
Acessibilidade	Difícil de garantir	Integrada (através de atributos e DOM)
Aplicações	Jogos, animações complexas, visualização de dados	Logótipos, ícones, ilustrações, gráficos