Каква е разликата между Canvas и SVG?

Canvas е растров API за рисуване на графика на живо с помощта на JavaScript. Той рисува пиксели върху платното.

SVG (Мащабируема векторна графика) е XML формат за описание на двумерна векторна графика. Той описва фигури, линии, текст и др.

Основни разлики:

• Основи: Canvas — пиксели, SVG — вектори (математически описания).
• Начин на рисуване: Canvas — императивен (команди за рисуване), SVG — декларативен (описание на елементи).
• Мащабиране: Canvas се мащабира с загуба на качество (растер), SVG — без загуба на качество (вектор).
• Производителност: Canvas е по-подходящ за динамична графика, анимации, игри. SVG — за статична, сложна графика, диаграми.
• Достъпност: Елементите на SVG са достъпни чрез DOM, могат да се променят с CSS и JavaScript. Canvas рисува на пикселен ниво, отделните елементи не са достъпни.
• Интерактивност: Интерактивността в SVG е вградена на ниво елементи. В Canvas трябва да следите събитията на мишката/докосването и да определяте към кои пиксели са приложени.
• Формат: Canvas — елемент <canvas> и API на JavaScript. SVG — самостоятелен XML формат, който може да се вмъква директно в HTML или да се използва като файл (.svg).

Пример за създаване на кръг:

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