อัปเดตล่าสุด: 15 Dec, 2025
เมื่อคนส่วนใหญ่คิดถึงรูปแบบภาพ พวกเขามักนึกถึง JPEG สำหรับภาพถ่าย, PNG สำหรับกราฟิกที่ต้องการความโปร่งใส, และ GIF สำหรับแอนิเมชัน แต่มีรูปแบบอื่นหนึ่งที่ทำงานเบื้องหลังเว็บสมัยใหม่อย่างเงียบ ๆ ซึ่งควรได้รับการยอมรับมากกว่านี้: SVG (Scalable Vector Graphics) แม้ว่าจะมีมาตั้งแต่กว่าสองทศวรรษแล้ว SVG ยังคงเป็นหนึ่งในรูปแบบภาพที่ถูกใช้ไม่เต็มที่และเข้าใจผิด—แม้ว่ามันจะแก้ปัญหาหลายอย่างที่รูปแบบภาพอื่น ๆ เผชิญอยู่ เรามาดูกันว่า SVG อาจเป็นอาวุธลับที่เว็บไซต์ของคุณต้องการ
ความแตกต่างหลัก: คณิตศาสตร์ vs. พิกเซล ภาพเรสเตอร์ (JPEG, PNG, GIF) ภาพมาตรฐานเป็นกราฟิกเรสเตอร์ ลองนึกภาพกระดาษกราฟที่คุณระบายสีในช่องสี่เหลี่ยมเล็ก ๆ หากมองจากระยะไกล จะดูเหมือนเป็นรูปภาพ แต่ถ้าใกล้เข้าไปจะเห็นบล็อก (พิกเซล) ชัดเจน
ปัญหา: ขนาดไฟล์ถูกกำหนดโดยจำนวนพิกเซลที่มี หากพยายามขยายภาพให้ใหญ่ขึ้น คอมพิวเตอร์ต้องคาดเดาว่าจะใส่สีอะไรในพิกเซลใหม่ ทำให้เกิดภาพเบลอและเป็นบล็อก SVG คืออะไรอย่างแท้จริง? ก่อนอื่นเรามาอธิบายว่า SVG คืออะไร ต่างจากไฟล์ JPEG หรือ PNG ที่ประกอบด้วยพิกเซล SVG เป็น รูปแบบเวกเตอร์ ที่อธิบายด้วย XML แทนการเก็บข้อมูลสีของแต่ละพิกเซล ไฟล์ SVG จะบรรจุคำสั่งคณิตศาสตร์ที่บอกเบราว์เซอร์ว่าต้องวาดรูปทรง เส้นโค้ง สีอย่างไร