SVG กับ PNG: เปรียบเทียบเวกเตอร์และราสเตอร์ฉบับสมบูรณ์
SVG และ PNG แก้ปัญหาคนละอย่าง SVG เก็บรูปเป็นรูปทรงคณิตศาสตร์ที่ขยายได้ไม่จำกัดโดยไม่เสียคุณภาพ PNG เก็บรูปเป็นตารางพิกเซลสี เลือกผิดฟอร์แมตหมายถึงเสียทั้งประสิทธิภาพและคุณภาพ
อะไรทำให้ SVG และ PNG แตกต่างกันโดยพื้นฐาน
ความแตกต่างระหว่าง SVG กับ PNG สะท้อนความแตกต่างของกราฟิกเวกเตอร์กับกราฟิกราสเตอร์ในวงกว้าง
SVG (Scalable Vector Graphics) เป็นฟอร์แมตที่ใช้ XML อธิบายรูปผ่านสูตรคณิตศาสตร์ของรูปทรง เส้น เส้นโค้ง และสี เมื่อคุณซูมเข้า SVG เบราว์เซอร์จะคำนวณและวาดรูปทรงแต่ละอันใหม่ที่ขนาดใหม่ ผลลัพธ์คมชัดเสมอ ไม่ว่าจะแสดงเป็น Favicon 16px หรือป้ายโฆษณา 16,000px
PNG (Portable Network Graphics) เป็นฟอร์แมตราสเตอร์ที่เก็บรูปเป็นตารางพิกเซล แต่ละพิกเซลมีค่าสีเฉพาะ รูปมีความละเอียดคงที่ ขยายเกินขนาดเดิมจะเบลอและเป็นพิกเซล ย่อลงก็เท่ากับดาวน์โหลดข้อมูลเกินจำเป็น
ความแตกต่างนี้กำหนดทุกอย่าง: ขนาดไฟล์ ความสามารถในการขยาย เวิร์กโฟลว์การแก้ไข และประเภทรูปที่แต่ละฟอร์แมตจัดการได้ดี
เมื่อไหร่ที่ SVG เหมาะกว่า
SVG เก่งในกราฟิกที่สร้างเป็นงานเวกเตอร์ตั้งแต่ต้น ใช้ SVG สำหรับ:
- โลโก้ — โลโก้ต้องดูคมชัดในทุกขนาด ตั้งแต่ไอคอนแท็บเบราว์เซอร์ 32px จนถึงแบนเนอร์ Hero เต็มหน้า SVG จัดการได้ด้วยไฟล์เดียว กับ PNG ต้องใช้หลายความละเอียด
- ไอคอน — ไอคอน UI ไอคอนนำทาง ไอคอนโซเชียลมีเดีย ตัวอย่างจริง: เว็บอีคอมเมิร์ซที่มีไอคอนหมวดหมู่ 50 ตัว รวม 1.2 MB เป็น PNG ลดเหลือแค่ 95 KB หลังจากเปลี่ยนเป็น SVG
- ภาพประกอบและไดอะแกรม — ไดอะแกรมเทคนิค ผังงาน แผนที่ และ Infographic ที่มีเส้นสะอาดและสีเรียบ SVG เก็บข้อความให้เลือกได้และค้นหาได้
- แอนิเมชัน — องค์ประกอบ SVG สามารถทำแอนิเมชันด้วย CSS หรือ JavaScript ทำ Loading Spinner, Micro-interaction และกราฟแบบ Interactive ได้โดยไม่ต้องใช้ไฟล์วิดีโอ
- Favicon — เบราว์เซอร์สมัยใหม่รองรับ SVG Favicon ดูคมชัดบนทุกความหนาแน่นหน้าจอ สร้าง Favicon จากรูปใดก็ได้ด้วยเครื่องมือสร้าง Favicon ของเรา
ตามข้อมูลจาก W3Techs 65.5% ของเว็บไซต์ทั้งหมดใช้ SVG ทำให้เป็นฟอร์แมตรูปที่นิยมอันดับ 3 รองจาก PNG และ JPEG การใช้งานเติบโตประมาณ 8% ต่อปี ขับเคลื่อนโดยความต้องการดีไซน์ Responsive และประโยชน์ด้านประสิทธิภาพ
เมื่อไหร่ที่ PNG เหมาะกว่า
PNG เหมาะเมื่อรายละเอียดระดับพิกเซลสำคัญ หรือเนื้อหารูปเป็นราสเตอร์โดยธรรมชาติ:
- รูปถ่ายที่ต้องการ Transparency — สินค้าตัดออกบนพื้นหลังโปร่งใส รูปถ่ายซ้อนชั้น PNG รองรับ Alpha Transparency เต็มรูปแบบพร้อมเก็บรายละเอียดรูปถ่าย (สำหรับรูปถ่ายที่ไม่ต้องการ Transparency JPEG มักดีกว่า)
- Screenshot — Screenshot มีองค์ประกอบ UI ที่แม่นยำระดับพิกเซล ข้อความ Anti-aliased และการไล่ระดับสีละเอียด ซึ่งเป็นราสเตอร์โดยธรรมชาติ PNG เก็บรักษาได้ตรงตามเดิม
- งานศิลปะซับซ้อนที่มีสีหลากหลาย — ภาพวาดดิจิทัลที่ละเอียด Texture และภาพประกอบ Photorealistic ที่ไม่สามารถทำให้เรียบง่ายเป็นรูปทรงเวกเตอร์สะอาดๆ ได้
- กราฟิกราสเตอร์ที่มีข้อความซ้อน — เมื่อต้องการการแสดงผลระดับพิกเซลที่แม่นยำของรูปถ่ายผสมข้อความ PNG ป้องกันไม่ให้เกิด Artifact จากการบีบอัดรอบขอบข้อความ
ขนาดไฟล์และประสิทธิภาพ
สำหรับกราฟิกประเภทที่ SVG จัดการได้ดี (ไอคอน โลโก้ ภาพประกอบเรียบง่าย) การลดขนาดไฟล์จะมากอย่างเห็นได้ชัด:
| ประเภทกราฟิก | ขนาด PNG | ขนาด SVG | ลดได้ |
|---|---|---|---|
| ไอคอนเรียบง่าย (64x64) | ~25 KB | ~2 KB | 92% |
| โลโก้ (500x200) | ~45 KB | ~8 KB | 82% |
| 50 ไอคอนหมวดหมู่ | ~1.2 MB รวม | ~95 KB รวม | 92% |
| ภาพประกอบเรียบง่าย | ~150 KB | ~20 KB | 87% |
ไฟล์ SVG ยังบีบอัดได้ดีมากด้วย Gzip หรือ Brotli (มาตรฐานบนเว็บเซิร์ฟเวอร์ส่วนใหญ่) มักลดลงอีก 50-70% ระหว่างการส่ง SVG ขนาด 20 KB อาจส่งจริงแค่ 6-8 KB
ประโยชน์ด้านประสิทธิภาพมากกว่าแค่ขนาดไฟล์ SVG สามารถ Inline ตรงเข้าไปใน HTML ได้ ลด HTTP Request ได้หนึ่งรอบ แสดงผลที่ความละเอียดเดิมของอุปกรณ์โดยไม่ต้องใช้ srcset และเป็น Text-based จึง Cache ง่ายและ Diff ง่ายใน Version Control
สำหรับรูปซับซ้อน เช่น รูปถ่าย Texture รายละเอียดมาก รูปที่มีสีเฉพาะตัวหลายพันสี SVG ไม่มีข้อได้เปรียบ สำหรับรูปเหล่านี้ PNG, JPEG หรือฟอร์แมตใหม่อย่าง WebP และ AVIF คือเครื่องมือที่ถูกต้อง
SVG กับ PNG: ตารางเปรียบเทียบเร็ว
| คุณสมบัติ | SVG | PNG |
|---|---|---|
| ประเภทรูป | เวกเตอร์ (รูปทรงและ Path) | ราสเตอร์ (ตารางพิกเซล) |
| ความสามารถขยาย | ไม่จำกัด (คมชัดเสมอ) | ความละเอียดคงที่ (เบลอเมื่อขยาย) |
| Transparency | รองรับ | รองรับ (Alpha Channel) |
| เหมาะกับรูปถ่าย | ไม่ | ใช่ (มี Transparency) |
| เหมาะกับไอคอน/โลโก้ | ใช่ | ได้ แต่ไฟล์ใหญ่กว่า |
| แอนิเมชัน | ได้ (CSS/JS) | ไม่ (APNG มีแต่จำกัด) |
| แก้ไขด้วยโค้ด | ได้ (XML-based) | ไม่ได้ |
| SEO (ข้อความ Index ได้) | ได้ | ไม่ได้ |
| รองรับเบราว์เซอร์ | ทุกเบราว์เซอร์สมัยใหม่ | ทุกเบราว์เซอร์ |
| ขนาดไฟล์ทั่วไป (ไอคอน) | 1-5 KB | 10-50 KB |
สถานการณ์ปฏิบัติจริง
สมมติว่าคุณกำลังออกแบบเว็บไซต์บริษัทใหม่ แบรนด์มีโลโก้ ไอคอนนำทาง 30 ตัว รูปถ่าย Hero และ Screenshot สินค้าหลายรูป นี่คือวิธีจัดฟอร์แมตให้เหมาะสม:
- โลโก้ → SVG โลโก้ปรากฏใน Header (เล็ก) Footer (กลาง) และหน้า About (ใหญ่) ไฟล์ SVG เดียวจัดการทุกขนาด คมชัดบนจอ Retina หนักแค่ประมาณ 5 KB
- 30 ไอคอน → SVG Sprite ไอคอนทั้ง 30 ตัวในไฟล์เดียว หนักรวมประมาณ 40-60 KB นั่นน้อยกว่าไอคอน PNG สองสามตัว CSS ควบคุมสีและขนาดได้
- รูปถ่าย Hero → ไม่ใช่ SVG ไม่ใช่ PNG ใช้ JPEG หรือ WebP เพื่อไฟล์เล็กสุดที่คุณภาพรับได้ อ่านคู่มือปรับแต่งรูปสำหรับเว็บสำหรับแนวทางปฏิบัติที่ดี
- Screenshot สินค้า → PNG Screenshot มีข้อความ UI และองค์ประกอบที่ต้องการความแม่นยำระดับพิกเซลซึ่งต้องเก็บรักษาแบบ Lossless
วิธีแปลงระหว่าง SVG และ PNG
แปลงระหว่างฟอร์แมตเหล่านี้ได้ในเบราว์เซอร์โดยตรง ไม่ต้องอัปโหลดไปเซิร์ฟเวอร์ ไม่ต้องติดตั้งซอฟต์แวร์ Vizua ประมวลผลทุกไฟล์บนอุปกรณ์ของคุณ:
- SVG เป็น PNG — แรสเตอร์ไรซ์ไฟล์ SVG ที่ความละเอียดใดก็ได้
- เวกเตอร์ไรซ์รูป — แปลงรูปราสเตอร์ (PNG, JPEG) เป็นฟอร์แมต SVG เวกเตอร์
- สร้าง Favicon — สร้างไฟล์ Favicon จากรูปใดก็ได้ รวมถึงเอาต์พุต SVG สำหรับเบราว์เซอร์สมัยใหม่
สำหรับมุมมองกว้างขึ้นในการเลือกฟอร์แมตที่ถูกต้องสำหรับทุกรูปบนเว็บไซต์ คู่มือขนาดไฟล์รูปของเราระบุขนาดและฟอร์แมตที่แนะนำแยกตามการใช้งาน
คำถามที่พบบ่อย
SVG สามารถแทนที่ PNG ได้ทั้งหมดไหม?
ไม่ SVG เหมาะสำหรับกราฟิก ไอคอน และภาพประกอบ แต่ไม่สามารถแสดงรูปถ่ายได้อย่างมีประสิทธิภาพ รูปถ่ายที่แปลงเป็น SVG จะใหญ่มาก (ฝัง Raster เป็น Base64) หรือสูญเสียรายละเอียดทั้งหมด (Trace เป็นรูปทรงเรียบง่าย) ใช้ SVG สำหรับเนื้อหาที่เหมาะกับเวกเตอร์ และ PNG (หรือ JPEG/WebP) สำหรับรูปถ่าย
ไฟล์ SVG ปลอดภัยที่จะใช้บนเว็บไซต์ไหม?
ไฟล์ SVG สามารถมี JavaScript ซึ่งหมายความว่า SVG ที่เป็นอันตรายอาจรันโค้ดในเบราว์เซอร์ได้ ถ้าคุณรับการอัปโหลด SVG จากผู้ใช้ ให้ทำความสะอาดโดยลบ Script Tag และ Event Handler ออกเสมอ สำหรับ SVG ที่คุณสร้างเองหรือได้จากนักออกแบบที่เชื่อถือได้ ไม่มีความเสี่ยงในทางปฏิบัติ
ทำไม SVG บางไฟล์ถึงดูเบลอ?
ไฟล์ SVG เองไม่เคยเสียคุณภาพเมื่อขยาย แต่อาจดูเบลอได้ถ้าเบราว์เซอร์แสดงผลที่ขนาดพิกเซลแบบเศษส่วน ถ้า SVG ใช้รูป Raster ฝังอยู่แทนที่จะเป็น Vector Path จริงๆ หรือถ้าดีไซน์ไม่ได้สร้างบน Pixel Grid ตรวจสอบว่า SVG ใช้รูปทรงเวกเตอร์ที่สะอาดและจัดเส้นหลักให้ตรงกับพิกเซลเต็ม
ควรใช้ SVG หรือ Icon Font สำหรับไอคอนเว็บไซต์?
SVG เป็นแนวทางที่ดีที่สุดในปัจจุบัน Icon Font เคยนิยมในช่วง 2010s แต่มีปัญหาเรื่อง Accessibility (Screen Reader อาจอ่านผิด) ข้อจำกัดด้าน Styling และค่าใช้จ่ายในการโหลดไฟล์ Font ทั้งหมดเพื่อไอคอนไม่กี่ตัว SVG แบบ Inline โหลดเร็วกว่า ปรับ Style แต่ละตัวได้ด้วย CSS และ Accessible โดยค่าเริ่มต้นเมื่อเพิ่ม ARIA Attribute ที่เหมาะสม
แปลงรูปของคุณตอนนี้
ฟรี ปลอดภัย ทุกอย่างทำงานในเบราว์เซอร์ ไม่ต้องอัปโหลด ไม่ต้องสมัคร