เส้นขอบ SVG หายหลังส่งออก: หาสาเหตุให้พบ

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

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

ตรวจหาสาเหตุอย่างรวดเร็ว

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

ผลลัพธ์เส้นขอบสี่แบบ

ก่อนอื่น ตรวจว่าพาธยังอยู่หรือไม่

เปิดสำเนา SVG ในโปรแกรมแก้ไขข้อความแล้วค้นหาองค์ประกอบรูปทรงทั่วไป เช่น <path>, <line>, <polyline>, <circle> หรือ <rect> จากนั้นเลือกวัตถุที่หายในโปรแกรมเวกเตอร์และเปลี่ยนเป็นมุมมองเส้นขอบหรือโครงเส้น

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

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

หากเส้นหายเฉพาะใน Penpot ให้ใช้ การตรวจการนำเข้า SVG ใน Penpot เพื่อแยกปัญหาการส่งต่อ

สาเหตุที่ 1: เส้นขอบไม่มีสีที่มองเห็นได้

SVG แยกคุณสมบัติสีเติมกับสีเส้นขอบ พาธจึงมีอยู่ได้โดยไม่แสดงเส้น คู่มือสีเติมและเส้นขอบของ MDN ครอบคลุมคุณสมบัติหลัก รวมถึง stroke, stroke-width และความทึบ

ตรวจวัตถุที่เลือกและสไตล์ที่สืบทอดมาว่ามีสิ่งเหล่านี้หรือไม่:

• stroke="none";
• ไม่มี stroke ร่วมกับ fill="none";
• stroke-width="0" หรือความกว้างเล็กมาก;
• opacity="0" หรือ stroke-opacity="0";
• สีเส้นขอบตรงกับหน้าหรือรูปทรงรอบข้าง;
• display="none" หรือ visibility="hidden" บนวัตถุหรือกลุ่มแม่;
• คลาส CSS ที่เขียนทับแอตทริบิวต์การแสดงผล

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

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

สาเหตุที่ 2: เส้นถูกตัดที่ขอบหน้าหรือกรอบ

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

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

ตรวจการอ้างอิง clipPath และ mask ด้วย คลิปที่มีขนาดเท่าขอบเขตสีเติมอาจตัดเส้นขอบที่ยื่นออกไป องค์ประกอบ SVG ที่ซ้อนกันสร้างวิวพอร์ตของตัวเองได้ และพฤติกรรม overflow อาจต่างกันระหว่างเบราว์เซอร์กับตัวนำเข้าของโปรแกรมออกแบบ

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

สาเหตุที่ 3: สเกลหรือการแปลงรูปทำให้เส้นดูผิดไป

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

ตรวจ transform="scale(...)" บนพาธและกลุ่มแม่ใน SVG เปรียบเทียบ viewBox, width และ height ของเอกสาร แล้วทดสอบที่ซูม 100% และขนาดจริงสุดท้าย หากทั้งงานนำเข้าด้วยขนาดผิด ให้แก้การแมปเอกสารด้วย การทดสอบสเกล SVG ที่ทราบขนาด แทนการชดเชยด้วยความกว้างเส้นตามใจ

SVG รองรับ vector-effect="non-scaling-stroke" ด้วย ตาม เอกสารอ้างอิง vector-effect ของ MDN ค่า non-scaling-stroke ที่ใช้กันทั่วไปทำให้ความกว้างเส้นที่เรนเดอร์ไม่เปลี่ยนตามการแปลงรูปขององค์ประกอบ มีประโยชน์กับแผนภาพส่วนติดต่อและแผนที่ แต่ต้องตรวจในตัวนำเข้าปลายทาง เพราะการรองรับนอกเบราว์เซอร์ต่างกันตามแอป

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

สาเหตุที่ 4: ปลายทางสร้างลักษณะเส้นนั้นไม่ได้

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

ทดสอบลดคุณสมบัติบนสำเนา:

1. ลบฟิลเตอร์โดยเก็บเส้นขอบพื้นฐานไว้;
2. แทนลวดลายหรือพู่กันด้วยเส้นทึบธรรมดา;
3. ลบความกว้างแปรผัน;
4. ทำการแปลงรูปที่ซ้อนกันให้แบน;
5. ส่งออกวัตถุเดียวเป็น SVG ขั้นต่ำ;
6. เปิดไฟล์นั้นในปลายทาง

การลดคุณสมบัติครั้งแรกที่ทำให้เส้นกลับมาระบุคุณสมบัติที่ไม่รองรับ จากนั้นเลือกสิ่งทดแทนที่ย้ายไปใช้ได้ แทนการทำทั้งเอกสารให้แบน

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

เส้นขอบที่ยังปรับได้ หรือพาธรูปทรงเส้นขอบ?

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

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

เก็บต้นฉบับเส้นขอบที่ยังปรับได้ เพราะการขยายอาจ:

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

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

เลือกวิธีแก้ให้ตรงปลายทาง

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

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

เริ่มจากการตรวจที่ย้อนกลับได้ แล้วค่อยไปสู่การแปลงโครงสร้าง:

1. เก็บต้นฉบับที่แก้ไขได้และสร้างสำเนา;
2. ยืนยันว่ารูปทรงยังอยู่;
3. เปรียบเทียบตัวเรนเดอร์สองตัว;
4. ทดสอบสีเส้นขอบ ความกว้าง และความทึบที่กำหนดชัดเจน;
5. ตรวจความต่างสีกับพื้นหลังและ CSS ที่สืบทอด;
6. ตรวจขอบเขตหน้า คลิป มาสก์ และวิวพอร์ตซ้อนกัน;
7. ตรวจการแปลงรูปและการเรนเดอร์ที่ขนาดสุดท้าย;
8. ลดลักษณะที่ไม่รองรับทีละอย่าง;
9. แปลงเฉพาะเส้นที่จำเป็นเป็นรูปทรงในสำเนาส่งมอบ;
10. เปิด SVG ที่ส่งมอบอีกครั้งและเปรียบเทียบกับต้นฉบับ

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

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

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

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

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

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

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

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

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

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

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

1. W3C — การลงสี SVG 2 — กำหนดสีเติม เส้นขอบ ความกว้าง ปลายเส้น จุดต่อ และเอฟเฟกต์เวกเตอร์
2. W3C — ระบบพิกัด SVG 2 — อธิบายวิวพอร์ต viewBox หน่วย และการแปลงรูป
3. MDN — vector-effect — อธิบายพฤติกรรม non-scaling-stroke
4. Adobe Illustrator — จัดกลุ่มและขยายวัตถุ — อธิบายการขยายเส้นขอบเป็นวัตถุองค์ประกอบที่แก้ไขได้

---

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