Wat is het verschil tussen Canvas en SVG?

Canvas is een raster-API voor het tekenen van grafieken in realtime met JavaScript. Het tekent pixels op het canvas.

SVG (Scalable Vector Graphics) is een XML-formaat voor het beschrijven van tweedimensionale vectorafbeeldingen. Het beschrijft vormen, lijnen, tekst, enz.

Belangrijkste verschillen:

• Basis: Canvas — pixels, SVG — vectoren (wiskundige beschrijvingen).
• Tekenmethode: Canvas — imperatief (tekenopdrachten), SVG — declaratief (beschrijving van elementen).
• Schaalbaarheid: Canvas schaalt met kwaliteitsverlies (raster), SVG schaalt zonder kwaliteitsverlies (vector).
• Prestaties: Canvas is beter voor dynamische grafieken, animaties, games. SVG is beter voor statische, complexe grafieken, diagrammen.
• Toegankelijkheid: SVG-elementen zijn toegankelijk via DOM, kunnen worden gewijzigd met CSS en JavaScript. Canvas tekent op pixelniveau, individuele elementen zijn niet toegankelijk.
• Interactiviteit: Interactiviteit in SVG is ingebouwd op elementniveau. In Canvas moet je muis/touch-events volgen en bepalen op welke pixels ze hebben plaatsgevonden.
• Formaat: Canvas is een <canvas>-element en JavaScript API. SVG is een zelfstandig XML-formaat dat direct in HTML kan worden ingebed of als bestand (.svg) kan worden gebruikt.

Voorbeeld van het maken van een cirkel:

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