องค์ประกอบ HTML <svg> เป็นคอนเทนเนอร์สำหรับกราฟิก SVG SVG ย่อมาจาก Scalable Vector Graphics SVG เหมาะสำหรับกำหนดกราฟิกเช่น กล่อง วงกลม ข้อความ ฯลฯ SVG ย่อมาจาก Scalable Vector Graphics และเป็นภาษาสำหรับอธิบาย 2D-graphics และแอปพลิเคชันกราฟิกใน XML และ XML จะถูกเรนเดอร์โดย SVG viewer เบราว์เซอร์ส่วนใหญ่แสดง SVG ได้เหมือน PNG, GIF, และ JPG
องค์ประกอบ HTML <canvas> ใช้วาดกราฟิกผ่าน JavaScript <canvas> เป็นคอนเทนเนอร์สำหรับกราฟิก
| SVG | HTML Canvas |
|---|---|
| SVG มีความสามารถในการขยาย (scalability) ดีกว่า จึงพิมพ์คุณภาพสูงได้ที่ความละเอียดใดๆ | Canvas มี scalability แย่กว่า จึงไม่เหมาะสำหรับพิมพ์ความละเอียดสูง |
| SVG ให้ประสิทธิภาพดีกว่ากับจำนวนอ็อบเจกต์น้อยหรือพื้นที่ใหญ่ | Canvas ให้ประสิทธิภาพดีกว่ากับพื้นที่เล็กหรือจำนวนอ็อบเจกต์มาก |
| SVG ปรับเปลี่ยนได้ผ่าน script และ CSS | Canvas ปรับเปลี่ยนได้ผ่าน script เท่านั้น |
| SVG เป็น vector-based ประกอบด้วยรูปทรง | Canvas เป็น raster-based ประกอบด้วยพิกเซล |
ตัวอย่าง
ลองรันโค้ดด้านล่างเพื่อเพิ่ม scalable vector graphics (SVG) ลงในหน้าเว็บ:
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
}
</style>
<title>HTML5 SVG</title>
</head>
<body>
<h2 align="center">HTML5 SVG Circle</h2>
<svg id="svgelem" height="200" xmlns="https://www.w3.org/2000/svg">
<circle id="bluecircle" cx="60" cy="60" r="50" fill="blue" />
</svg>
</body>
</html>
ตัวอย่าง
ลองรันโค้ดด้านล่างเพื่อเรียนรู้การวาดสี่เหลี่ยมด้วย HTML5 Canvas:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Tag</title>
</head>
<body>
<canvas id="newCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
var c = document.getElementById('newCanvas');
var ctx = c.getContext('2d');
ctx.fillStyle = '#7cce2b';
ctx.fillRect(0,0,300,100);
</script>
</body>
</html>
