HTML 5 Canvas vs. SVG

Både Canvas och SVG låter dig skapa grafik i webbläsaren, men de är grundläggande olika.

SVG

SVG är ett språk som används för att beskriva 2D-grafik med XML.

SVG är baserat på XML, vilket innebär att varje element i SVG DOM är tillgängligt. Du kan lägga till JavaScript-händelsbehandlare till ett element.

I SVG betraktas varje ritad grafik som ett objekt. Om egenskaperna för ett SVG-objekt ändras kan webbläsaren automatiskt återställa grafiken.

Canvas

Canvas ritas med hjälp av JavaScript för 2D-grafik.

Canvas renderas pixel för pixel.

I canvas upphör grafiken att få uppmärksamhet från webbläsaren när den är ritad. Om dess position ändras måste hela scenen omritas, inklusive alla objekt som kanske har täckt över grafiken.

Jämförelse mellan Canvas och SVG

Nedan listas några skillnader mellan canvas och SVG.

Canvas

  • Beroende av upplösning
  • Stödjer inte händelsbehandlare
  • Svag textrendering
  • Kan spara resultatbilder i .png eller .jpg-format
  • Mest lämpligt för spel som är intensiva i bilder, där många objekt ofta omritas

SVG

  • Beroende av upplösning
  • Stödjer händelsbehandlare
  • Mest lämpligt för applikationer med stora renderområden (t.ex. Google Maps)
  • Hög komplexitet minskar renderhastigheten (alla applikationer som överanvänder DOM är långsamma)
  • Inte lämpligt för spelapplikationer