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ändelseshanterare till ett element.

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

Canvas

Canvas ritar 2D-grafik med JavaScript.

Canvas renderas punkt för punkt.

I canvas upphör grafiken att få uppmärksamhet från webbläsaren när den har ritats klart. Om dess plats ändras, måste hela scenen ritas om, inklusive alla objekt som kanske redan har överlagts av grafiken.

Jämförelse mellan Canvas och SVG

Följande tabell visar några skillnader mellan canvas och SVG.

Canvas

  • Beror på upplösning
  • Stödjer inte händelseshanterare
  • Svag textrenderingsförmåga
  • Kan spara resultatbilder i .png eller .jpg-format
  • Mest lämpligt för spel som är intensiva i bilder, där många objekt ritar ofta om

SVG

  • Beror inte på upplösning
  • Stödjer händelseshanterare
  • 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 inte snabba)
  • Inte lämpligt för spelapplikationer