Jaký je rozdíl mezi prvky canvas a SVG?

canvas — rastrový obrázek, který se kreslí v reálném čase pomocí API JS. Je řízen pixely. Používá se pro hry, grafy, animace dat.

SVG — vektorový obrázek, popisuje se v XML. Zvětšuje se bez ztráty kvality. Je řízen objekty (čáry, křivky). Používá se pro loga, ikony, ilustrace. Skvěle se hodí pro responzivní design.

Porovnání Canvas a SVG:

Charakteristika	Canvas	SVG
Typ grafiky	Rastrová (pixelová)	Vektorová (založená na XML)
Vykreslení	Pomocí API JavaScriptu	Popisuje se v XML, vykresluje prohlížeč
Řízení	Řídí jednotlivé pixely	Řídí objekty (čáry, tvary atd.)
Zvětšení	Ztrácí kvalitu při zvětšení	Zvětšuje se bez ztráty kvality
Interaktivita	Vyžaduje dodatečnou logiku pro kliknutí	Vložená na úrovni objektů (přes DOM)
Výkon	Lepší pro složité, dynamické scény	Lepší pro statické nebo méně složité scény
Přístupnost (Accessibility)	Těžko zajistit	Vložená (přes atributy a DOM)
Použití	Hry, složité animace, vizualizace dat	Loga, ikony, ilustrace, grafy