เชื่อว่าหลายๆคนต้องมีประสบการณ์เซฟไฟล์รูปมาแล้วเป็นไฟล์แปลกๆ นามสกุล .SVG ที่เปิดหรือใช้ในแอปที่ใช้อยู่ประจำไม่ได้ ในบทความนี้เราจะมาไขข้อข้องใจ แถมวิธีเอาไปใช้แบบง่ายสุดๆ
SVG – Scalable Vector Graphics
SVG (Scalable Vector Graphics) นั้นเป็นไฟล์ภาพประเภทหนึ่งที่ถูกสร้างขึ้นจากเวกเตอร์ (ฟิสิกส์ม.ปลาย จำได้ไหม เวกเตอร์ = ขนาดและทิศทาง) ดังนั้นในตัวไฟล์จริงๆแล้วจะประกอบไปด้วยโค้ด XML ที่บอกพิกัดว่าอะไรอยู่ตรงไหน ขนาดเท่าไหร่ และเมื่อนำไปใช้งานก็จะประมวลผลออกมาเป็นภาพ
ไฟล์ SVG ใช้ทำอะไร
ไฟล์ SVG ที่มักจะเจอกันบ่อยคือไฟล์โลโก้ต่างๆบนเว็บ (เจอบนวิกิพีเดียบ่อยมาก!) เพราะด้วยความที่ SVG สร้างขึ้นจากเวกเตอร์ที่เป็นโค้ด ทำให้ไม่ว่าจะย่อหรือขยาย เวกเตอร์ก็จะประมวลผลออกมาในสัดส่วนเดิมโดยไม่เสียความละเอียดไป ทำให้สะดวกมากในการทำไฟล์ครั้งเดียวแล้วเอาไปใช้ในที่ต่างๆ
เว็บเบราว์เซอร์ทุกยี่ห้อในปัจจุบันมีความสามารถในการประมวลผลโค้ด SVG อยู่แล้ว พอนำมาใช้ในเว็บก็ไม่มีปัญหา และถ้าอุปกรณ์ที่ใช้อยู่ไม่มีโปรแกรมที่เปิดดูไฟล์ SVG ได้ตรงๆพอเปิดไฟล์ก็จะมาเปิดในเบราว์เซอร์แทน
แต่ SVG ก็มีข้อเสียนะ
อย่างที่บอกไปว่าไฟล์ SVG นั้นเป็นการประกอบกันของเวกเตอร์ ฉะนั้น SVG จะทำงานได้ไม่ดีในรูปภาพที่มีรายละเอียดเยอะๆ เช่น ภาพถ่ายทั่วไป เพราะถ้าทำจริงๆโค้ดคงจะวุ่นวายน่าดู แต่สำหรับภาพ 2 มิติอย่างโลโก้ ภาพแผนภูมิ กราฟิกง่ายๆ หรือ Infographic นั้นไม่มีปัญหา
อีกประเด็นคือการทำความเข้าใจกับโค้ดในไฟล์ .SVG นั้นเป็นเรื่องที่ยาก เห็นโค้ดแล้วจินตนาการไม่ออกว่าจะออกมาเป็นรูปแบบไหน โดยวิธีการผลิตภาพ SVG ขึ้นมาส่วนใหญ่จะทำในโปรแกรมวาดภาพ (เช่น Adobe Photoshop/Illustrator) แล้วเซฟเป็น .SVG
และถ้าใครยังใช้เบราวเซอร์รุ่นที่เก่ามากๆอยู่ ก็จะไม่สามารถประมวลผลโค้ดออกมาเป็นรูปได้
เซฟไฟล์ .SVG ยังไงดี
ปกติถ้าเจอไฟล์ .SVG นั้นเราจะไม่สามารถเซฟรูปในแบบปกติที่ทำได้ แต่ถ้าได้ URL ของไฟล์ SVG มาแล้วอยากเซฟลงเครื่อง ก็สามารถเซฟจากออปชั่นเซฟของเบราว์เซอร์ได้เสมือนเป็นหน้าเว็บหนึ่งได้เลย
มีไฟล์ .SVG อยู่ เอาไปใช้ยังไงดี – แปลงเป็น PNG โลด
ไฟล์ .SVG นั้นสามารถเปิดได้ด้วย Web Browser ทั่วไป แต่ถ้าจะเอาไปใช้ทำอย่างอื่นต่อก็ต้องเปิดด้วยโปรแกรมที่รองรับ เช่น Adobe PhotoShop, Illustrator, InDesign, Microsoft Visio หรือโปรแกรมฟรีอย่าง Inkscape และ GIMP
แต่วิธีที่ง่ายที่สุดที่อยากแนะนำคือการแปลง SVG เป็นไฟล์ PNG ซึ่งมีเครื่องมือออนไลน์ฟรีอยู่หลายเจ้าในอินเทอร์เน็ต โดยเว็บที่ผู้เขียนใช้ประจำคือ https://ezgif.com/svg-to-png เพราะนอกจากจะอัพโหลดไฟล์จากเครื่องไปแปลงได้แล้ว ยังรองรับการแปลงจาก URL ตรงๆด้วย
อ้างอิง