HTML5 Canvas vs. SVG

Canvas en SVG laten u grafieken maken in de browser, maar ze zijn op fundamenteel verschillende manieren.

SVG

SVG is een taal die 2D-graphics beschrijft met XML.

SVG is gebaseerd op XML, wat betekent dat elk element in de SVG DOM beschikbaar is. U kunt een JavaScript-gebeurtenisverwerker aan een element toevoegen.

In SVG wordt elke getekende grafiek gezien als een object. Als de eigenschappen van een SVG-object veranderen, kan de browser de grafiek automatisch opnieuw weergeven.

Canvas

Canvas tekent 2D-graphics met JavaScript.

Canvas renderd pixel voor pixel.

In canvas wordt eenmaal een grafiek getekend, krijgt het geen aandacht meer van de browser. Als de positie verandert, moet het hele scenario opnieuw worden getekend, inclusief eventuele objecten die mogelijk door de grafiek zijn bedekt.

Vergelijking van Canvas en SVG

Het onderstaande overzicht laat enkele verschillen tussen canvas en SVG zien.

Canvas

  • Afhankelijk van resolutie
  • Geen ondersteuning voor gebeurtenisverwerkers
  • Swakke tekstweergavecapaciteit
  • Kan resultaatafbeeldingen opslaan in .png of .jpg-formaat
  • Het beste geschikt voor games met een hoge beelddichtheid, waarbij veel objecten vaak worden hergetekend

SVG

  • Niet afhankelijk van resolutie
  • Ondersteunt gebeurtenisverwerkers
  • Het beste geschikt voor toepassingen met een groot renderingsgebied (bijvoorbeeld Google Maps)
  • Hoog complexiteitsniveau vermindert de renderingsnelheid (iedere toepassing die DOM overmatig gebruikt is niet snel)
  • Niet geschikt voor game applicaties