ทำไม SVG จึงเห็นเป็นพิกเซล และจะแก้อย่างไร

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

วินิจฉัยใน 30 วินาที

• ซูมมาก ๆ (500% ขึ้นไป) ในโปรแกรมสองตัว หากเห็นบล็อกในทุกโปรแกรม อาจเป็นเนื้อหาแรสเตอร์ หากเห็นเฉพาะแอปเดียว แอปนั้นน่าจะแปลงภาพตัวอย่างเป็นแรสเตอร์
• เปิด SVG ในโปรแกรมแก้ไขข้อความ แท็ก <image> พร้อมข้อมูล data:image/png;base64,… ยาว ๆ หมายความว่า “เวกเตอร์” ของคุณเป็นบิตแมปที่ปลอมตัวมา
• ใช้การตรวจไฟล์ตัดสิน การซูมทำให้สงสัย ส่วนองค์ประกอบ <image> หรือวัตถุภาพสี่เหลี่ยมยืนยันว่ามีพิกเซลฝังอยู่

สาเหตุที่ 1: มีพิกเซลอยู่ใน SVG

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

• การแปลงปลอม เครื่องมือ “PNG เป็น SVG” บางตัวไม่ได้ลากเส้นเลย แค่ห่อบิตแมปไว้ในแท็ก <image> แล้วส่งกลับด้วยนามสกุล .svg มันขยายได้แย่เท่ากับ PNG เดิม เพราะมัน คือ PNG เดิม
• การส่งออกที่แปลงส่วนยากเป็นแรสเตอร์ แอปออกแบบส่งออกส่วนที่ทำได้เป็นพาธ แล้วแปลงส่วนที่ทำไม่ได้เป็นแรสเตอร์อย่างเงียบ ๆ เช่น เงาตกกระทบ ความเบลอ ตาข่ายไล่สี และภาพเติมในรูปทรง นี่คือสาเหตุที่โลโก้คมชัดทุกจุดยกเว้นโค้งหนึ่งจุดหรือเอฟเฟกต์หนึ่งอย่าง เป็นปริศนา “แตกเป็นพิกเซลบางส่วน” ที่พบได้บ่อยในฟอรัมออกแบบ
• เนื้อหาภาพถ่าย ภาพถ่ายไม่สามารถกลายเป็นพาธสะอาดได้ เครื่องมือที่ “แปลง” ภาพถ่ายเป็น SVG จึงมักฝังภาพแทน หรือสร้าง ภาพเลียนแบบที่ลดระดับสี เครื่องมือแผนที่ถึงกับทำเช่นนี้โดยตั้งใจสำหรับชั้นแสงเงา ซึ่งสมเหตุสมผล เพราะแสงเงามีโทนต่อเนื่องโดยธรรมชาติ
• ไฟล์ที่ห่อข้อมูลหลายรูปแบบ ไฟล์อาจมีข้อมูลเวกเตอร์ที่แอปหนึ่งอ่านได้แต่อีกแอปอ่านไม่ได้ เมื่อแอปพบข้อมูลที่ไม่เข้าใจ มันจะใช้ภาพตัวอย่างแรสเตอร์ที่เตรียมไว้แทน คุณจึงเห็นพิกเซลในโปรแกรมหนึ่ง แต่เห็นเวกเตอร์สะอาดในอีกโปรแกรม

วิธียืนยัน: เปิด .svg ในโปรแกรมแก้ไขข้อความใดก็ได้ แล้วค้นหา <image ข้อมูล base64 ยาว ๆ คือตัวการ ใน Inkscape หรือ Illustrator ให้คลิกบริเวณเบลอ: หากเลือกได้เป็นวัตถุ “ภาพ” สี่เหลี่ยมชิ้นเดียวแทนพาธ ก็ได้คำตอบเดียวกัน นี่คือการตรวจแบบเดียวกับที่ใช้จับ SVG ปลอมจากเครื่องมือ AI และเครื่องมือส่งออก และใช้เวลาไม่ถึงนาที

