ไฟล์ SVG คืออะไร? วิธีเปิด ใช้ และสร้างไฟล์

ไฟล์ SVG (Scalable Vector Graphics) คือภาพที่อธิบายด้วย XML และรูปทรงเวกเตอร์ แทนการมีเพียงตารางพิกเซลขนาดตายตัว มันเก็บภาพเป็นรูปทรง พาธ ข้อความ และสีเติมได้ องค์ประกอบเวกเตอร์เหล่านั้นจึงยังคมเมื่อปรับขนาด ขนาดไฟล์ขึ้นอยู่กับจำนวนและความซับซ้อนขององค์ประกอบ รวมถึงมีราสเตอร์ฝังอยู่หรือไม่ ดูมาตรฐาน W3C SVG 2

นี่คือคู่มือภาษาง่ายสำหรับผู้ที่เพิ่งเจอไฟล์ชนิดนี้: SVG คืออะไร ข้างในมีอะไร เหมาะและไม่เหมาะกับอะไร เปิดอย่างไร และสร้างจากภาพที่มีอยู่ได้อย่างไร ไม่ต้องมีพื้นฐานพัฒนาเว็บ

คำอธิบายฉบับสั้น

• SVG เก็บภาพเป็นรูปทรงที่อธิบายด้วยโค้ด แทนพิกเซล จึงปรับได้ทุกขนาดโดยไม่เบลอ
• เหมาะกับโลโก้ ไอคอน ภาพประกอบง่าย ๆ และงาน Cricut หรืองานพิมพ์ ไม่เหมาะกับภาพถ่าย
• เปิดในเว็บเบราว์เซอร์ แอปออกแบบ (Illustrator, Inkscape, Figma, Canva) หรือแม้แต่โปรแกรมข้อความธรรมดาได้
• สร้างด้วยการออกแบบในซอฟต์แวร์เวกเตอร์ หรือแปลงภาพที่คุณมีอยู่ เป็น SVG

SVG เทียบกับภาพทั่วไป (PNG หรือ JPG)

PNG หรือ JPG เป็นภาพราสเตอร์: ตารางพิกเซลสีขนาดตายตัวคล้ายโมเสก ซูมมากพอจะเห็นสี่เหลี่ยม นี่คือเหตุผลที่โลโก้ PNG เบลอเมื่อขยายมาก

SVG เป็นภาพเวกเตอร์: ชุดคำสั่งที่บอกว่า "วาดวงกลมตรงนี้ เติมสีส้ม วาดเส้นโค้งนี้ตรงนั้น" เพราะภาพถูกวาดใหม่จากคำสั่งทุกครั้ง จึงดูคมทุกขนาด ความต่างข้อนี้คือประโยชน์หลัก (ดูรายละเอียดว่าควรใช้แต่ละแบบเมื่อใดได้ที่ PNG เทียบกับ SVG)

ข้างในไฟล์ SVG มีอะไรจริง ๆ

สิ่งที่หลายคนประหลาดใจคือ SVG เป็นข้อความ เปิดใน Notepad หรือโปรแกรมแก้ไขโค้ดใดก็อ่านได้ ภายในคือ XML รูปแบบข้อความที่ใช้แท็ก โดยรูปทรงแต่ละชิ้นเป็นบรรทัดโค้ด SVG ง่าย ๆ ของวงกลมสีส้มมีหน้าตาแบบนี้:

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="orange" />
</svg>

นี่คือทั้งไฟล์ circle วาดรูปทรง cx/cy วางตำแหน่ง r ตั้งรัศมี และ fill ตั้งสี เพราะ SVG เป็น XML แบบข้อความ คุณจึงตรวจได้ และในไฟล์ง่าย ๆ แบบนี้ก็เปลี่ยนสีด้วยการแก้แอตทริบิวต์เดียว SVG เป็นมาตรฐานเปิดของ W3C ที่เบราว์เซอร์สมัยใหม่รองรับ อ่านบทนำ SVG ของ W3C

หากไฟล์มีนามสกุล .svgz เปรียบเทียบ SVGZ กับ SVG อธิบายวิธีคืนมาร์กอัปและเลือกรูปแบบสำหรับแก้ไขหรือส่งขึ้นเว็บ

ใช้ SVG ทำอะไร

SVG เหมาะในทุกกรณีที่กราฟิกต้องคมชัดหลายขนาด หรือแก้ไขเป็นรูปทรงได้:

• โลโก้ SVG ไฟล์เดียวใช้ได้ทั้งนามบัตรและแบนเนอร์ โดยไม่ต้องมีไฟล์แยกทุกขนาด
• ไอคอนและกราฟิกเว็บไซต์ ปุ่ม ลูกศร และภาพประกอบง่าย ๆ ยังชัดบนจอที่มีความหนาแน่นพิกเซลต่างกัน ประสิทธิภาพยังขึ้นกับความซับซ้อนของไฟล์และวิธีส่งไฟล์ให้ผู้ใช้
• Cricut และเครื่องตัด SVG เป็นรูปแบบมาตรฐานของไฟล์ตัด เครื่องเดินตามพาธเพื่อตัดไวนิล กระดาษ หรือ HTV (เตรียมไฟล์ SVG สำหรับ Cricut ครอบคลุมตั้งแต่ต้นจนจบ)
• งานพิมพ์และป้าย เวกเตอร์ปรับเป็นขนาดจริงเท่าใดก็ได้โดยไม่แตกเป็นพิกเซล

