ทำไมรูใน SVG ถูกเติมสี และวิธีทำให้กลับมาว่าง

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

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

หาตำแหน่งที่รูหายก่อน

ใช้ตัวแสดงผลสองตัวก่อนเปลี่ยนรูปทรง:

1. บันทึกสำเนา SVG
2. เปิดสำเนาโดยตรงใน Chrome, Safari, Firefox หรือเบราว์เซอร์อื่น
3. วางบนพื้นหลังทั้งสว่างและมืด
4. เปิดไฟล์เดียวกันในแอปปลายทาง
5. เทียบรูจุดเดียวกัน ไม่ใช่ภาพเงารวมอย่างเดียว

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

รูปทรงขาวไม่ใช่รู

รูจริงแสดงสิ่งที่อยู่หลัง SVG รูปทรงขาวแค่ดูว่างบนพื้นที่ทำงานขาว สำหรับงานอินเทอร์เฟซเว็บ คู่มือ SVG pointer-events แสดงว่ารู พื้นที่ระบายสี และเป้าหมายคลิกแยกตอบสนองการคลิกอย่างไร

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

สำหรับช่องโปร่งใส ใช้พาธประกอบหรือลบรูปทรงในจากรูปทรงนอก มาสก์สร้างความโปร่งใสได้เช่นกัน แต่แอปผลิตหลายตัวจัดการพาธเรียบง่ายเชื่อถือได้กว่ามาสก์ สำหรับเวิร์กโฟลว์สคริปต์ ลองตัดและรวมพาธที่นำเข้าด้วย Paper.js แล้วเปิด SVG ที่ส่งออกอีกครั้งเพื่อตรวจช่อง

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

พาธประกอบเก็บความสัมพันธ์ของรู

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

จึงเป็นเหตุให้ Ungroup, Break Apart และ Release Compound Path ใช้แทนกันไม่ได้ การปล่อยพาธประกอบอาจทำเส้นขอบในเป็นวัตถุเติมสีทั่วไป รูปทรงยังอยู่ แต่ความสัมพันธ์กับเส้นขอบนอกหาย

คืนความสัมพันธ์บนสำเนา:

1. เลือกขอบนอกและเฉพาะเส้นขอบที่จะเป็นรู
2. ใช้ Make Compound Path, Combine หรือคำสั่งเทียบเท่า
3. ใช้สีเติมเดียวกับวัตถุที่ได้
4. ตรวจกฎเติมสี
5. เปิด SVG ที่บันทึกในเบราว์เซอร์และแอปปลายทางอีกครั้ง

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

คืนความสัมพันธ์ ไม่ใช่แค่รูปลักษณ์

สำหรับงานตราประทับ ตรวจรูปทรงตราประทับเครื่องปั้นดินเผาแบบนูนกับเว้า ก่อนตัดสินว่าส่วนใดควรยังเติมอยู่

ตรวจ nonzero เทียบกับ evenodd

SVG มีกฎเติมสีสองแบบ ข้อกำหนดการระบายสี SVG 2 กำหนด nonzero เป็นค่าเริ่มต้น และ evenodd เป็นอีกตัวเลือก

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

พาธขั้นต่ำนี้มีสี่เหลี่ยมสองรูปทิศเดียวกัน เมื่อใช้ evenodd ตรงกลางจะยังโปร่งใส:

<path
  fill="#2563eb"
  fill-rule="evenodd"
  d="M10 10H90V90H10Z M30 30H70V70H30Z"
/>

การเปลี่ยนกฎมีประโยชน์เมื่อตรงกับงาน แต่ไม่ใช่วิธีซ่อมทุกกรณี เส้นขอบทั้งสองยังต้องถูกประเมินเป็นพาธย่อยของรูปทรงเดียวกัน การตั้ง fill-rule="evenodd" บนสองวัตถุไม่เกี่ยวกันไม่ได้ทำให้ชิ้นหนึ่งเจาะอีกชิ้น

หากคง nonzero ให้กลับทิศเฉพาะเส้นขอบในเมื่อโปรแกรมมีคำสั่ง Illustrator มีทั้งตัวเลือกกฎเติมสีและการควบคุมทิศพาธประกอบ บันทึกสำเนาก่อนกลับทิศ เพราะการตัดตัวเองและช่องซ้อนหลายชั้นอาจให้ผลต่างจากวงแหวนเรียบง่าย

เมื่อ SVG ถูกแต่ตัวนำเข้าผิด

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

ซ่อมตามลำดับนี้:

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

สำหรับเวิร์กโฟลว์สร้างความหนา ปลายทางต้องรู้จักโปรไฟล์ปิดที่เลือกได้ด้วย การวิเคราะห์ SVG สร้างความหนาไม่ได้ ครอบคลุมปลายเปิด วัตถุซ้ำ และความถูกต้องโปรไฟล์หลังรูคงอยู่แล้ว

เมื่อการแกะรอยปิดช่อง

เครื่องมือแกะรอยอาจปิดช่องตัวอักษรเล็กหรือรวมช่องแคบเมื่อต้นฉบับจิ๋ว เบลอ หรือคอนทราสต์ต่ำ นี่เป็นปัญหารูปทรง ไม่ใช่กฎเติมสี: ขอบด้านในไม่เคยถูกสร้างใน SVG

กลับไปแรสเตอร์ต้นฉบับแล้ว:

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

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

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

ตรวจสุดท้ายอย่างปลอดภัย

ก่อนส่ง SVG ที่ซ่อม:

• ดูบนพื้นหลังสว่าง มืด และโปร่งใส;
• เลือกวัตถุและยืนยันว่าเป็นพาธประกอบตามที่ตั้งใจหนึ่งชิ้น;
• ตรวจ fill rule ในโปรแกรมหรือซอร์ส SVG;
• ตรวจทุกช่องในตัวอักษร วงแหวน และพื้นที่ว่างปิดล้อม;
• เปิดไฟล์ส่งออกใหม่แทนเชื่อพื้นที่ทำงานที่ยังไม่บันทึก;
• ทดสอบแอปปลายทางจริง;
• แยกเก็บต้นฉบับแก้ไขได้กับสำเนาส่งงานลดความซับซ้อน

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

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

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

ควรใช้ fill-rule="evenodd" สำหรับรู SVG ไหม? evenodd มักสะดวกกับเส้นขอบซ้อนเพราะทิศทางไม่ตัดสินผล แต่ยังทำงานภายในรูปทรงเดียว ไม่ได้ลบวัตถุแยก คง nonzero เมื่อต้นทางและปลายทางรักษาทิศเส้นขอบที่ต้องการ

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

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

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

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

1. W3C — การระบายสี SVG 2 — นิยาม nonzero, evenodd และค่า fill-rule เริ่มต้น
2. W3C — พาธ SVG — นิยามพาธ พาธย่อย และรูปทรงพาธปิด
3. Adobe Illustrator — สร้างพาธประกอบ — อธิบายรูประกอบ กฎเติมสี และการกลับทิศพาธองค์ประกอบ
4. PerfectVector — ภาพเป็นเวกเตอร์ — เวิร์กโฟลว์แรสเตอร์เป็น SVG ปัจจุบันที่ใช้ในกรณีต้องแกะรอยใหม่

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