რა განსხვავებაა Canvas და SVG-ს შორის?

Canvas — бұл JavaScript көмегімен нақты уақыт режимінде графика салу үшін растрлық API. Ол пиксельдерді кенепке салады.

SVG (Өлшемі өзгермелі векторлық графика) — бұл XML форматы, ол екі өлшемді векторлық графиканы сипаттайды. Ол фигураларды, сызықтарды, мәтінді және т.б. сипаттайды.

Негізгі айырмашылықтар:

• Негізі: Canvas — пиксельдер, SVG — векторлар (математикалық сипаттамалар).
• Сурет салу тәсілі: Canvas — императивті (сурет салу командалары), SVG — декларативті (элементтердің сипаттамасы).
• Масштабтау: Canvas сапасын жоғалту арқылы масштабталады (растр), SVG сапасын жоғалтпай масштабталады (вектор).
• Өнімділік: Canvas динамикалық графика, анимациялар, ойындар үшін жақсы. SVG статикалық, күрделі графика, диаграммалар үшін жақсы.
• Қолжетімділік: SVG элементтері DOM арқылы қол жетімді, оларды CSS және JavaScript көмегімен өзгертуге болады. Canvas пиксель деңгейінде сурет салады, жеке элементтер қол жетімді емес.
• Интерактивтілік: SVG-де интерактивтілік элементтер деңгейінде кіріктірілген. Canvas-та, оқиғаларды бақылау және қай пиксельге әсер еткенін анықтау керек.
• Формат: Canvas — <canvas> элементі және JavaScript API. 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>