Koja je razlika između Canvas i SVG?

Canvas je raster API za crtanje grafike u stvarnom vremenu pomoću JavaScripta. Crta piksele na platnu.

SVG (Skalabilna vektorska grafika) je XML format za opisivanje dvodimenzionalne vektorske grafike. Opisuje oblike, linije, tekst itd.

Glavne razlike:

• Osnova: Canvas — pikseli, SVG — vektori (matematički opisi).
• Način crtanja: Canvas — imperativni (naredbe za crtanje), SVG — deklarativni (opis elemenata).
• Skaliranje: Canvas se skalira s gubitkom kvalitete (rastr), SVG se skalira bez gubitka kvalitete (vektor).
• Performanse: Canvas je bolji za dinamičku grafiku, animacije, igre. SVG je bolji za statičku, složenu grafiku, dijagrame.
• Pristupačnost: SVG elementi su dostupni putem DOM-a, mogu se mijenjati pomoću CSS-a i JavaScript-a. Canvas crta na razini piksela, pojedinačni elementi nisu dostupni.
• Interaktivnost: Interaktivnost u SVG-u je ugrađena na razini elemenata. Na Canvas-u, treba pratiti događaje miša/touch i odrediti na koje su piksle oni utjecali.
• Format: Canvas je element <canvas> i API JavaScript-a. SVG je samostalni XML format koji se može izravno umetnuti u HTML ili koristiti kao datoteka (.svg).

Primjer stvaranja kruga:

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