SVG (Scalable Vector Graphics) เป็นหนึ่งในเครื่องมือสำคัญสำหรับการสร้างกราฟิกในยุค HTML5 ที่รองรับการปรับขนาดได้โดยไม่สูญเสียความคมชัด ใช้ XML เป็นโครงสร้างหลัก ซึ่งช่วยให้ dev สามารถสร้างไอคอน, แผนภูมิ, หรือแม้กระทั่ง UI ที่มีการโต้ตอบได้แบบง่ายๆ
ในบทความนี้ เราจะเจาะลึกพื้นฐานของ SVG, ข้อดี, การใช้งานเบื้องต้น, และเหตุผลว่าทำไม dev อย่างเราถึงควรรู้จักและใช้งานมัน
SVG คืออะไร?
SVG ย่อมาจาก Scalable Vector Graphics ซึ่งเป็นมาตรฐานของ W3C สำหรับการสร้างกราฟิกแบบเวกเตอร์โดยใช้ XML จุดเด่นของ SVG:
- เวกเตอร์กราฟิก: สามารถขยายหรือย่อโดยไม่สูญเสียความคมชัด
- ขนาดไฟล์เล็ก: เนื่องจากบันทึกข้อมูลในรูปแบบโค้ด
- ควบคุมได้ง่าย: ใช้ JavaScript, CSS หรือ DOM เพื่อแก้ไขแบบไดนามิก
คุณสมบัติหลักของ SVG
- โครงสร้างแบบ XML:
- SVG ถูกเขียนในรูปแบบ XML ทำให้สามารถอ่านและแก้ไขได้เหมือน HTML
- ตัวอย่าง:
<svg width="200" height="200">
<circle cx="100" cy="100" r="50" fill="blue" />
</svg>
- ขยายได้ไม่จำกัด:
- ไม่ว่าจะขยายขนาดใหญ่แค่ไหน กราฟิกจะยังคงคมชัดเหมือนเดิม
- รองรับการโต้ตอบ:
- ใช้ JavaScript เพิ่ม interactivity เช่น การคลิกหรือ hover
<svg width="100" height="100">
<rect x="10" y="10" width="80" height="80" fill="green" onclick="alert('Hello, SVG!')" />
</svg>
- ผสมผสานกับ CSS:
- สามารถใช้ CSS เพื่อจัดการ style ของกราฟิก
<svg width="200" height="200">
<rect x="10" y="10" width="180" height="180" class="my-rect" />
</svg>
<style>
.my-rect {
fill: coral;
stroke: black;
stroke-width: 5px;
}
</style>
เมื่อไหร่ควรใช้ SVG
SVG เหมาะสำหรับ:
- ไอคอนหรือโลโก้: ที่ต้องการคมชัดบนทุกหน้าจอ
- แผนภูมิและกราฟ: เช่น pie chart, bar chart
- UI Components: เช่น ปุ่ม, spinner
- กราฟิกที่ต้องการปรับขนาด: โดยยังคงคุณภาพสูง
ข้อดีและข้อเสียของ SVG
ข้อดี
- ขยายขนาดได้โดยไม่เสียคุณภาพ
- รองรับ CSS และ JavaScript สำหรับการตกแต่งและเพิ่ม interactivity
- เหมาะสำหรับกราฟิกที่มีรายละเอียดสูง
- อ่านและแก้ไขได้ง่ายเพราะเป็น XML
ข้อเสีย
- ประสิทธิภาพลดลงเมื่อมีองค์ประกอบจำนวนมาก
- ซับซ้อนเมื่อต้องการแอนิเมชันที่ซับซ้อน
- ไม่เหมาะสำหรับงานกราฟิกแบบเรียลไทม์ (เช่น เกม)
เปรียบเทียบ SVG กับ Canvas
| คุณสมบัติ | SVG | Canvas |
|---|---|---|
| ประเภทกราฟิก | เวกเตอร์ | พิกเซล |
| ประสิทธิภาพ | ช้ากว่าเมื่อองค์ประกอบมาก | เร็วกว่าในงานเรียลไทม์ |
| การปรับขนาด | คมชัดเสมอ | อาจเบลอเมื่อขยาย |
| DOM Integration | รองรับ (แก้ไขผ่าน DOM ได้) | ไม่รองรับ |
ตัวอย่าง
- สร้างโลโก้
<svg width="200" height="100">
<text x="50" y="50" font-size="20" fill="blue">Hello SVG</text>
</svg>
- สร้างกราฟแท่ง
<svg width="300" height="150">
<rect x="10" y="50" width="50" height="100" fill="blue" />
<rect x="70" y="30" width="50" height="120" fill="red" />
<rect x="130" y="70" width="50" height="80" fill="green" />
</svg>
สรุป
SVG เป็นเครื่องมือที่ dev ควรเรียนรู้และใช้งานในโปรเจกต์ที่เกี่ยวข้องกับการสร้างกราฟิกแบบคมชัดและต้องการการปรับแต่งที่ยืดหยุ่น เหมาะสำหรับงานที่ไม่ซับซ้อนด้านแอนิเมชัน เช่น โลโก้ ไอคอน หรือ UI ส่วน Canvas อาจจะเป็นตัวเลือกสำหรับงานเรียลไทม์ที่ต้องการประสิทธิภาพสูงกว่า