SVG ไม่เหมาะกับอะไร

SVG สร้างมาเพื่องานกราฟิกสีเรียบ จึงไม่เหมาะกับภาพถ่าย ภาพถ่ายมีสีนับล้านที่ผสมกันละเอียดโดยไม่มีบริเวณสีเรียบ การฝืนเปลี่ยนเป็นรูปทรงจะได้ภาพสีเป็นชั้นคล้ายภาพวาด หรือไฟล์มหาศาลและยุ่งเหยิง หากกำลังคิดจะแปลงภาพถ่าย ให้อ่านสิ่งที่เกิดขึ้นจริงเมื่อแปลงภาพถ่ายเป็น SVG ก่อน หากต้องการรายละเอียดภาพถ่ายจริง ให้เก็บ JPG หรือ PNG ไว้

วิธีเปิดไฟล์ SVG

คุณมีทางเลือกง่าย ๆ สามแบบตามสิ่งที่ต้องการทำ:

• แค่ดูภาพ: ลากไฟล์เข้าเว็บเบราว์เซอร์ ภาพแสดงทันที ไม่ต้องติดตั้งซอฟต์แวร์
• แก้ไขด้วยภาพ: เปิดในแอปออกแบบ เช่น Inkscape (ฟรี), Illustrator, Figma หรือ Canva (วิธีแก้ไข SVG อธิบายการเปลี่ยนสีและรูปทรง)
• ดูหรือปรับโค้ด: เปิดในโปรแกรมข้อความธรรมดา เช่น Notepad หรือ VS Code

หากไฟล์เปิดแล้วเป็นพื้นที่ว่าง ให้ใช้รายการตรวจ SVG ว่าง ก่อนบันทึกใหม่ พาธอาจอยู่นอกพื้นที่งาน มองไม่เห็น ถูกตัดขอบ หรือแอปนั้นไม่รองรับ

วิธีสร้าง SVG

มีสองทาง และทางที่เหมาะขึ้นอยู่กับสิ่งที่คุณเริ่มต้น

ออกแบบตั้งแต่ต้น วาดโลโก้ ไอคอน หรือภาพประกอบในซอฟต์แวร์เวกเตอร์ (Inkscape, Illustrator, Figma หรือ Canva) แล้วส่งออกเป็น SVG วิธีนี้ให้ผลสะอาดที่สุด เพราะไฟล์เป็นเวกเตอร์ตั้งแต่เริ่ม

แปลงภาพที่มีอยู่ นี่คือสิ่งที่คนส่วนใหญ่ต้องการจริง หากโลโก้หรืองานมีเพียง PNG หรือ JPG คุณเปลี่ยนเป็น SVG ด้วยการแปลงเป็นเวกเตอร์ ซึ่งวาดพิกเซลใหม่เป็นรูปทรงแก้ไขได้ (การแปลงภาพเป็นเวกเตอร์คืออะไร อธิบายกระบวนการ)

ตัวอย่างการทำงานด้วย PerfectVector

หากคุณมี PNG หรือ JPG และต้องการ SVG จริง นั่นคือเส้นทางการแปลง PerfectVector สร้างโลโก้ ไอคอน และภาพประกอบสีเรียบที่เหมาะสมใหม่เป็นพาธ SVG และรูปทรงสีที่แก้ไขได้ เปลี่ยนภาพเป็น SVG เปรียบเทียบตัวอย่างฟรีกับต้นฉบับ และตรวจพาธก่อนใช้หนึ่งเครดิตปลดล็อกไฟล์เสร็จสมบูรณ์

เครื่องมือทำงานดีที่สุดกับสิ่งเดียวกับที่ SVG เองเหมาะ: งานกราฟิกสีเรียบและโลโก้ สำหรับภาพถ่ายรายละเอียดสูง ไม่มีเครื่องมือแปลงใดให้เวกเตอร์ที่เป็นภาพถ่ายแท้ได้ และเราบอกตรง ๆ แทนการแสร้งว่าได้

หมายเหตุสั้น ๆ เรื่องความปลอดภัย

