เปิด SVG แล้วว่าง: ตรวจเจ็ดอย่างก่อนสร้างใหม่

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

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

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

1. เก็บไฟล์และตรวจว่ามีข้อมูลหรือไม่

ทำสำเนาด้วยชื่อใหม่ จากนั้นตรวจขนาดไฟล์และเปิดในโปรแกรมแก้ไขข้อความธรรมดา

ไฟล์ศูนย์ไบต์หรือเอกสารที่มีเพียงองค์ประกอบราก <svg> ว่างมีข้อมูลให้กู้จากสำเนานั้นน้อย ไฟล์ที่มีพาธ กลุ่ม สไตล์ หรือบล็อกข้อมูลเข้ารหัสขนาดใหญ่ไม่ได้ว่างเพียงเพราะผืนงานดูว่าง

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

2. เปรียบเทียบเบราว์เซอร์และโปรแกรมเวกเตอร์

ลาก SVG เข้าเบราว์เซอร์ปัจจุบัน แล้วเปิดสำเนาเดียวกันใน Inkscape, Illustrator, Figma หรือโปรแกรมเวกเตอร์อื่น

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

3. เลือกทั้งหมดและตรวจขอบเขต

ในโปรแกรมเวกเตอร์ใช้ Select All มองหากรอบเลือก พิกัด ความกว้าง และความสูง

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

หากวัตถุอยู่นอกผืนงาน ให้ย้ายสิ่งที่เลือกกลับเข้าไปในหน้า หรือปรับหน้าให้พอดีภาพ หลีกเลี่ยงปรับสเกลพาธ เว้นแต่ขนาดจริงจะผิดด้วย

4. เทียบงานกับ viewBox

เปิด SVG เป็นข้อความแล้วตรวจองค์ประกอบราก:

<svg xmlns="http://www.w3.org/2000/svg"
  width="800" height="600" viewBox="0 0 800 600">

ตัวเลข viewBox สี่ค่าคือ x ต่ำสุด y ต่ำสุด ความกว้าง และความสูง ตาม ข้อกำหนดระบบพิกัด SVG งานที่พิกัดแถว 10000,10000 จะไม่ปรากฏใน viewBox="0 0 800 600" มิติ viewBox ที่เป็นศูนย์หรือติดลบปิดการเรนเดอร์องค์ประกอบนั้น

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

5. ตรวจสีและการมองเห็น

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

• fill="none" โดยไม่มีเส้นขอบ;
• สีเติมขาวบนผืนงานขาว;
• opacity="0", fill-opacity="0" หรือ stroke-opacity="0";
• display="none" หรือ visibility="hidden";
• คลาสที่สไตล์ชีตกำหนดค่าเหล่านั้น;
• เส้นขอบบางมากที่สเกลปัจจุบัน

วางสี่เหลี่ยมสีหลังงานชั่วคราว หรือกำหนดสีเติมเด่นให้สำเนาพาธหนึ่ง หากปรากฏ ให้คืนสไตล์ที่ต้องการ แทนปล่อยสีทดสอบไว้ในไฟล์สุดท้าย

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

6. ตรวจคุณสมบัติที่ปลายทางอาจไม่รองรับ

ค้นหา clipPath, mask, pattern, filter, <image> และ <foreignObject> ในมาร์กอัป

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

หากรูปยังอยู่แต่ป้าย HTML หาย ให้ เปรียบเทียบ foreignObject กับข้อความ SVG โดยตรง แล้วแทนเฉพาะป้ายที่มีปัญหา

หากเห็นพาธแต่เงาถูกตัด ให้ ตรวจเงา SVG ที่ถูกตัด ด้วยการทดสอบพื้นที่ฟิลเตอร์กับวิวพอร์ตภายนอกแยกกัน

การอ้างอิงก็ล้มเหลวได้ ตรวจว่า ID ที่ url(#name) ใช้มีจริงและไม่ซ้ำ หาก SVG พึ่งพาภาพ ฟอนต์ สไตล์ชีต หรือไฟล์เชื่อมโยงภายนอก การย้าย SVG อาจทำให้ทรัพยากรนั้นใช้ไม่ได้

สำหรับแอป Qt คู่มือเรนเดอร์ SVG ใน Qt แยกการตรวจโมดูลและการโหลดออกจากข้อจำกัดคุณสมบัติที่รองรับ เปรียบเทียบต้นฉบับเล็กก่อน แล้วตรวจงานด้วยเส้นทางเรนเดอร์ที่เลือก

เมื่อเบราว์เซอร์แสดงแบบแต่ CAD นำเข้าไม่ได้อะไร ให้หา <path>, <rect>, <circle> และรูปทรงเวกเตอร์ทั่วไปอื่น PNG ฝังที่มองเห็นไม่มีเส้นโค้งให้ CAD ใช้

7. ตรวจความถูกต้องหรือส่งออกไฟล์ใหม่

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

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

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

เมื่อใดควรสร้างใหม่หรือแปลงเวกเตอร์ใหม่

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

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

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

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

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

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

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

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

หางาน SVG ที่อยู่นอกผืนงานอย่างไร? ใช้ Select All แล้วตรวจขอบเขตหรือพิกัดสิ่งที่เลือก หากกรอบอยู่ไกลจากหน้า ให้ย้ายกลับหรือปรับหน้าให้พอดีภาพ จากนั้นปรับ viewBox ให้ตรงรูปทรงที่ต้องการให้เห็น

SVG เป็นสีขาวจนดูว่างได้ไหม? ได้ สีเติมหรือเส้นขอบขาวหายบนผืนงานขาว ไฟล์อาจใช้ความทึบศูนย์ display="none" หรือ visibility="hidden" ด้วย ทดสอบบนพื้นหลังสีและตรวจสไตล์ที่คำนวณแล้ว

ทำไม SVG นำเข้า Fusion หรือ CAD อื่นแล้วว่าง? ไฟล์อาจมีบิตแมปฝังหรือเนื้อหาเว็บไม่รองรับแทนเส้นโค้งเวกเตอร์ CAD ต้องใช้รูปทรงพาธที่นำเข้าได้ ค้นหา <path> และรูปที่เกี่ยวข้อง แล้วตรวจว่าเนื้อหาที่เห็นอยู่ใน <image> หรือ <foreignObject> แทนหรือไม่

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

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

1. W3C — ระบบพิกัด SVG 2 — กำหนดวิวพอร์ต viewBox หน่วย และการแปลงรูป
2. W3C — โมเดลเรนเดอร์ SVG 2 — อธิบายการตัดขอบ มาสก์ ฟิลเตอร์ การประกอบภาพ และลำดับเรนเดอร์
3. W3C — เนื้อหาฝัง SVG 2 — กำหนดภาพฝังและเนื้อหาต่างชนิดใน SVG
4. W3C — บริการตรวจมาร์กอัป — ให้การตรวจเอกสารตามมาตรฐานสำหรับแก้ปัญหามาร์กอัป

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