Ποια είναι η διαφορά μεταξύ Canvas και SVG;

Το Canvas είναι μια raster API για το σχεδιασμό γραφικών σε πραγματικό χρόνο με JavaScript. Σχεδιάζει pixels στον καμβά.

Το SVG (Scalable Vector Graphics) είναι μια μορφή XML για την περιγραφή δισδιάστατων διανυσματικών γραφικών. Περιγράφει σχήματα, γραμμές, κείμενο κ.λπ.

Βασικές διαφορές:

• Βάση: Canvas — pixels, SVG — διανυσματικά (μαθηματικές περιγραφές).
• Τρόπος σχεδίασης: Canvas — επιτακτικός (εντολές σχεδίασης), SVG — δηλωτικός (περιγραφή στοιχείων).
• Κλιμάκωση: Το Canvas κλιμακώνεται με απώλεια ποιότητας (raster), το SVG κλιμακώνεται χωρίς απώλεια ποιότητας (διανυσματικό).
• Απόδοση: Το Canvas είναι καλύτερο για δυναμικά γραφικά, κινούμενα σχέδια, παιχνίδια. Το SVG είναι καλύτερο για στατικά, πολύπλοκα γραφικά, διαγράμματα.
• Προσβασιμότητα: Τα στοιχεία SVG είναι προσβάσιμα μέσω του DOM, μπορούν να τροποποιηθούν με CSS και JavaScript. Το Canvas σχεδιάζει σε επίπεδο pixel, τα μεμονωμένα στοιχεία δεν είναι προσβάσιμα.
• Διαδραστικότητα: Η διαδραστικότητα στο SVG είναι ενσωματωμένη σε επίπεδο στοιχείων. Στο Canvas, πρέπει να παρακολουθείτε γεγονότα ποντικιού/αγγίγματος και να προσδιορίζετε σε ποια pixels συνέβησαν.
• Μορφή: Το Canvas είναι ένα στοιχείο <canvas> και API JavaScript. Το SVG είναι μια αυτόνομη μορφή XML, που μπορεί να ενσωματωθεί απευθείας σε HTML ή να χρησιμοποιηθεί ως αρχείο (.svg).

Παράδειγμα δημιουργίας κύκλου:

// Canvas
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill();

<!-- SVG -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" fill="red" />
</svg>