Ответ
Векторная графика состоит из математических формул, описывающих линии, кривые и фигуры. Она масштабируется без потери качества, идеальна для логотипов, иконок, шрифтов. Форматы: SVG, AI, EPS.
Растровая графика — это сетка пикселей с цветовыми значениями. При увеличении теряет качество (пикселизация). Подходит для фото, сложных изображений. Форматы: JPEG, PNG, GIF.
Пример SVG (вектор):
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>Пример Canvas (растр):
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(50, 50, 40, 0, Math.PI * 2);
ctx.fill();Выбор зависит от задачи: вектор — для масштабируемости, растр — для детализации.