SVG ยกเลิกการจัดกลุ่มไม่ได้: ระบุวัตถุแล้วแก้ให้ถูก

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

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

วินิจฉัยอย่างรวดเร็ว

• หากแผงวัตถุแสดงกลุ่มหรือซอร์ส SVG มี <g> ใช้ Ungroup
• หากการเลือกเดียวมีรูหรือเกาะแยก ลอง Break Apart หรือ Release Compound Path บนสำเนา
• หากแก้โหนดแล้วเห็นขอบเดียว ไม่มีอะไรให้ยกเลิกกลุ่ม ให้แก้หรือแบ่งพาธ
• หากวัตถุเป็นสี่เหลี่ยมชิ้นเดียวและเป็นบล็อกเมื่อขยาย น่าจะเป็นภาพฝัง หาต้นฉบับแรสเตอร์แล้วแปลงให้ถูก

ตรวจประเภทวัตถุที่เลือกก่อน

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

ใน diagrams.net ให้เทียบ ภาพ SVG กับสเตนซิลใน draw.io ก่อนพยายามแยกกลุ่มงานนำเข้า ภาพขยายได้กับรูปทรงแผนภาพที่มีจุดเชื่อมกำหนดไว้ใช้กระบวนการแก้ต่างกัน

สำหรับคำถามภาพกับรูปทรงในโปรแกรมแผนภาพอีกตัว ดู สิ่งที่แก้ไขได้หลังนำเข้า SVG ใน Excalidraw

นี่อธิบายว่าทำไมอาการเดียวปรากฏใน Cricut Design Space, Silhouette Studio, LightBurn, Inkscape, Illustrator และแอปออฟฟิศ ใน PowerPoint แยกกราฟิก SVG จากรูปทรง Office ก่อนด้วย คู่มือแปลง SVG และแก้บางส่วนใน PowerPoint แต่ละโปรแกรมตั้งชื่อคำสั่งต่างกัน แต่ไฟล์เบื้องล่างยังเป็นโครงสร้างทั่วไปไม่กี่แบบ

สี่โครงสร้าง สี่วิธีแก้

กลุ่มเป็นกรณีเดียวที่ Ungroup แก้ได้

ในมาร์กอัป SVG องค์ประกอบ <g> เป็นภาชนะ สำหรับองค์ประกอบ SVG อื่น และมาตรฐานอนุญาตกลุ่มซ้อนลึกเท่าใดก็ได้ นักออกแบบอาจจัดวงกลม ชื่อแบรนด์ และพื้นหลังเป็นกลุ่มให้เคลื่อนพร้อมกัน Ungroup เอาภาชนะกลุ่มของโปรแกรมออกแล้วเผยวัตถุลูก

ลองดังนี้:

1. ทำสำเนาไฟล์หรือบันทึกสำเนาทำงาน
2. เลือกวัตถุครั้งเดียว
3. ดูแผง Layers หรือ Objects แทนพึ่งผืนผ้าใบ
4. หากรายการที่เลือกเป็นกลุ่ม ใช้ Ungroup หนึ่งครั้ง
5. ทำซ้ำเฉพาะเมื่อมีกลุ่มซ้อน

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

พาธประกอบดูแยกแต่ทำงานเป็นวัตถุเดียว

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

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

หากต้องแยกจริง:

• ทำสำเนาวัตถุก่อน;
• ใช้ Release Compound Path, Break Apart หรือคำสั่งเทียบเท่า;
• ตรวจทุกรูและช่องอักษรภายหลัง;
• คืนโครงสร้างประกอบหากปลายทางต้องการเงาร่างสะอาดชิ้นเดียว

สำหรับไฟล์ตัด การแยกไม่ได้ดีขึ้นโดยอัตโนมัติ หากพาธประกอบปัจจุบันตัดถูก ปล่อยไว้

พาธเดี่ยวไม่มีอะไรภายในให้เผย

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

ทางเลือกตอนนี้คือการทำงานกับพาธ ไม่ใช่กลุ่ม:

• ขยับโหนดปรับขอบ;
• ตัดพาธที่โหนดที่เลือก;
• แบ่งรูปทรงด้วยพาธอื่น;
• ใช้ Break Apart หากมีพาธย่อยไม่เชื่อม;
• วาดส่วนเฉพาะใหม่เมื่อผลลากหยาบเกิน

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

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

SVG อาจมีแรสเตอร์เพียงภาพเดียว

SVG อนุญาตองค์ประกอบ <image> ข้อกำหนดเนื้อหาฝัง SVG ระบุว่าอ้างเนื้อหา PNG หรือ JPEG แรสเตอร์ได้ ไฟล์นอกลงท้าย .svg แต่งานภายในยังเป็นพิกเซล