SVG มีเนื้อหาที่ทำงานได้ รวมถึงองค์ประกอบ <script> ดังนั้นอย่าถือว่า SVG ที่ไม่เชื่อถือปลอดภัยโดยอัตโนมัติเพียงเพราะเป็นรูปแบบภาพ MDN อธิบายสคริปต์ SVG โดยตรง สำหรับขั้นตอนอัปโหลดในเว็บไซต์ ให้ตรวจชนิดและเนื้อหาไฟล์ เปลี่ยนชื่อไฟล์ที่จัดเก็บ จำกัดขนาด และให้บริการไฟล์ด้วยสิทธิ์น้อยที่สุด OWASP แนะนำการป้องกันหลายชั้นแบบนี้สำหรับไฟล์อัปโหลดที่ไม่เชื่อถือ ดูคู่มือ File Upload Cheat Sheet ของ OWASP

คำถามที่พบบ่อย

ใช้ไฟล์ SVG ทำอะไร? โลโก้ ไอคอนเว็บไซต์ ปุ่ม ภาพประกอบง่าย ๆ และไฟล์ตัดสำหรับเครื่องอย่าง Cricut เมื่อกราฟิกต้องชัดหลายขนาดหรือแก้ไขเป็นรูปทรงได้ SVG เป็นตัวเลือกที่ดี มีการใช้บนเว็บมากเพราะไฟล์เล็กและปรับขนาดโดยไม่เสียคุณภาพ

เปิดไฟล์ SVG อย่างไร? ลากเข้าเว็บเบราว์เซอร์สมัยใหม่เพื่อดู เปิดในแอปออกแบบที่รองรับ เช่น Inkscape, Illustrator, Figma หรือ Canva เพื่อแก้ไขด้วยภาพ หรือเปิดในโปรแกรมข้อความอย่าง Notepad เพื่อตรวจ XML การไม่มีภาพย่อในระบบปฏิบัติการไม่ได้แปลว่าไฟล์เสีย ให้เปิดในโปรแกรมดูที่รองรับเพื่อตรวจ

สร้างไฟล์ SVG อย่างไร? ออกแบบในซอฟต์แวร์เวกเตอร์ (Inkscape, Illustrator, Figma หรือ Canva) แล้วส่งออกเป็น SVG หรือแปลงภาพที่มี เช่น โลโก้ PNG หรือ JPG เป็น SVG ด้วยการแปลงเป็นเวกเตอร์ การออกแบบตั้งแต่ต้นให้ผลสะอาดที่สุด ส่วนการแปลงเป็นทางรวดเร็วเมื่อมีเพียงราสเตอร์

ไฟล์ SVG เป็นไฟล์เวกเตอร์หรือไม่? ใช่ SVG ย่อมาจาก Scalable Vector Graphics และเก็บภาพเป็นรูปทรงเวกเตอร์แทนพิกเซล นี่คือเหตุผลที่มันปรับขนาดได้โดยไม่เสียคุณภาพ

SVG ต่างจาก PNG หรือ JPG อย่างไร? PNG และ JPG ประกอบด้วยพิกเซลและเบลอเมื่อขยายเกินความละเอียด ส่วน SVG ประกอบด้วยรูปทรงและยังคมทุกขนาด PNG และ JPG เหมาะกับภาพถ่ายกว่า SVG เหมาะกับโลโก้ ไอคอน และกราฟิกกว่า

เปิดไฟล์ SVG ใน Microsoft Word หรือ Office ได้หรือไม่? ได้ใน Microsoft 365 และ Office เวอร์ชันที่รองรับ Microsoft มีเอกสารการแทรก SVG และใช้ตัวควบคุม Graphics Format เพื่อเปลี่ยนสีหรือรูปแบบ ตัวควบคุมที่มีอาจต่างตามแอปและเวอร์ชัน ดูคู่มือแก้ไข SVG ของ Microsoft

แหล่งข้อมูล

1. W3C — Scalable Vector Graphics (SVG) 2 — นิยามเชิงบรรทัดฐานขององค์ประกอบ SVG รูปทรง การแสดงผล และไวยากรณ์ XML
2. W3C — เนื้อหาที่ฝังใน SVG — พฤติกรรมมาตรฐานของราสเตอร์และเนื้อหาอื่นที่ฝังใน SVG
3. MDN — <script> ใน SVG — เอกสารอ้างอิงที่แสดงว่า SVG มีสคริปต์ที่ทำงานได้
4. OWASP — File Upload Cheat Sheet — การควบคุมความปลอดภัยเพื่อรับและให้บริการไฟล์อัปโหลดที่ไม่เชื่อถือ
5. ฝ่ายสนับสนุน Microsoft — แก้ไขภาพ SVG ใน Microsoft 365 — การรองรับ Office และขั้นตอนแก้ไขกราฟิก SVG อย่างเป็นทางการ

---

SVG อธิบายงานด้วยพาธแทนตารางพิกเซลตายตัวได้ หากงานสีเรียบที่เหมาะสมของคุณมีเพียง PNG หรือ JPG ให้ลากเส้นด้วย PerfectVector ตรวจรูปทรงในตัวอย่าง แล้วทดสอบ SVG ที่ปลดล็อกในเครื่องมือที่จะแก้ไข พิมพ์ หรือตัดไฟล์นั้น