HTML 5 Canvas vs. SVG
- Föregående sida HTML5 SVG
- Nästa sida HTML media
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
- Föregående sida HTML5 SVG
- Nästa sida HTML media