วิธีแก้: ต้องเปลี่ยนพิกเซลเป็นพาธ ซึ่งหมายถึงแปลงเนื้อหาแรสเตอร์เป็นเวกเตอร์จริง นำภาพต้นฉบับหรือภาพที่ฝังผ่าน การแปลงภาพเป็นเวกเตอร์จริง แล้วแทนองค์ประกอบ <image> ด้วยผลการลากเส้น หากเนื้อหาฝังเป็นภาพถ่าย การแปลงเป็นเวกเตอร์ก็มีข้อจำกัดของตัวเอง บางครั้งวิธีแก้ที่ตรงไปตรงมาคือยอมใช้แรสเตอร์ในส่วนที่เหมาะกับแรสเตอร์

หลักฐานอยู่ในตัวไฟล์

สาเหตุที่ 2: ไฟล์ปกติ แต่โปรแกรมแสดงผลแปลงเป็นแรสเตอร์

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

• กระบวนการนำเข้าของบางแอป แปลง SVG เป็นแรสเตอร์ตามขนาดนำเข้าหรือขนาดภาพตัวอย่าง เมื่อขยายภาพที่แคชไว้ภายหลัง คุณกำลังขยายบิตแมป วิธีแก้ในแอปคือให้นำเข้าหรือเรนเดอร์ที่ความละเอียดเป้าหมาย
• After Effects แปลงเลเยอร์เวกเตอร์เป็นแรสเตอร์ใหม่อย่างต่อเนื่องได้เมื่อมีการแปลงเลเยอร์ Adobe มีเอกสารเรื่อง สวิตช์ Continuously Rasterize สำหรับเลเยอร์เวกเตอร์ หากมีเพียงภาพตัวอย่างคอมโพสิชันที่ดูหยาบ ให้ตรวจความละเอียดภาพตัวอย่างและสวิตช์เลเยอร์ก่อนเปลี่ยน SVG
• Illustrator แสดงงานผ่าน Pixel Preview โดยตั้งใจได้ ปิด View > Pixel Preview ก่อนสรุปว่าตัวพาธเป็นพิกเซล
• ภาพขนาดย่อและภาพตัวอย่าง ภาพขนาดย่อในตัวจัดการไฟล์และภาพตัวอย่างด่วนเป็นแรสเตอร์ความละเอียดต่ำ จึงบอกอะไรเกี่ยวกับไฟล์ไม่ได้

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

สำหรับแอสเซ็ตเกม ให้ตรวจ กระบวนการนำเข้า SVG และแปลงเป็นแรสเตอร์ของ Godot หรือ เส้นทางนำเข้า SVG ของ Unity สำหรับตัวแก้ไขและระบบ UI ที่ใช้ ก่อนคิดว่าต้นฉบับไม่มีพาธเวกเตอร์

สาเหตุที่ 3: เวกเตอร์จริงที่ดูนุ่มในขนาดเล็ก

ไอคอนมักมีขนาด 16 ถึง 24 พิกเซล และที่ขนาดนั้น เส้นโค้งที่สมบูรณ์ทางคณิตศาสตร์ต้องวางลงบนตารางพิกเซลหยาบ การลบรอยหยักแบ่งพิกเซลขอบเป็นสีเทา ผลจึงดู “เบลอเล็กน้อย” โดยเฉพาะเส้นบางและตำแหน่งครึ่งพิกเซล เมื่อซูมจะเห็นขอบเวกเตอร์คมชัดสมบูรณ์ ซึ่งช่วยยืนยันว่าไม่ใช่กับดักภาพฝัง

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

สาเหตุและวิธีแก้แบบดูเร็ว

วิธีป้องกันพิกเซลใน SVG

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

PerfectVector ทำงานนี้อย่างไร

