V jakých případech je lepší použít Canvas a v jakých SVG?

Volba mezi Canvas a SVG závisí na typu grafiky, úkolu a požadované interaktivitě.

Canvas je vhodnější pro:

• Rastrovou grafiku a manipulaci s pixely.
• Vytváření složitých vizualizací s mnoha prvky (například hry, animace s velkým počtem objektů).
• Dynamické vykreslování, když se grafika rychle mění (například grafy v reálném čase).
• Dlaždicové kreslení na nízké úrovni, kde je důležitá kontrola nad každým pixelem.
• Výkon při práci s velkým počtem prvků, protože se jedná o jednotný obrázek.

SVG je vhodnější pro:

• Vektorovou grafiku (škálovatelné obrázky bez ztráty kvality).
• Grafiku vyžadující vysokou detailnost a škálovatelnost (loga, ikony, diagramy).
• Interaktivní prvky, kde každý objekt je samostatný DOM prvek a může být ovládán událostmi.
• Sémantickou grafiku, kdy mají být prvky přístupné pro vyhledávače a asistivní technologie.
• Jednoduchou úpravu a animaci jednotlivých prvků pomocí CSS a JavaScriptu.
• Práci s již existujícími vektorovými prvky nebo jejich tvorbu v grafických editorech.

Zde je srovnávací tabulka:

Kritérium	Canvas	SVG
Typ grafiky	Rastrová	Vektorová
Výkon	Dobré pro velké množství prvků	Může zpomalit s velkým množstvím prvků
Škálovatelnost	Závisí na rozlišení	Bezchybné
Interaktivita	Obtížná na úrovni objektů	Snadná na úrovni objektů
Přístupnost	Nízká	Vysoká (sémantika)
Úprava	Pixel po pixelu	Element po elementu (DOM)