เครื่องมือสร้างรูปทรง SVG

รูปร่างและเรขาคณิตในภาพรวม

ตัวอย่างผลลัพธ์: ดาวห้าดวง

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <polygon points="100,2 118.65,73.57 191.98,73.57 132.66,117.86 151.31,189.43 100,145.14 48.69,189.43 67.34,117.86 8.02,73.57 81.35,73.57"
    fill="#6366f1" stroke="#312e81" stroke-width="2"/>
</svg>

รัศมีด้านในถูกกำหนดไว้ที่ 40% ของรัศมีด้านนอก ซึ่งสอดคล้องกับสัดส่วนแบบคลาสสิกที่ใช้ในดาวธงและดาวถ้วย

กรณีการใช้งาน

• แอวาตารและหน้ากาก, ใช้วงกลมเป็นเส้นทางคลิปสำหรับรูปโปรไฟล์
• ชิปสถานะ, มีรูปร่างสี่เหลี่ยม (กลมโดยใช้ CSS border-radius หรือ rx เวอร์ชันใหม่กว่า) เพื่อใช้เป็นตัวบ่งชี้สถานะอย่างง่าย
• อินเทอร์เฟซการให้คะแนน, แสดงด้วยดาวที่เต็ม ครึ่งเต็ม และเส้นกรอบ ตามมาตราส่วน 0–5
• เครื่องหมายและตราประจำ, รูปหกเหลี่ยมที่มีข้อความหรือสัญลักษณ์อยู่ด้านใน
• ปุ่มแสดงความรู้สึก, หัวใจสำหรับกด “ชอบ”, รายการความปรารถนา และการบันทึก

ทำไมตัวพื้นฐานของ SVG จึงใช้เส้นทางทั่วไป

ใช้ <circle> หรือ <polygon> แทน <path> ซึ่งเป็นรุ่นที่เทียบเท่ากัน

• มีขนาดเล็กกว่าในหน่วยไบต์สำหรับรูปทรงทั่วไป (10–30 ไบต์)
• การสร้างเอเนมที่ง่ายขึ้น, แอตทริบิวต์อย่าง r, cx, cy และ points สามารถใช้ในการสร้างเอเนมแบบ Tween โดยตรงผ่าน CSS หรือ GSAP – อ่านได้ชัดเจนยิ่งขึ้นในส่วนของข้อมูลตรวจสอบและค่าความแตกต่าง (Diff)

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

ความสามารถในการเข้าถึง

SVG ทั้งหมดที่สร้างขึ้นจะมีลักษณะเป็นเพียงองค์ประกอบตกแต่งโดยค่าเริ่มต้น หากรูปทรงมีความหมายเฉพาะ (วงกลมสีแดง = ข้อผิดพลาด, เครื่องหมายกากบาทสีเขียว = สำเร็จ) ให้วางรูปทรงดังกล่าวไว้ภายในโครงสร้างพ่อที่มี role="img" และ aria-label หรือเพิ่มลูกโครงสร้าง <title> เข้าไปภายใน SVG