ตรวจเร็วสามข้อ:

1. ซูมเข้า หากขอบเป็นบล็อก เนื้อหาที่เลือกเป็นแรสเตอร์
2. เปิดในโปรแกรมแก้ไขข้อความ ค้นหา <image, data:image, .png หรือ .jpg
3. ตรวจประเภทวัตถุ ภาพสี่เหลี่ยมไม่มีโหนดแก้ไขไม่ใช่กลุ่มเวกเตอร์

อย่าลากเส้นจากภาพหน้าจอ SVG หาก PNG, JPG หรือไฟล์งานเดิมยังอยู่ ใช้ต้นฉบับสะอาดที่สุด ทุกผลส่งออกและภาพหน้าจอเพิ่มเบลอจากสเกลหรือรอยบีบอัดได้

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

รายละเอียดกับดักภาชนะนี้อยู่ในคู่มือ SVG ที่ยังดูเป็นพิกเซล

แล้วพาธตัดภาพ มาสก์ และสัญลักษณ์ล่ะ?

บางไฟล์เป็นเวกเตอร์แต่ยังแยกกลุ่มธรรมดาไม่ได้:

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

ควรเก็บกรณีเหล่านี้ไว้เมื่อลุคทำงานแล้วและต้องการเพียงปรับขนาดหรือวางไฟล์ การขยายทุกอย่างทำให้ SVG เล็กเป็นระเบียบดูแลยากขึ้นมาก

ลำดับซ่อมอย่างปลอดภัย

เริ่มจากสิ่งที่เปลี่ยนโครงสร้างน้อยที่สุด:

1. บันทึกสำเนา
2. ปลดล็อกวัตถุหรือเลเยอร์
3. ตรวจประเภทในแผงเลเยอร์
4. Ungroup กลุ่มที่ยืนยันแล้ว
5. ปลดการตัดภาพหรือมาสก์เฉพาะเมื่อเรขาคณิตซ่อนคือปัญหา
6. แยกพาธประกอบเฉพาะเมื่อต้องแก้ชิ้นแยก
7. แก้หรือแบ่งพาธเดี่ยวแทนพยายามแยกกลุ่ม
8. ลากใหม่เฉพาะเมื่อมีพิกเซลหรือเรขาคณิตใช้ไม่ได้ และมีแรสเตอร์เดิม

ลำดับนี้รักษารู การซ้อน และความสัมพันธ์เลเยอร์จนรู้ว่าเป็นสาเหตุ

ป้องกันในไฟล์ที่ส่งมอบอย่างไร

ก่อนส่ง SVG ให้คนอื่น:

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

หากซื้อไฟล์ เก็บชุดดาวน์โหลด ผู้สร้างอาจแนบ SVG แบบเลเยอร์, DXF, EPS หรือต้นฉบับ แม้ SVG แรกที่เปิดเป็นแบบแบน

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

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

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

แยก SVG เลเยอร์เดียวใน Cricut Design Space อย่างไร? หากสีเดียวและพาธเดียว Design Space ไม่มีเลเยอร์ซ่อนให้เผย แยกงานในโปรแกรมเวกเตอร์ กลับต้นฉบับแบบเลเยอร์ หรือสร้างบริเวณสีใหม่ก่อนนำเข้าอีกครั้ง

แยกกลุ่ม SVG ใน Inkscape หรือ Illustrator ได้ไหม? ได้เมื่อเป็นกลุ่มจริง ทั้งสองมีคำสั่งพาธประกอบ โครงสร้างตัดภาพ และแบ่งพาธด้วย คำสั่งเหล่านี้แก้โครงสร้างต่างกัน ไม่ควรมองเป็น Ungroup ที่แรงกว่า

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

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

1. W3C — โครงสร้างเอกสาร SVG — ภาชนะ <g> และโมเดลกลุ่มซ้อน
2. W3C — พาธ SVG — พาธ พาธย่อยไม่เชื่อม และเรขาคณิตพาธประกอบ
3. W3C — เนื้อหาฝัง SVG — PNG และ JPEG แรสเตอร์ในองค์ประกอบ <image>
4. MDN — การตัดภาพและมาสก์ SVG — ความต่างพฤติกรรมการตัดภาพกับมาสก์
5. Cricut — การอัปโหลดภาพ: รายการไม่รองรับ — วิธีที่แอปปลายทางหนึ่งจัดการพาธตัดภาพ ข้อความ ภาพเชื่อมโยง และแรสเตอร์ฝัง

---

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