HTML 5 Canvas vs. SVG

Canvas en SVG laten u grafieken maken in de browser, maar ze zijn in essentie verschillend.

SVG

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

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

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

Canvas

Canvas tekent 2D-grafieken met JavaScript.

Canvas renderd pixel voor pixel.

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

Canvas vs. SVG Vergelijking

De tabel hieronder lijst enkele verschillen tussen canvas en SVG op.

Canvas

  • Afhankelijk van resolutie
  • Ondersteunt geen event handlers
  • Zwakke tekstrenderingscapaciteit
  • Kan resultaatafbeeldingen opslaan in .png- of .jpg-formaat
  • Vooral geschikt voor games met een hoge dichtheid aan afbeeldingen, waarbij veel objecten vaak worden opnieuw getekend

SVG

  • Niet afhankelijk van resolutie
  • Ondersteunt event handlers
  • Vooral geschikt voor toepassingen met grote renderinggebieden (bijvoorbeeld Google Maps)
  • Hoog complexiteitsniveau kan de rendering-snelheid verminderen (iedere toepassing die DOM overmatig gebruikt is niet snel)
  • Niet geschikt voor game-toepassingen