ช่องขาวระหว่างรูปทรง SVG: ตรวจสาเหตุและแก้ไข

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

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

รอยต่อเรนเดอร์หรือช่องจริง?

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

ทำไมพาธที่แตะกันจึงมีรอยต่อได้

หน้าจอเรนเดอร์รูปเวกเตอร์บนตารางพิกเซล เมื่อขอบพาดผ่านพิกเซล การลบรอยหยักจะผสมพิกเซลระหว่างรูปกับพื้นหลังเพื่อให้ขอบดูเรียบ รูปสองชิ้นที่เรนเดอร์แยกกันอาจต่างผสมพิกเซลที่ขอบ แม้พิกัดเวกเตอร์จะพบกัน

สเกลเพิ่มตัวแปรอีกอย่าง พิกัดร่วมที่ตรงขอบพิกเซลพอดีที่ขนาดหนึ่งอาจอยู่ระหว่างพิกเซลที่อีกขนาด การปัดเศษตอนส่งออกก็ขยับขอบหนึ่งเล็กน้อยได้ เส้นจึงอาจปรากฏเฉพาะซูม 67% หายที่ 100% แล้วกลับมาในภาพย่อบนเว็บ

SVG อาจยังถูกต้องทางคณิตศาสตร์ การแก้รูปทรงก่อนทดสอบอาจสร้างส่วนซ้อนที่มองเห็นในงานโปร่งใส พิมพ์ ตัด หรือแอนิเมชัน

ความแตกต่างสำคัญคือเส้นขอบพื้นฐานมีขอบร่วมกันหรือไม่ รอยต่อเรนเดอร์เกิดบนรูปทรงที่แตะกันได้ แต่ช่องจริงยังเห็นระหว่างเส้นขอบเอง

ทดสอบสี่อย่างก่อนแก้ไข

1. เปลี่ยนซูม

ดู SVG หลายระดับซูม รวมทั้ง 100% และซูมสูง ช่องจริงยังอยู่ระหว่างพาธเมื่อขยาย ส่วนรอยต่อจากการสุ่มตัวอย่างมักปรากฏสลับหาย เปลี่ยนความหนา หรือหายไป

อย่าใช้ซูมอย่างเดียว ช่องรูปทรงบางอย่างเล็กกว่าพิกเซลและเปลี่ยนลักษณะการแสดงผลได้เช่นกัน

2. เปลี่ยนพื้นหลัง

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

3. ส่งออก PNG ความละเอียดสูง

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

4. ใช้มุมมองเส้นขอบหรือโครงเส้น

ปิดสีเติมแล้วตรวจขอบเขตจริง เลือกโหนดที่อยู่ข้างกันและเทียบพิกัด หากพาธพบกันพอดี เส้นที่เห็นเป็นปัญหาตัวเรนเดอร์ หากปลายหรือขอบไม่ตรงกัน ให้ซ่อมรูปทรง

สำหรับการแก้พาธที่ครอบคลุมขึ้น ดู วิธีแก้ SVG เก็บสำเนาไว้ เพราะวิธีแก้ที่ดีที่สุดขึ้นกับการใช้ไฟล์

แก้รอยต่อแสดงผล

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

ทางเลือกอื่น ได้แก่:

• เพิ่มเส้นขอบบางมากสีเดียวกับรูป โดยจัดแนวให้ปิดรอยต่อ
• วางรูปฐานสีตรงกันหลังชิ้นที่ติดกันทั้งหมด
• เพิ่มความแม่นยำพิกัดตอนส่งออก SVG หากการปัดเศษทำให้ขอบร่วมแยก
• เรนเดอร์ราสเตอร์ใหญ่แล้วลดขนาดเมื่อไฟล์ส่งมอบสุดท้ายเป็น PNG

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

เลือกการแก้หนึ่งอย่างแล้วทดสอบในปลายทางจริง การซ้อนวิธีแก้หลายอย่างอาจสร้างสันสีเข้มหรือส่วนโป่งตรงรูปซ้อนกัน

แก้ช่องว่างรูปทรงจริง

หากมุมมองเส้นขอบหรือผลลัพธ์ปลายทางยืนยันว่ามีช่อง:

1. จัดโหนดที่ต้องการให้ดูดติดพิกัดเดียวกัน
2. ขยายขอบข้างเคียงจนพบกันจริง
3. เชื่อมปลายเฉพาะเมื่อแบบต้องการพาธต่อเนื่องเดียว
4. ลบส่วนเส้นซ้ำหรือหลง
5. ส่งออกใหม่ด้วยความแม่นยำพิกัดเพียงพอ
6. เปิดไฟล์ใหม่และทดสอบสี่อย่างซ้ำ

หลีกเลี่ยงรูปขาวปิดช่อง มันซ่อนอาการได้เฉพาะบนพื้นหลังขาวและยังเป็นวัตถุเพิ่มในไฟล์

หากช่องมาจากการลากเส้นราสเตอร์ที่มีสัญญาณรบกวน อาจมีชิ้นบางและขอบที่เกือบพบกันมากมายทั่วแบบ การซ่อมทีละแห่งอาจนานกว่าลากเส้นต้นฉบับสะอาดใหม่

ปลายทางเปลี่ยนวิธีแก้ที่เหมาะสม

รอยแตกที่ยังอยู่ในพื้นผิว CAD หรือเมชปลายทางต่างจากรอยต่อหนึ่งพิกเซลในเบราว์เซอร์อย่างมีนัยสำคัญ หากรูปทรงปลายทางแยก ให้ซ่อมพาธต้นฉบับหรือค่าความคลาดเคลื่อนการแปลง หากมีเส้นเฉพาะภาพย่อในเบราว์เซอร์ รูปทรงผลิตอาจถูกต้องอยู่แล้ว

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

PerfectVector เหมาะกับส่วนใด

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

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

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

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

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

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

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

ช่อง SVG เล็ก ๆ สำคัญกับพิมพ์ 3D หรือตัดไหม? สำคัญหากยังอยู่ในพื้นผิว เมช หรือเส้นทางเครื่องมือ รอยต่อเฉพาะหน้าจอไม่ได้พิสูจน์ว่ารูปทรงเสีย ตรวจตัวอย่างปลายทางและซ่อมรอยแตกหรือเส้นขอบเปิดที่เปลี่ยนวัตถุที่ผลิต

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

1. W3C — โมเดลเรนเดอร์ SVG 2 — อธิบายลำดับลงสี การตัดขอบ การประกอบภาพ และการลบรอยหยัก SVG
2. MDN — shape-rendering — อธิบายคำแนะนำเรนเดอร์ที่ใช้กับรูปทรง SVG ได้
3. W3C — ระบบพิกัด SVG 2 — กำหนดโมเดลพิกัด วิวพอร์ต และการแปลงรูปเบื้องหลังการเรนเดอร์ที่ขึ้นกับสเกล

---

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