PerfectVector หลีกเลี่ยงกับดักนี้ด้วยการลากเส้นภาพเป็นพาธจริง ไม่เคยแค่ห่อภาพ อัปโหลด PNG หรือ JPG แล้วผลลัพธ์เป็นรูปทรงที่เลือก เปลี่ยนสี และซูมได้ต่อเนื่อง แต่ละสีเป็นวัตถุที่แก้ไขแยกกันได้ และไม่มีองค์ประกอบ <image> ที่ใดในไฟล์ หากเพิ่งพบว่า “SVG” ของคุณเป็นบิตแมปปลอมตัว ให้ แปลงภาพต้นฉบับอย่างถูกต้อง แล้วตรวจผลด้วยโปรแกรมแก้ไขข้อความแบบเดิม การเห็นความต่างครั้งเดียวเป็นวิธีเร็วที่สุดที่จะไม่พลาดอีก การแปลงครั้งแรก ๆ ฟรี และไม่ต้องใช้บัตรเครดิต

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

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

จะรู้ได้อย่างไรว่า SVG มีภาพฝัง? เปิดในโปรแกรมแก้ไขข้อความใดก็ได้ แล้วค้นหา <image ข้อความ data:image/png;base64 ยาว ๆ คือบิตแมปที่ฝังในไฟล์ หรือคลิกบริเวณเบลอใน Inkscape หรือ Illustrator หากเลือกเป็นวัตถุภาพสี่เหลี่ยมชิ้นเดียวแทนพาธ ก็เป็นภาพฝัง

ทำไม SVG เป็นพิกเซลในแอปหนึ่ง แต่ปกติในเบราว์เซอร์? แอปกำลังแปลงเป็นแรสเตอร์ เอนจินเกมแปลง SVG เป็นแรสเตอร์ตามขนาดนำเข้า ภาพตัวอย่าง After Effects แปลงตามความละเอียดคอมโพสิชัน และบางแอปเรนเดอร์ภาพฝังด้วยการประมาณค่าที่เห็นเป็นบล็อกโดยค่าเริ่มต้น หากเบราว์เซอร์หรือ Inkscape แสดงคมชัด ไฟล์ปกติ ให้ปรับการตั้งค่าของแอป

แก้ SVG ที่มีภาพฝังได้ไหม? ได้ นำแรสเตอร์ต้นฉบับหรือแยกภาพฝังออก แล้วใช้เครื่องมือแปลงเป็นเวกเตอร์จริง จากนั้นใช้ผลการลากเส้นแทนองค์ประกอบภาพ หากเนื้อหาฝังเป็นภาพถ่าย ควรคาดหวังเวกเตอร์ที่เลียนแบบอย่างมีสไตล์แทนสำเนาตรงต้นฉบับ เพราะภาพถ่ายลดเหลือพาธสะอาดไม่ได้

ทำไมไอคอน SVG จึงเบลอในขนาดเล็ก? โดยทั่วไปเป็นความนุ่มจากตารางพิกเซล ไม่ใช่ภาพฝัง ที่ขนาด 16 ถึง 24 พิกเซล การลบรอยหยักเปลี่ยนขอบที่ไม่ตรงพิกเซลให้เป็นพิกเซลเทา จัดขอบและความกว้างเส้นให้ตรงพิกเซลเต็มที่ขนาดเป้าหมายแล้วไอคอนจะคมขึ้น ซูมเพื่อยืนยันว่าตัวพาธคมชัด

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

แหล่งอ้างอิง

1. W3C: เนื้อหาฝังใน SVG 2 — กำหนดองค์ประกอบ <image> ของ SVG และเนื้อหาแรสเตอร์ภายในเอกสาร SVG
2. Adobe Illustrator: การดูงานออกแบบ — อธิบาย Pixel Preview และโหมดแสดงผลอื่น
3. Adobe After Effects: เลเยอร์ — อธิบายสวิตช์ Continuously Rasterize สำหรับเลเยอร์เวกเตอร์
4. Adobe Illustrator: สร้างงานที่ตรงพิกเซล — อธิบายการจัดแนวกับตารางพิกเซลสำหรับงานขนาดเล็ก

---

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