HTML 5 Canvas vs. SVG

Canvas และ SVG ทั้งคู่อนุญาตให้คุณสร้างกราฟิกในเบราเซอร์ แต่มีความแตกต่างกันทางหลัก

SVG

SVG คือภาษาที่ใช้ XML อธิบายกราฟิก 2D

SVG มีฐาน XML ซึ่งหมายความว่าทุกองค์ประกอบของ SVG DOM ทุกตัวเป็นที่สามารถเข้าถึงได้ คุณสามารถเพิ่มตัวแทนการจัดการเหตุการณ์ JavaScript ให้กับองค์ประกอบ

ใน SVG ทุกกราฟิกที่ถูกวาดจะถูกมองว่าเป็นวัตถุ ถ้าคุณสมบัติของวัตถุ SVG มีการเปลี่ยนแปลง เบราเซอร์จะสามารถทำการวาดกราฟิกอัตโนมัติ

Canvas

Canvas วาดกราฟิก 2D ผ่าน JavaScript

Canvas วาดกราฟิกด้วยพิกเซล

ใน canvas หลังจากที่กราฟิกถูกวาดเสร็จ มันจะไม่ได้รับความสนใจจากเบราเซอร์ต่อไป ถ้าตำแหน่งของมันเปลี่ยนแปลง ทั้งหมดของหน้าที่จะต้องวาดใหม่ รวมทั้งทุกวัตถุที่อาจถูกกราฟิกทับ

การเปรียบเทียบ Canvas และ SVG

ตารางข้างล่างนี้แสดงให้เห็นบางความแตกต่างระหว่าง canvas และ SVG

Canvas

  • ขึ้นกับการตั้งค่าที่แน่นอน
  • ไม่สนับสนุนตัวแทนการจัดการเหตุการณ์
  • มีความสามารถในการวาดข้อความที่อ่อน
  • สามารถบันทึกภาพที่วาดเป็นแบบ .png หรือ .jpg
  • เหมาะสมที่สุดสำหรับเกมที่มีการวาดภาพมาก (หลายวัตถุจะถูกวาดใหม่บ่อยครั้ง)

SVG

  • ไม่ขึ้นกับการตั้งค่าที่แน่นอน
  • สนับสนุนตัวแทนการจัดการเหตุการณ์
  • เหมาะสมที่สุดสำหรับแอพพลิเคชันที่มีพื้นที่วาดใหญ่ (เช่น Google Maps)
  • ความซับซ้อนสูงจะลดความเร็วการวาด (แอพพลิเคชันที่ใช้ DOM มากมายจะไม่รวดเร็ว)
  • ไม่เหมาะสมสำหรับการใช้งานเกม