¿Cuál es la diferencia entre Canvas y SVG?

Canvas es una API raster para dibujar gráficos en tiempo real con JavaScript. Dibuja píxeles en el lienzo.

SVG (Gráficos Vectoriales Escalables) es un formato XML para describir gráficos vectoriales en 2D. Describe figuras, líneas, texto, etc.

Diferencias principales:

• Base: Canvas — píxeles, SVG — vectores (descripciones matemáticas).
• Forma de dibujar: Canvas — imperativo (comandos de dibujo), SVG — declarativo (descripción de elementos).
• Escalado: Canvas se escala con pérdida de calidad (raster), SVG se escala sin pérdida de calidad (vector).
• Rendimiento: Canvas es mejor para gráficos dinámicos, animaciones, juegos. SVG es mejor para gráficos estáticos, complejos, diagramas.
• Accesibilidad: Los elementos SVG son accesibles a través del DOM, se pueden modificar con CSS y JavaScript. Canvas dibuja a nivel de píxel, los elementos individuales no son accesibles.
• Interactividad: La interactividad en SVG está integrada a nivel de elementos. En Canvas, hay que rastrear eventos de mouse/touch y determinar en qué píxeles ocurrieron.
• Formato: Canvas es un elemento <canvas> y API de JavaScript. SVG es un formato XML independiente, que se puede insertar directamente en HTML o usar como archivo (.svg).

Ejemplo de creación de un 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>