SVG กับ PNG: เปรียบเทียบเวกเตอร์และราสเตอร์ฉบับสมบูรณ์
SVG และ PNG แก้ปัญหาคนละแบบ SVG อธิบายเรขาคณิตเวกเตอร์และยังฝังเนื้อหาราสเตอร์ได้ ส่วน PNG เก็บตารางพิกเซลคงที่ การเลือกที่ถูกต้องขึ้นอยู่กับงานต้นฉบับ ขอบเขตความปลอดภัย การเข้าถึง ขั้นตอนแก้ไข พฤติกรรมการเรนเดอร์ และขนาดไฟล์ที่วัดจริง
ความแตกต่างหลักระหว่าง SVG และ PNG
ความแตกต่างระหว่าง SVG กับ PNG สอดคล้องโดยตรงกับความแตกต่างโดยรวมระหว่าง กราฟิกเวกเตอร์และกราฟิกราสเตอร์
SVG (Scalable Vector Graphics) ใช้ XML และอธิบายรูปทรง พาธ ข้อความ ฟิลเตอร์ สไตล์ และทรัพยากรที่ฝังได้ ส่วนเวกเตอร์จะวาดใหม่ตามขนาดที่เรนเดอร์ แต่ความคมยังขึ้นอยู่กับเรขาคณิต เส้น เอฟเฟกต์ การจัดแนวพิกเซล และภาพราสเตอร์ที่ฝัง
PNG (Portable Network Graphics) เป็นฟอร์แมตราสเตอร์ที่เก็บตารางพิกเซลคงที่ การขยายต้องสุ่มตัวอย่างใหม่และอาจดูนุ่มหรือแตกเป็นพิกเซล การส่งต้นฉบับที่ใหญ่กว่าช่องแสดงผลมากจะเพิ่มงานถ่ายโอนและถอดรหัส เว้นแต่ชุดภาพแบบตอบสนองจะช่วยให้เบราว์เซอร์เลือกไฟล์ที่เหมาะสม
ความแตกต่างนี้ส่งผลต่อทุกอย่าง ทั้งขนาดไฟล์ การย่อขยาย ขั้นตอนแก้ไข และชนิดภาพที่แต่ละฟอร์แมตจัดการได้ดี
ควรใช้ SVG เมื่อใด
SVG เป็นตัวเลือกที่ดีสำหรับงานเวกเตอร์ที่ตรวจทานแล้ว เมื่อเข้าใจข้อกำหนดด้านความปลอดภัย การเข้าถึง การเรนเดอร์ และการฝังอย่างชัดเจน:
- โลโก้ — SVG ที่สะอาดไฟล์เดียวใช้ได้กับขนาดแสดงผลหลายขนาดโดยไม่ขยายราสเตอร์ เครื่องหมายขนาดเล็กมากอาจยังต้องลดรายละเอียดเชิงการมอง ปรับเส้น หรือทำรุ่นเฉพาะ
- ไอคอน — ไอคอนส่วนติดต่อ การนำทาง และโซเชียลใช้เรขาคณิตและสไตล์ร่วมกันได้ SVG อาจเล็กกว่าราสเตอร์หลายความละเอียด แต่พาธซับซ้อนหรือการทำอินไลน์ซ้ำอาจให้ผลตรงข้าม
- ภาพประกอบและแผนภาพ — แผนภาพทางเทคนิค ผังงาน แผนที่ และอินโฟกราฟิกที่มีเส้นสะอาดและสีเรียบ ข้อความ SVG ยังคงเลือกได้เมื่อเก็บเป็นข้อความ แต่การเข้าถึงและการทำดัชนีต้องใช้มาร์กอัปและการฝังที่ถูกต้อง
- แอนิเมชัน — องค์ประกอบ SVG เคลื่อนไหวด้วย CSS, JavaScript หรือกลไก SVG ได้ แต่ยังต้องตรวจสอบการตั้งค่าลดการเคลื่อนไหว ภาระ CPU, CSP, การเข้าถึง และความซับซ้อนของการโต้ตอบ
- ฟาวิไอคอน — เบราว์เซอร์หลักในปัจจุบันใช้ SVG favicon ได้ แต่ชุดไอคอนที่ครบอาจยังต้องมีราสเตอร์หรือ ICO สำรองสำหรับระบบอื่น สร้างผลลัพธ์ทั่วไปจากภาพที่รองรับได้ด้วย เครื่องมือสร้าง Favicon
SVG รองรับอย่างกว้างขวางในเบราว์เซอร์ปัจจุบันและเครื่องมือออกแบบทั่วไป ความนิยมไม่ได้รับประกันว่าเนื้อหาชิ้นหนึ่งควรเป็นเวกเตอร์ ควรเปรียบเทียบความซับซ้อน ความปลอดภัย กลยุทธ์แคช การเข้าถึง และการเรนเดอร์
ควรใช้ PNG เมื่อใด
PNG เป็นตัวเลือกที่ดีเมื่อพิกเซลราสเตอร์แบบไม่สูญเสียข้อมูลหรือความโปร่งใสแบบอัลฟามีความสำคัญ และขนาดผลลัพธ์อยู่ในงบการส่งข้อมูล:
- ภาพถ่ายโปร่งใส — PNG รองรับอัลฟาและการเข้ารหัสพิกเซลแบบไม่สูญเสียข้อมูล แต่ภาพถ่ายละเอียดอาจมีขนาดใหญ่ เปรียบเทียบ WebP/AVIF แบบอัลฟาที่ไม่สูญเสียหรือสูญเสียข้อมูลเมื่อระบบรองรับ หากไม่ต้องโปร่งใส ให้ทดสอบ JPEG และฟอร์แมตภาพถ่ายสมัยใหม่
- ภาพหน้าจอ — ภาพจับหน้าจอมีส่วนติดต่อแบบราสเตอร์ ข้อความที่ทำแอนติแอลิแอส และไล่ระดับสี PNG รักษาค่าพิกเซลที่เข้ารหัสได้ ส่วนโปรไฟล์ เมทาดาทา การปรับขนาด และการแปลงพาเลตเป็นอีกประเด็นหนึ่ง
- งานศิลป์ซับซ้อนที่มีหลายสี — ภาพวาดดิจิทัล พื้นผิว และภาพประกอบเหมือนจริงที่ละเอียดจนลดเป็นรูปทรงเวกเตอร์สะอาดไม่ได้
- กราฟิกราสเตอร์ที่มีข้อความซ้อน — เมื่อต้องการขอบข้อความตรงตามพิกเซล PNG จะหลีกเลี่ยงอาร์ติแฟกต์การบีบอัดที่ฟอร์แมตแบบสูญเสียข้อมูลสร้างขึ้น
ขนาดไฟล์และประสิทธิภาพ
สำหรับไอคอน โลโก้ และภาพประกอบเรียบง่าย ทั้ง SVG ที่ปรับแล้วและตัวเลือกราสเตอร์อาจเล็กกว่าได้ ขึ้นอยู่กับเรขาคณิต มิติ การทำซ้ำ การบีบอัด และกลยุทธ์แคช:
| ประเภทกราฟิก | ขนาด PNG | ขนาด SVG | ประหยัดได้ |
|---|---|---|---|
| ไอคอนเรียบง่าย | หนึ่งขนาดราสเตอร์ต่อตัวเลือก | เรขาคณิตเวกเตอร์มักกะทัดรัด | วัดทั้งสองแบบ |
| โลโก้ | อาจต้องใช้หลายความละเอียด | มักเหมาะมากเมื่อมีต้นฉบับเวกเตอร์ | วัดทั้งสองแบบ |
| ชุดไอคอน | ไฟล์แยกอาจเพิ่มคำขอและไบต์ | สไปรต์ ไฟล์ภายนอก และมาร์กอัปอินไลน์มีต้นทุนแคชต่างกัน | วัดทั้งหน้า |
| ภาพประกอบเรียบง่าย | ขนาดเพิ่มตามมิติพิกเซลและรายละเอียด | ขนาดเพิ่มตามความซับซ้อนของพาธ สไตล์ และฟิลเตอร์ | ขึ้นอยู่กับเนื้อหา |
การบีบอัดข้อความอย่าง Brotli หรือ gzip อาจลดขนาดการส่ง SVG โดยผลลัพธ์ขึ้นอยู่กับมาร์กอัปและการตั้งค่าเซิร์ฟเวอร์ ควรเปรียบเทียบจำนวนไบต์หลังบีบอัดที่ส่งจริง ไม่ใช่เฉพาะขนาดไฟล์ต้นฉบับบนดิสก์
SVG แบบอินไลน์ไม่ต้องขอไฟล์แยก แต่เพิ่มขนาด HTML และแคชแยกไม่ได้ ส่วน SVG ภายนอกใช้ประโยชน์จากแคชเบราว์เซอร์ได้ เรขาคณิตเวกเตอร์มักไม่ต้องมีรุ่นตามความหนาแน่นแบบราสเตอร์ แต่ SVG ที่ซับซ้อนหรือฝังราสเตอร์อาจยังต้องจัดการแบบตอบสนอง เลือกวิธีฝังจากการวัดทั้งหน้า
สำหรับภาพถ่ายและพื้นผิวที่ละเอียด การไล่เส้นเวกเตอร์มักสร้างเรขาคณิตมากเกินไปหรือตัดรายละเอียดออก การฝังราสเตอร์ต้นฉบับใน SVG เพิ่มคอนเทนเนอร์และมักเพิ่มภาระ base64 โดยไม่ได้ทำให้ภาพเป็นเวกเตอร์ ควรใช้ฟอร์แมตราสเตอร์ที่เหมาะสม เช่น PNG, JPEG, WebP หรือ AVIF
SVG กับ PNG: ตารางเปรียบเทียบ
| คุณสมบัติ | SVG | PNG |
|---|---|---|
| ชนิดภาพ | เวกเตอร์ (รูปทรงและพาธ) | ราสเตอร์ (ตารางพิกเซล) |
| การย่อขยาย | ส่วนเวกเตอร์วาดใหม่ได้ แต่รายละเอียดยังสำคัญ | ตารางพิกเซลคงที่ การขยายอาจทำให้ดูนุ่ม |
| ความโปร่งใส | ได้ | ได้ (ช่องอัลฟา) |
| เนื้อหาภาพถ่าย | มักไม่เหมาะ ยกเว้นเมื่อฝังเป็นราสเตอร์ | ตัวเลือกอัลฟาแบบไม่สูญเสียข้อมูล ควรเปรียบเทียบขนาดส่ง |
| ไอคอน/โลโก้ | เหมาะมากเมื่อมีต้นฉบับเวกเตอร์สะอาดที่ตรวจทานแล้ว | ใช้ได้ที่มิติพิกเซลที่เตรียมไว้ |
| แอนิเมชัน | ได้ (กลไก SVG/CSS/JS) | ส่วนขยาย APNG |
| แก้ไขด้วยโค้ด | ได้ (ใช้ XML) | ไม่ได้ |
| ข้อความและการเข้าถึง | ทำได้ด้วยมาร์กอัปและการฝังที่ถูกต้อง | ต้องมีข้อความโดยรอบหรือ alt ที่เทียบเท่า |
| การรองรับเบราว์เซอร์ | เบราว์เซอร์หลักปัจจุบัน แต่กฎการฝังต่างกัน | กว้างมาก |
| ขนาดไฟล์ | ขึ้นอยู่กับเรขาคณิตและมาร์กอัป | ขึ้นอยู่กับมิติและเนื้อหา |
ตัวอย่างใช้งานจริง: ออกแบบเว็บไซต์บริษัทใหม่
สมมติว่าคุณกำลังออกแบบเว็บไซต์บริษัทใหม่ คุณมีโลโก้แบรนด์ ไอคอนนำทางและฟีเจอร์ 30 รายการ ภาพถ่ายหลัก และภาพหน้าจอผลิตภัณฑ์หลายภาพ ต่อไปนี้คือวิธีเลือกฟอร์แมต:
- โลโก้ → ใช้ SVG เมื่อมีต้นฉบับเวกเตอร์ที่สะอาด ไฟล์ที่ตรวจทานหนึ่งไฟล์รองรับขนาดแสดงผลหลายขนาดได้ ควรทดสอบเส้นและความอ่านง่ายในขนาดเล็ก
- ชุดไอคอน → สไปรต์ SVG หรือระบบคอมโพเนนต์ใช้เรขาคณิตซ้ำได้ ตรวจสอบการเข้าถึง พฤติกรรมแคช CSP และมาร์กอัปทั้งหมดที่ถ่ายโอน
- ภาพถ่ายหลัก → ทดสอบ JPEG, WebP และ AVIF ที่มิติและคุณภาพที่มองเห็นเท่ากัน และเก็บตัวเลือกสำรองที่ผู้ชมต้องใช้ อ่าน คู่มือปรับภาพให้เหมาะกับเว็บ
- ภาพหน้าจอผลิตภัณฑ์ → เริ่มด้วย PNG เมื่อต้องรักษาพิกเซลหลังถอดรหัส แล้วเปรียบเทียบตัวเลือกแบบไม่สูญเสียข้อมูลอื่นและรุ่นส่งแบบสูญเสียข้อมูลที่ยอมรับได้
วิธีแปลงระหว่าง SVG และ PNG
คุณแปลงไฟล์ที่รองรับในเบราว์เซอร์ได้โดยไม่ต้องติดตั้งซอฟต์แวร์ Vizua ประมวลผลไฟล์ที่เลือกในเบราว์เซอร์และไม่ส่งไปยังเซิร์ฟเวอร์ประมวลผลภาพของเรา แต่บริการของหน้าเว็บอาจยังใช้เครือข่าย:
- SVG เป็น PNG — แรสเตอร์ไรซ์ SVG ที่รองรับตามสเกลผลลัพธ์ที่มี แล้วตรวจสอบผล
- แปลงภาพเป็นเวกเตอร์ — ไล่เส้นภาพราสเตอร์ที่รองรับเป็นพาธ SVG โดยประมาณ และไม่สามารถกู้เรขาคณิตเวกเตอร์ต้นฉบับ
- เครื่องมือสร้าง Favicon — สร้างผลลัพธ์ favicon ทั่วไปจากภาพต้นฉบับที่รองรับ
หากต้องการดูมิติของตัวเลือกและงบไบต์เฉพาะหน้าเพิ่มเติม โปรดอ่าน คู่มือขนาดไฟล์ภาพ
คำถามที่พบบ่อย
SVG ใช้แทน PNG ได้ทั้งหมดหรือไม่
ไม่ได้ SVG เหมาะมากกับกราฟิก ไอคอน และภาพประกอบ แต่ไม่สามารถแทนภาพถ่ายได้อย่างมีประสิทธิภาพ ภาพถ่ายที่แปลงเป็น SVG จะมีขนาดใหญ่มากหากฝังข้อมูลราสเตอร์แบบ base64 หรือสูญเสียรายละเอียดเมื่อไล่เส้นเป็นรูปทรงอย่างง่าย ใช้ SVG กับเนื้อหาที่เหมาะกับเวกเตอร์ และใช้ PNG, JPEG หรือ WebP กับภาพถ่ายและภาพราสเตอร์ที่ซับซ้อน
ไฟล์ SVG ปลอดภัยสำหรับใช้บนเว็บไซต์หรือไม่
SVG เป็นเนื้อหา XML แบบทำงานได้ ซึ่งอาจมีสคริปต์ ตัวจัดการเหตุการณ์ การอ้างอิงภายนอก ลิงก์ CSS ฟิลเตอร์ และความสามารถอื่น ๆ จึงต้องปฏิบัติต่อ SVG ที่ไม่น่าเชื่อถือเหมือนโค้ด: ตรวจสอบด้วยรายการที่อนุญาต ทำความสะอาดด้วยเครื่องมือที่ยังได้รับการดูแล ส่งด้วยชนิดเนื้อหาและการแยกที่เหมาะสม และใช้ CSP แหล่งที่เชื่อถือได้ช่วยลดความเสี่ยงแต่ไม่แทนการตรวจทาน
ทำไม SVG ของฉันจึงดูเบลอ
เรขาคณิตเวกเตอร์วาดใหม่ได้หลายขนาดโดยไม่ขยายราสเตอร์ แต่ SVG ยังอาจดูนุ่มเพราะการจัดแนวเศษส่วน เส้นขอบ ฟิลเตอร์ การแปลง แอนติแอลิแอส ภาพราสเตอร์ที่ฝัง หรือจอแสดงผล ตรวจสอบ viewBox ขนาดที่เรนเดอร์ พฤติกรรมของเส้น และเนื้อหาราสเตอร์
ควรใช้ SVG หรือฟอนต์ไอคอนสำหรับไอคอนเว็บไซต์
SVG มักเหมาะเพราะแต่ละไอคอนกำหนดชื่อเพื่อการเข้าถึงได้ชัดเจน หรือซ่อนได้เมื่อเป็นของตกแต่ง และจำกัดขอบเขตสไตล์ได้ แต่ไม่ได้เร็วหรือเข้าถึงได้โดยอัตโนมัติ: มาร์กอัปอินไลน์เพิ่มขนาด HTML สไปรต์ภายนอกแคชได้ และต้องใช้ ARIA อย่างถูกต้อง ควรเปรียบเทียบความต้องการของระบบไอคอนแทนการใช้กฎเดียว
ฉันแปลง PNG เป็น SVG ได้หรือไม่
ได้ เครื่องมือแปลงเป็นเวกเตอร์ของ Vizua ไล่เส้นภาพราสเตอร์อย่าง PNG หรือ JPEG เป็นพาธ SVG โดยประมาณ ผลดีที่สุดกับโลโก้ ไอคอน และภาพประกอบเรียบง่ายที่มีสีจำกัดและขอบคม ไม่ใช่ภาพถ่ายซับซ้อน
แปลงภาพของคุณ
ไม่ต้องมีบัญชี ไฟล์ที่เลือกได้รับการประมวลผลในเบราว์เซอร์และไม่ถูกส่งไปยังเซิร์ฟเวอร์ประมวลผลภาพของเรา