PNG กับ SVG ต่างกันอย่างไร และควรใช้แบบไหน

1. ความต่างที่แกนกลาง: ตารางพิกเซล กับ เส้นทางทางคณิตศาสตร์

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

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

2. ขนาดไฟล์และพฤติกรรมการโหลด

สำหรับกราฟิกง่าย ๆ อย่างไอคอนและโลโก้ ไฟล์ SVG มักมีเพียงไม่กี่ KB และชุดเดียวใช้ได้ทุกความละเอียดหน้าจอ ส่วน PNG มักต้องเตรียมไฟล์ @2x และ @3x เพื่อให้คมบนจอ Retina ขนาดไฟล์จึงเพิ่มขึ้นหลายเท่า แต่กรณีภาพถ่ายกลับกัน: ภาพถ่ายมีการไล่สีที่หลากหลายมาก การฝืนเวกเตอร์ไลซ์จะสร้างเส้นทางมหาศาล ไฟล์ SVG จึงใหญ่กว่า JPG/WEBP มากและไม่คุ้มค่า

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

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

3. เมื่อไหร่ควรใช้ PNG

• ภาพถ่าย แสงและเงาที่ซับซ้อน และการไล่สีที่ละเอียดอ่อน;
• ภาพสกรีนช็อตและภาพหน้าจอที่ต้องตรงตามพิกเซล;
• กรณีที่แพลตฟอร์มรับเฉพาะบิตแมป เช่น การอัปโหลดรูปโปรไฟล์ในบางระบบหลังบ้าน;
• ทางเลือกสำรองเมื่อสภาพแวดล้อมเก่ามากไม่รองรับ SVG

4. เมื่อไหร่ควรใช้ SVG

• ไอคอนและโลโก้บนเว็บไซต์: ไฟล์เดียวใช้ได้ทุกความละเอียด บนจอ Retina ยังคมชัด;
• กราฟิกที่ต้องเปลี่ยนสีด้วย CSS/JavaScript หรือทำแอนิเมชันวาดเส้น;
• แผนภาพข้อมูล: ไลบรารีแสดงข้อมูลอย่าง ECharts ส่งออกเป็น SVG โดยค่าเริ่มต้น;
• งานพิมพ์ ตัดด้วยเลเซอร์ และงานจารึก เพราะอุปกรณ์อ่านเส้นทางเวกเตอร์

5. PNG และ SVG แปลงไปมาระหว่างกันได้ไหม

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

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

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