Ի՞նչն է տարբերությունը Canvas և SVG-ի միջև։

Canvas — դա JavaScript-ի միջոցով իրական ժամանակում գրաֆիկա նկարելու ռաստերային API է: Այն նկարում է պիքսելներ կտավի վրա:

SVG (Սկալյաբելի Վեկտոր Գրաֆիկա) — դա XML ֆորմատ է, որը նկարագրում է 2D վեկտորային գրաֆիկա: Այն նկարագրում է ձևեր, գծեր, տեքստ և այլն:

Հիմնական տարբերությունները՝

• Հիմք: 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>