Quelle est la différence entre Canvas et SVG?

Canvas est une API raster pour dessiner des graphiques en temps réel avec JavaScript. Il dessine des pixels sur le canvas.

SVG (Graphiques Vectoriels Scalables) est un format XML pour décrire des graphiques vectoriels en 2D. Il décrit des formes, des lignes, du texte, etc.

Principales différences :

• Base : Canvas — pixels, SVG — vecteurs (descriptions mathématiques).
• Méthode de dessin : Canvas — impérative (commandes de dessin), SVG — déclarative (description des éléments).
• Mise à l’échelle : Canvas se met à l’échelle avec perte de qualité (raster), SVG se met à l’échelle sans perte de qualité (vectoriel).
• Performance : Canvas est meilleur pour les graphiques dynamiques, animations, jeux. SVG est meilleur pour les graphiques statiques, complexes, diagrammes.
• Accessibilité : Les éléments SVG sont accessibles via le DOM, ils peuvent être modifiés avec CSS et JavaScript. Canvas dessine au niveau pixel, les éléments individuels ne sont pas accessibles.
• Interactivité : L’interactivité dans SVG est intégrée au niveau des éléments. Sur Canvas, il faut suivre les événements de souris/touch et déterminer sur quels pixels ils ont été déclenchés.
• Format : Canvas est un élément <canvas> et une API JavaScript. SVG est un format XML autonome, qui peut être inséré directement dans HTML ou utilisé comme fichier (.svg).

Exemple de création d’un cercle :

// 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>