¿Cuál es la diferencia entre los elementos canvas y SVG?

canvas — imagen rasterizada, se dibuja en tiempo real mediante la API de JS. Se controla con píxeles. Se usa para juegos, gráficos, animación de datos.

SVG — imagen vectorial, se describe en XML. Se escala sin pérdida de calidad. Se controla con objetos (líneas, curvas). Se usa para logotipos, íconos, ilustraciones. Es ideal para diseño adaptable.

Comparación entre Canvas y SVG:

Característica	Canvas	SVG
Tipo de gráficos	Raster (pixel)	Vectorial (basado en XML)
Dibujo	Con API de JavaScript	Descrito en XML, renderizado por el navegador
Control	Controla píxeles individuales	Controla objetos (líneas, figuras, etc.)
Escalabilidad	Pierde calidad al aumentar	Se escala sin pérdida de calidad
Interactividad	Requiere lógica adicional para clics	Integrada a nivel de objetos (a través del DOM)
Rendimiento	Mejor para escenas complejas y dinámicas	Mejor para escenas estáticas o menos complejas
Accesibilidad	Difícil de asegurar	Integrada (a través de atributos y DOM)
Aplicaciones	Juegos, animaciones complejas, visualización de datos	Logotipos, íconos, ilustraciones, gráficos