HTML5 Canvas κατά opposed to SVG

Το canvas και το SVG επιτρέπουν την δημιουργία γραφημάτων στον περιηγητή, αλλά είναι διαφορετικά στο βασικό τους.

SVG

Το SVG είναι μια γλώσσα που χρησιμοποιείται για την περιγραφή 2D γραφημάτων με XML.

Το SVG βασίζεται στο XML, αυτό σημαίνει ότι κάθε στοιχείο στο SVG DOM είναι διαθέσιμο. Μπορείτε να προσθέσετε επεξεργαστές γεγονότων JavaScript σε κάποιο στοιχείο.

Στο SVG, κάθε γραφήμα που αποτυπώνεται θεωρείται αντικείμενο. Αν αλλάξουν τα χαρακτηριστικά του αντικειμένου SVG, ο περιηγητής μπορεί να επαναπαράγει αυτόματα το γραφήμα.

Canvas

Το canvas αποτυπώνει 2D γραφήματα μέσω JavaScript.

Το canvas αποτυπώνει σταδιακά σε επίπεδο像素.

Στο canvas, μετά την αποτύπωση των γραφημάτων, δεν λαμβάνεται πλέον υπόψη από τον περιηγητή. Αν η θέση του αλλάξει, η ολόκληρη η σκηνή πρέπει να επαναδιατυπωθεί, συμπεριλαμβανομένων των οποιωνδήποτε αντικειμένων που μπορεί να καλύπτονται από τα γραφήματα.

Σύγκριση μεταξύ Canvas και SVG

Το παρακάτω πίνακας αναφέρει μερικές διαφορές μεταξύ canvas και SVG.

Canvas

  • Εξαρτάται από την ανάλυση
  • Δεν υποστηρίζει επεξεργαστές γεγονότων
  • Αδύναμη ικανότητα απότυψης κειμένου
  • Κατάλληλο για αποθήκευση των αποτελεσμάτων ως εικόνες .png ή .jpg
  • Τιμώτερο για παιχνίδια που είναι πυκνοί σε εικόνες, όπου πολλοί αντικείμενοι θα επαναλαμβάνονται συχνά

SVG

  • Δεν εξαρτάται από την ανάλυση
  • Υποστήριξη επεξεργαστών γεγονότων
  • Τιμώτερο για εφαρμογές με μεγάλη περιοχή αποτύπωσης (π.χ. Google Maps)
  • Υψηλή πολυπλοκότητα μειώνει την ταχύτητα της αποτύπωσης (οποιαδήποτε εφαρμογή που υπερβολικά χρησιμοποιεί το DOM δεν είναι γρήγορη)
  • Μη κατάλληλο για εφαρμογές παιχνιδιών