ทำไมสี SVG เปลี่ยนหลังส่งออก: วินิจฉัยสาเหตุ

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

อย่าเริ่มด้วยการแทนทุกค่า hex หาจุดที่รูปลักษณ์เปลี่ยนก่อน นั่นบอกว่าควรซ่อม SVG เปลี่ยนการส่งออก ลดความซับซ้อนสำเนาส่งมอบ หรือเก็บงานในรูปแบบอื่น

จับคู่อาการกับการตรวจแรก

ควรดูตรงไหนก่อน

แยกปัญหาในห้านาที

1. เก็บไฟล์หลักแก้ไขได้ไว้ไม่แตะ

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

2. เปิด SVG ที่ส่งออกสองที่

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

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

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

3. ตรวจคำสั่งลงสี

เปิด SVG ในโปรแกรมข้อความและค้นหา:

fill=
stroke=
currentColor
url(#
opacity=
fill-opacity=
mix-blend-mode
filter=

คุณกำลังหาโครงสร้าง ยังไม่เขียนใหม่ ค่าโดยตรง fill="#2F6BFF" ชี้ไปคนละทางกับ fill="currentColor" หรือ fill="url(#paint0)"

หากเปิดมาร์กอัป SVG ครั้งแรก คู่มือ แก้ไข SVG ที่กว้างกว่าอธิบายวิธีโค้ดและโปรแกรมภาพ

4. ลดวัตถุที่ล้มเหลวหนึ่งชิ้น

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

การทดสอบลดส่วนนี้ปลอดภัยกว่ารวมทั้งภาพเป็นภาพแบน เพราะให้ข้อจำกัดส่งมอบเฉพาะ

สาเหตุที่ 1: ตัวส่งออกแปลงปริภูมิสี

สี Hex และไวยากรณ์ rgb() ที่คุ้นเคยอธิบายสี sRGB CSS สมัยใหม่แสดงปริภูมิขอบเขตกว้างเช่น Display P3 ผ่าน color() ได้ตาม CSS Color Module Level 4 แอปออกแบบจึงเก็บสีต้นทางที่ต้องแปลงก่อนเป็นค่า hex sRGB ได้ และการแปลงอาจเปลี่ยนตัวเลขหรือตัดสีที่เกินขอบเขต

ตรวจตามลำดับ:

1. จดปริภูมิสีเอกสารต้นทางและค่าตัวเลขวัตถุเลือก;
2. ส่งออกวัตถุสีแบนเดียวที่ทึบเต็มและไม่มีเอฟเฟกต์;
3. เปิด SVG เป็นข้อความและอ่าน fill หรือ stroke ที่เขียนลงไฟล์;
4. เทียบตัวเลขส่งออกกับต้นทาง;
5. ทดสอบไฟล์เดียวกันในปลายทาง

หากค่าเปลี่ยนในไฟล์ การแปลงเกิดระหว่างส่งออก เลือกปริภูมิสีเป้าหมายอย่างตั้งใจแล้วส่งออกใหม่ หากค่าไม่เปลี่ยนแต่รูปลักษณ์ต่าง ไปตรวจ CSS เอฟเฟกต์ พื้นหลัง หรือพฤติกรรมนำเข้า

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

สาเหตุที่ 2: currentColor หรือ CSS แทนสี

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

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

ใช้หนึ่งในสองกลยุทธ์ส่งมอบ:

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

เมื่อหลาย SVG ในหน้ามี ID เช่น paint0, clip0 หรือ gradient1 ทำให้ ID ไม่ซ้ำและอัปเดตการอ้างอิงพร้อมกัน อย่าเปลี่ยนเฉพาะ id ทุก url(#id) ยังต้องหาเป้าหมายได้

หากเป้าหมายคือเปลี่ยนสีโดยตั้งใจแทนกู้สีส่งออกเปลี่ยน ใช้คู่มือแยก เปลี่ยนสี SVG อย่างปลอดภัย

สาเหตุที่ 3: ไล่สีหรือการอ้างอิงสีเสีย

การไล่สีและ pattern ของ SVG เป็นแหล่งสี รูปทรงชี้ผ่านการอ้างอิงเช่น fill="url(#brandGradient)" ขณะที่นิยามไล่สีมักอยู่ใน <defs> ข้อกำหนดแหล่งสี SVG 2 ยังนิยามผลของพิกัดและการแปลงไล่สี

สามการตรวจจับความเสียหายโครงสร้างส่วนใหญ่:

1. ทุก url(#id) มีนิยามตรง;
2. ID ยังไม่ซ้ำหลังรวมหลาย SVG ในหน้าหรือเอกสารเดียว;
3. ปลายทางเก็บชนิดสี หน่วย การแปลง และจุดไล่สีที่ไฟล์ใช้

หากสีทึบเรียบง่ายนำเข้าถูกแต่ไล่สีไม่ถูก เก็บไล่สีในไฟล์หลักและทำสำเนาส่งมอบสำหรับปลายทาง ลองไล่สีเส้นตรงหรือรัศมีเรียบง่ายก่อน หากปลายทางยังทำไม่ได้และรูปลักษณ์ตรงสำคัญกว่าสีแก้ได้ ใช้รูปแบบหรือแอสเซ็ตรวมเป็นภาพที่ขั้นตอนผู้รับรองรับ ตั้งชื่อสำเนาชัดเพื่อไม่ให้แทนต้นทางแก้ได้

สาเหตุที่ 4: ความทึบและการผสมเปลี่ยนผลที่เห็น

พิกเซลที่เห็นไม่ใช่สีเติมที่เก็บเสมอ fill-opacity มีผลกับสีเติมรูปทรง opacity กลุ่มใช้หลังรวมลูกของกลุ่ม และโหมดผสมผสมต้นทางกับพื้นหลัง ข้อกำหนด Compositing and Blending ของ W3C นิยามลำดับเรนเดอร์และสูตรผสมที่ขึ้นกับพื้นหลัง

จึงมีผลทางปฏิบัติสองอย่าง:

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

ทดสอบพื้นหลังจริง จากนั้นลบ mix-blend-mode ฟิลเตอร์ mask และความทึบกลุ่มทีละอย่างในสำเนา หากปลายทางเก็บเอฟเฟกต์จำเป็นไม่ได้ เลือกระหว่างเวกเตอร์ลดรายละเอียดกับแอสเซ็ตส่งมอบรวมเป็นภาพ อย่ารวมส่วนที่ไม่เกี่ยวของแบบ

สี่เหลี่ยมขาวหรือสีหลังงานเป็นอีกกรณี คู่มือ SVG พื้นหลังโปร่งใส แสดงวิธีแยกรูปทรงพื้นหลังจริงจากพื้นที่ว่าง

สาเหตุที่ 5: ปลายทางนำเข้าเพียงบางส่วนของ SVG

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

ใช้ทดสอบนำเข้าแบบควบคุมแทน:

1. นำเข้าพาธสีทึบเดียว;
2. เพิ่มไล่สีเดิม;
3. เพิ่มความทึบ;
4. เพิ่มการผสมหรือฟิลเตอร์;
5. หยุดที่เวอร์ชันแรกที่เปลี่ยน

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

เลือกวิธีแก้ปลอดภัยที่เล็กที่สุด

PerfectVector อยู่ตรงไหน

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

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

รายการตรวจส่งมอบ

• เก็บไฟล์หลักแก้ได้และแก้ในสำเนา
• เทียบไฟล์ส่งออกในเบราว์เซอร์กับปลายทางจริงบนพื้นหลังเดียว
• ตรวจว่าค่า fill และ stroke ที่เขียนลงไฟล์เปลี่ยนหรือไม่
• หา currentColor คลาสทั่วไป และ ID ซ้ำ
• จับทุกการอ้างอิง url(#id) กับนิยาม
• ทดสอบความทึบกลุ่ม โหมดผสม ฟิลเตอร์ และ mask แยกกัน
• ลดรายละเอียดเฉพาะคุณสมบัติที่ปลายทางทำไม่ได้
• เปิดหรือนำเข้าไฟล์ส่งมอบสุดท้ายใหม่ก่อนแทนเวอร์ชันก่อน

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

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

SVG เป็น RGB เสมอหรือไม่? สี hex และ rgb() ทั่วไปเป็น sRGB แต่ CSS สมัยใหม่แสดงปริภูมิเช่น Display P3 ได้ แอปออกแบบและพิมพ์อาจแปลงสีระหว่างส่งออกหรือนำเข้า ตรวจสีที่เขียนลงไฟล์และใช้รูปแบบผลิตที่โรงพิมพ์ขอสำหรับ CMYK หรือสีสปอต

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

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

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

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

1. W3C — รูปแบบ SVG 2 — นิยามรูปแบบ CSS แอตทริบิวต์ class และ style แอตทริบิวต์การนำเสนอ ลำดับแทนค่า และการสืบทอด SVG
2. MDN — แอตทริบิวต์ color ของ SVG — อธิบาย currentColor ให้ค่าสีเติม เส้นขอบ จุดไล่สี และคุณสมบัติเกี่ยวข้อง
3. W3C — แหล่งสี SVG 2 — นิยามไล่สีเส้นตรงและรัศมี การอ้างอิงสี ระบบพิกัด การแปลง และการแทรกค่าสี
4. W3C — CSS Color Module Level 4 — นิยามไวยากรณ์สี sRGB และปริภูมิกำหนดไว้ที่กว้างกว่ารวม Display P3
5. W3C — Compositing and Blending Level 1 — นิยามกลุ่มความทึบ ลำดับผสมภาพ พื้นหลัง และโหมดผสม SVG และ CSS

หากต้นทางดีที่สุดที่เหลือเป็น PNG หรือ JPG ให้ สร้างใหม่เป็น SVG ด้วย PerfectVector แล้วเทียบผลในเบราว์เซอร์เดี่ยวและปลายทางสุดท้ายก่อนแทนไฟล์เก่า