การวาดภาพ Graphic ใน HTML 5 มี 2 รูปแบบด้วยกันคือการวาดลงบน Canvas และการใช้ SVG ซึ่งทั้ง 2 แบบนั้นวาดภาพได้เหมือนกันแต่จะมีข้อแตกต่างกันคือ
ถ้าวาดลงบน Canvas ภาพจะเป็น Bitmap ซึ่งถ้า Zoom เข้าไปมากๆ ภาพจะแตกซึ่งเป็นลักษณะทั่วไปของ Bitmap และ การวาดใช้ JavaScript เมื่อต้องการแก้ไขภาพใหม่ต้อง excute JavaScript ส่วนนั้นใหม่ทั้งหมด
แต่ถ้าวาดด้วย SVG ภาพที่ได้จะเป็น Vector ไม่ว่าจะ Zoom เข้าไปเท่าไหร่ภาพก็จะไม่แตก และอีกข้อสำคัญก็คือ SVG เป็น XML ดังนั้นถ้าจะทำการแก้ไขภาพสามารถ
เขียน JavaScript เข้าไปแก้ไขข้อมูลใน DOM ได้โดยที่ไม่ต้อง execute ใหม่ เหมือนกับเราใช้ JavaScript เข้าไปแก้ไข DOM ใน HTML ธรรมดานั่นเอง
ลองเข้าไปทดสอบ Code ได้ด้วยตัวเองที่นี่
http://jsfiddle.net/DQXuv/
ไม่สามารถแสดงผลได้ใน IE 8 ลงมา
หรือเข้าไปดูผลลัพธ์แบบ Full Screen ที่นี่
http://jsfiddle.net/DQXuv/embedded/result/
ลอง Zoom โดยกด Ctrl ค้างไว้แล้วเลื่อนเมาส์ปุ่มตรงกลางขึ้น หรือหาเมนู Zoom ในแต่ละ Browser
