รูปทรงกับพิกเซล
PNG เก็บข้อมูลเป็นตารางพิกเซล เมื่อขยายขนาด ซอฟต์แวร์จะคาดเดาสิ่งที่อยู่ระหว่างพิกเซลเหล่านั้น ซึ่งทำให้ขอบทุกด้านเบลอ ส่วน SVG เก็บข้อมูลเป็นคำสั่ง: วาดสี่เหลี่ยมตรงนี้ ขนาดเท่านี้ สีนี้ ไม่ว่าคุณจะต้องการขนาด 2 ซม. หรือ 2 ม. มันก็จะวาดออกมาได้อย่างคมชัดทั้งคู่
ทำไม QR code ถึงได้รับผลกระทบมากกว่ารูปถ่าย
เครื่องสแกนจะอ่าน QR code โดยการสุ่มตัวอย่างตารางและตัดสินใจว่าแต่ละเซลล์สว่างหรือมืด ขอบที่เบลอจะทำให้เซลล์มีสีเทากลางๆ และเซลล์ที่มีสีเทากลางๆ คือจุดที่การถอดรหัสเริ่มล้มเหลว รูปถ่ายที่เบลอเล็กน้อยก็ยังดูเป็นรูปถ่าย แต่ QR code ที่เบลอเล็กน้อยจะไม่สามารถใช้งานเป็น QR code ได้อีกต่อไป
ปัญหานี้จะยิ่งแย่ลงสำหรับสัญลักษณ์ที่มีความหนาแน่นสูง ข้อมูล payload ที่ยาว เช่น ข้อมูล vCard หรือ URL ที่มีพารามิเตอร์ จะต้องใช้โมดูลจำนวนมากขึ้นในพื้นที่สี่เหลี่ยมขนาดเท่าเดิม ดังนั้นแต่ละโมดูลจึงมีขนาดเล็กลง และขอบที่เบลอแต่ละด้านก็จะกินพื้นที่ของโมดูลมากขึ้น
เลือกตามจุดประสงค์การใช้งาน
| ตำแหน่งที่จะนำโค้ดไปใช้ | รูปแบบไฟล์ | เหตุผล |
|---|---|---|
| นามบัตร ใบปลิว บรรจุภัณฑ์ | SVG | เครื่องพิมพ์สามารถปรับขนาดให้เข้ากับเลย์เอาต์ได้โดยไม่สูญเสียคุณภาพ |
| โปสเตอร์ สติกเกอร์ติดกระจก ป้าย | SVG | ขนาดใหญ่คือจุดที่ไฟล์ PNG จะสูญเสียความคมชัด |
| ไฟล์ออกแบบในโปรแกรมแก้ไขเวกเตอร์ | SVG | รูปทรงที่แก้ไขได้ เปลี่ยนสีได้ ไม่มีการสุ่มตัวอย่างใหม่ (resampling) |
| ลายเซ็นอีเมล | PNG | โปรแกรมรับส่งอีเมลจัดการกับภาพแรสเตอร์ได้ดีและคาดเดาผลลัพธ์ได้ง่ายกว่ามาก |
| สไลด์นำเสนอหรือภาพหน้าจอ | PNG | ขนาดการแสดงผลตายตัว ไม่มีการปรับขนาด |
| ช่องอัปโหลด CMS ของระบบอื่น | PNG | บางระบบปฏิเสธการอัปโหลดไฟล์ SVG โดยพื้นฐาน |
การทำงานกับไฟล์ SVG
- ใช้วิธีวางไฟล์ (Place) อย่าใช้วิธีวางภาพหน้าจอ (Paste) นำเข้าไฟล์ลงในเครื่องมือจัดหน้า การคัดลอกภาพพรีวิวจะเป็นการทิ้งข้อมูลเวกเตอร์และทำให้คุณได้ภาพพิกเซลกลับมาอีกครั้ง
- เปลี่ยนสีอย่างระมัดระวัง โปรแกรมแก้ไขเวกเตอร์ใดๆ ก็สามารถเปลี่ยนสีโมดูลได้ ควรให้โมดูลมีสีเข้มบนพื้นหลังสีอ่อน โค้ดที่สลับสีและคู่สีพาสเทลที่มีคอนทราสต์ต่ำมักจะสแกนไม่ติดในเครื่องอ่านจริง
- ห้ามยืดโค้ดด้านใดด้านหนึ่ง ปรับขนาดทั้งสองด้านไปพร้อมกัน โค้ดที่ถูกยืดคือตารางที่พัง และไม่มีระบบแก้ไขข้อผิดพลาดใดที่สามารถซ่อมแซมรูปทรงเรขาคณิตได้
- รักษาพื้นที่ว่าง (quiet zone) ขอบสีขาวเป็นส่วนหนึ่งของสัญลักษณ์ การครอปภาพจนชิดขอบโมดูลคือสาเหตุที่พบบ่อยที่สุดที่ทำให้เลย์เอาต์สวยๆ ไม่สามารถสแกนได้
หากคุณจำเป็นต้องใช้ PNG
ส่งออกในขนาดพิกเซลที่เลย์เอาต์สุดท้ายต้องการ หรือใหญ่กว่านั้น และห้ามขยายขนาดในภายหลัง การย่อขนาดมักจะปลอดภัย แต่การขยายขนาดคือสาเหตุของความเบลอ
ห้ามนำไฟล์ PNG ไปผ่านเครื่องมือบีบอัดแบบสูญเสียข้อมูล (lossy compressor) ร่องรอยความผิดเพี้ยนของ JPEG (artifacts) จะเกาะกลุ่มอยู่รอบๆ ขอบสีดำและสีขาวที่ตัดกันชัดเจน ซึ่งก็คือทุกขอบใน QR code หากคุณต้องการให้ไฟล์มีขนาดเล็กลง เครื่องมือบีบอัดรูปภาพของเราจะเข้ารหัส PNG ใหม่แบบไม่สูญเสียข้อมูล (lossless) และจะยกเลิกผลลัพธ์หากไฟล์ไม่ได้มีขนาดเล็กลงจริงๆ
การตรวจสอบที่ทำงานกับทั้งสองรูปแบบ
Vaultaire สร้างไฟล์ PNG และ SVG จากข้อมูล payload เดียวกัน จากนั้นจะถอดรหัสไฟล์ที่เสร็จสมบูรณ์แต่ละไฟล์อีกครั้งด้วยตัวอ่านที่แยกต่างหาก การดาวน์โหลดจะปลดล็อกก็ต่อเมื่อข้อความที่ถอดรหัสตรงกับสิ่งที่คุณตรวจสอบแล้วเท่านั้น วิธีนี้ช่วยดักจับการเรนเดอร์ที่เสียหายก่อนที่จะถูกส่งไปพิมพ์ อย่างไรก็ตาม ระบบไม่สามารถบอกคุณได้ว่าเลย์เอาต์สุดท้ายได้เว้นพื้นที่ว่าง (quiet zone) ไว้หรือไม่ ดังนั้นคุณควรสแกนตัวอย่างงานพิมพ์ด้วยตัวเอง
คำถามที่พบบ่อยเกี่ยวกับ SVG และ PNG
SVG หรือ PNG?
SVG สำหรับงานพิมพ์หรืองานที่ปรับขนาดได้ เช่น โปสเตอร์ บรรจุภัณฑ์ นามบัตร ป้าย และไฟล์ออกแบบ PNG สำหรับตำแหน่งที่ตายตัวบนหน้าจอ เช่น ลายเซ็นอีเมลหรือสไลด์
QR code แบบ SVG มีคุณภาพสูงกว่าหรือไม่?
มันไม่มีความละเอียดเลย มันอธิบายโมดูลต่างๆ เป็นรูปทรงและเรนเดอร์ในขนาดใดก็ได้ที่คุณต้องการ ส่วน PNG มีตารางพิกเซลที่ตายตัวและจะเบลอเมื่อขยายเกินขนาดนั้น
ฉันสามารถเปลี่ยนสีได้หรือไม่?
ได้ ในโปรแกรมแก้ไขเวกเตอร์ใดๆ ก็ได้ และไฟล์จะยังคงคมชัด ควรให้โมดูลมีสีเข้มบนพื้นหลังสีอ่อน โค้ดที่สลับสีหรือมีคอนทราสต์ต่ำอาจสแกนไม่ติดในเครื่องอ่านบางรุ่นไม่ว่าจะเป็นรูปแบบใดก็ตาม
ทำไมโค้ดที่พิมพ์ออกมาถึงดูเบลอ?
ไฟล์ PNG ถูกขยายขนาดเกินตารางพิกเซล เครื่องพิมพ์จึงสร้างรายละเอียดขึ้นมาเองที่ขอบของโมดูล ให้พิมพ์ไฟล์ SVG หรือส่งออกไฟล์ PNG ในขนาดที่ตรงกับความต้องการของเลย์เอาต์พอดี
โรงพิมพ์รับไฟล์ SVG หรือไม่?
ส่วนใหญ่รับ และเครื่องมือจัดหน้าทุกตัวสามารถนำเข้าไฟล์ได้ หากโรงพิมพ์ต้องการไฟล์ PDF หรือ EPS ให้วางไฟล์ SVG ลงในเครื่องมือออกแบบแล้วส่งออกจากที่นั่น รูปทรงต่างๆ จะยังคงอยู่
ฉันสามารถแปลง PNG เป็น SVG ในภายหลังได้หรือไม่?
การแปลงโค้ดแบบแรสเตอร์กลับไปเป็นเวกเตอร์เป็นการคาดเดาขอบภาพที่เบลอไปแล้ว ให้สร้าง SVG จากข้อมูลแทน ซึ่งใช้เวลาเพียงเสี้ยววินาทีและได้รูปทรงเรขาคณิตที่แม่นยำ