SVG กับ PNG: ควรใช้อันไหน?

ความต่างหลัก: คณิตศาสตร์ปะทะพิกเซล

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

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

สรุปง่าย ๆ คือ SVG วาดจากคณิตศาสตร์และขยายได้ไม่จำกัด PNG คือภาพถ่ายพิกเซลที่ตายตัวและดูดีที่สุดที่ขนาดที่มันถูกสร้าง

จุดที่ SVG ชนะ

อะไรก็ตามที่สร้างจากรูปทรงสะอาด ๆ ควรเป็น SVG โลโก้ ไอคอน องค์ประกอบ UI ลายเส้น กราฟ ภาพประกอบแบบแบน สิ่งเหล่านี้ประกอบจากเส้นทางและการเติมสี ซึ่งเป็นสิ่งที่ SVG อธิบายได้ดีที่สุด ไฟล์จึงเล็กมาก ไอคอนง่าย ๆ อาจมีขนาดแค่ไม่กี่ร้อยไบต์

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

จุดที่ PNG ชนะ

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

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

คู่มือตัดสินใจฉบับย่อ

ใช้ SVG เมื่อภาพเป็นโลโก้ ไอคอน สัญลักษณ์ กราฟ หรือภาพประกอบแบบแบน; เมื่อต้องปรับขนาดไปใช้หลายขนาด; หรือเมื่อคุณอยากเก็บไว้แก้ไขต่อภายหลัง

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

เคล็ดลับใช้งานจริง: หลายทีมออกแบบกราฟิกเป็น SVG แล้ว export เป็น PNG ที่ขนาดเป๊ะตามที่แพลตฟอร์มต้องการ คุณได้ทั้งไฟล์ต้นฉบับที่แก้ไขได้และไฟล์ส่งมอบแบบแบน จากต้นทางเดียวกัน

แก้ไข SVG แล้ว export ได้ทั้งสองแบบ

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

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