วิธีวาดดาวใน HTML5 SVG

SVG (Scalable Vector Graphics) คือภาษาสำหรับอธิบาย 2D graphics ใน XML เรนเดอร์โดย SVG viewer เบราว์เซอร์สมัยใหม่แสดง SVG ได้เหมือน PNG, GIF, JPG

เพื่อวาดรูปหลายเหลี่ยม (polygon) ใน SVG ใช้แท็ก <polygon> สร้างกราฟิกอย่างน้อย 3 ด้าน สำหรับดาว ต้องตั้งค่าพิกัด x, y ของแต่ละมุมให้ถูกต้อง

ตัวอย่าง: วาดดาว

<!DOCTYPE html> <html>
  <head>
    <style>
      #svgelem {
        position: relative;
        left: 10%;
        transform: translateX(-20%);
      }
    </style>
    <title>HTML5 SVG Polygon Star</title>
  </head>
  <body>
    <h2>HTML5 SVG Star</h2>
    <svg id="svgelem" width="300" height="300" xmlns="https://www.w3.org/2000/svg">
      <polygon points="100,10 40,180 190,60 10,60 160,180" fill="blue"/>
    </svg>
  </body>
</html>

คำอธิบาย points attribute

points="x1,y1 x2,y2 x3,y3 ..." – ลำดับพิกัดมุมของรูปหลายเหลี่ยม

ตัวอย่างดาว 5 จุด: (100,10) → (40,180) → (190,60) → (10,60) → (160,180) → ปิดกลับจุดแรก

ข้อดีของ SVG

• Vector-based: ขยาย/ย่อไม่แตก (Resolution independent)
• DOM-based: จัดการด้วย CSS/JS ได้ (event listeners, animation)
• Accessible: อ่านได้ด้วย screen readers
• File size เล็ก: สำหรับกราฟิกเรียบง่าย

SVG Shapes อื่นๆ

• <circle>, <ellipse>, <rect>, <line>, <polyline>, <path> (ซับซ้อนที่สุด)