Фарқи байни Canvas ва SVG чист?

Canvas — ин як API raster барои расмкашӣ дар вақти воқеӣ бо ёрии JavaScript мебошад. Он пикселҳоро дар рӯйхат мекашад.

SVG (Графикаи вектории scalable) — формат XML барои тавсифи графикаи дуҳуҷраӣ мебошад. Он шаклҳо, хатҳо, матн ва ғайраро тавсиф мекунад.

Тафовутҳои асосӣ:

• Асос: Canvas — пикселҳо, SVG — векторҳо (тавсифҳои математикӣ).
• Равиши расмкашӣ: Canvas — императивӣ (командҳои расмкашӣ), SVG — декларативӣ (тавсифи унсурҳо).
• Масштаб: Canvas бо талафоти сифат (rastr) масштаб мешавад, 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>