Skip to content
SVG (Scalable Vector Graphics) คือ รูปแบบไฟล์ภาพกราฟิกแบบเวกเตอร์ ที่เขียนด้วยภาษา XML ทำให้สามารถแสดงผลได้คมชัดทุกขนาด โดยไม่สูญเสียความละเอียด ไม่ว่าจะบนหน้าจอมือถือหรือจอ 4K
ข้อดีของ SVG คือ:
-
📐 ขยายหรือย่อขนาดโดยไม่แตก (vector-based)
-
🎨 เปลี่ยนสีได้ง่ายผ่านโค้ด CSS
-
⚡ โหลดเร็วกว่าไฟล์ PNG หรือ JPG
-
🧩 แก้ไขผ่าน HTML ได้ทันที
SVG แบบ “โค้ด” กับแบบ “ไฟล์” ต่างกันยังไง?
| ประเภท SVG | ตัวอย่าง | เปลี่ยนสีผ่าน CSS ได้ไหม? | SEO Friendly ไหม? | แนะนำสำหรับ |
|---|---|---|---|---|
| แบบโค้ด (Inline SVG) | <svg>...</svg> |
✅ ได้เต็มที่ | ✅ ใช่ | Dev, นักออกแบบ |
| แบบโหลด (External File) | <img src="icon.svg"> |
❌ ไม่ได้ | ❌ ไม่แนะนำ | ใช้ทั่วไป, โหลดเร็ว |
🔎 สรุป: หากคุณต้องการปรับแต่งไอคอนหรือเปลี่ยนสีผ่าน CSS ได้ ควรใช้แบบโค้ด (Inline SVG)
วิธีเปลี่ยนสีไอคอน SVG (จาก Flaticon หรือแหล่งอื่น)
1. ตัวอย่างโค้ด SVG จาก Flaticon
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 512 512">
<path d="M256 0C114.836 0 0 114.836 0 256s114.836 256 256 256 256-114.836 256-256S397.164 0 256 0z" fill="#4caf50"/>
<path d="M256 96a160 160 0 1 0 0 320 160 160 0 0 0 0-320zm0 288a128 128 0 1 1 0-256 128 128 0 0 1 0 256z" fill="#ffffff"/>
</svg>
2. วิธีเปลี่ยนสีแบบพื้นฐาน
<path d="..." fill="#ff0000"/> <!-- สีแดง -->
⚠️ ทำไมการใช้ Tag Image ถึงเปลี่ยนสีไม่ได้?
การใส่ SVG แบบไฟล์ที่ดาวน์โหลดมาแล้วเอามาใส่ใน <img>
<img decoding="async" src="icon.svg" alt="Icon">
จะไม่สามารถเปลี่ยนสีผ่าน CSS ได้ เพราะเนื้อหา SVG อยู่แยกจาก DOM HTML ของคุณ (เหมือนอยู่ใน sandbox)
🚫 ตัวอย่าง CSS ที่ "ใช้ไม่ได้กับ img": css Copy Edit
img {
fill: red; /* ไม่ทำงาน */
}
ถ้าต้องการปรับสี SVG ผ่าน CSS ควรใช้แบบ inline แทน
✅ สรุป: ควรใช้ SVG แบบไหนดี?
| ลักษณะการใช้งาน | คำแนะนำ |
|---|---|
| ต้องการเปลี่ยนสี/ขนาดด้วย CSS | ใช้ inline SVG (<svg>...</svg>) |
| แค่แสดงภาพทั่วไป ไม่เปลี่ยนสี | ใช้ <img src="icon.svg"> ก็ได้ |
| ต้องการให้ SEO index ได้ดี | ใช้ inline SVG เพราะถูกอ่านโดย crawler |
| ต้องการลด HTTP request | รวม SVG หลายอันไว้ใน HTML เดียวกัน |
👨💻 ผู้เขียนบทความ
Fullstack Developer ที่มีความเชี่ยวชาญด้านการตลาดออนไลน์ และ ได้รับรางวัล 1 Million Milestone จากการปิดการขายการทำเว็บไซต์ใน Fastwork ได้ยอดทะลุ 1 ล้านบาท และเป็นอดีต Backend Developer ธนาคารกรุงเทพ
