Milline on erinevus canvas ja SVG elementide vahel?

canvas — rasterpilt, mis joonistatakse reaalajas JS API abil. Juhtimine toimub pikslite kaupa. Kasutatakse mängude, graafikute, andmete animatsioonide jaoks.

SVG — vektorpilt, kirjeldatakse XML-is. Suurendamisel kaotab kvaliteeti. Juhtimine toimub objektidega (jooned, kõverad). Kasutatakse logode, ikoonide, illustratsioonide jaoks. Sobib suurepäraselt reageerivale disainile.

Canvas ja SVG võrdlus:

Omadus	Canvas	SVG
Graafikate tüüp	Raster (piksliline)	Vektorpilt (põhineb XML-il)
Joonistamine	JS API abil	Kirjeldatud XML-is, brauser joonistab
Juhtimine	Juhtib üksikpiksleid	Juhtib objekte (jooned, kujundid jms)
Suurendamine	Kaotab kvaliteeti suurendamisel	Suurendamisel kvaliteet säilib
Interaktiivsus	Vajab täiendavat loogikat klikkide jaoks	Sisseehitatud objektide tasemel (DOM-i kaudu)
Tõhusus	Paremini keerukate, dünaamiliste stseenide jaoks	Paremini staatiliste või vähem keerukate stseenide jaoks
Ligipääsetavus (Accessibility)	Raske tagada	Sisseehitatud (atribuutide ja DOM-i kaudu)
Rakendused	Mängud, keerukad animatsioonid, andmete visualiseerimine	Logo, ikoonid, illustratsioonid, diagrammid