ทำไมฟอนต์ใน SVG จึงเปลี่ยนหลังส่งออกหรือนำเข้า

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

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

สำหรับการส่งออก PNG อัตโนมัติ ให้ โหลดไฟล์ฟอนต์ใน resvg อย่างชัดเจน แล้วเปรียบเทียบตัวอักษรที่เรนเดอร์กับต้นฉบับก่อนส่งต่อ

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

ก่อนอื่น ตรวจว่า SVG ยังมีข้อความหรือไม่

นามสกุลไฟล์อย่างเดียวตอบไม่ได้ SVG แทนตัวอักษรได้อย่างน้อยสองวิธีที่พบบ่อย:

<text font-family="Example Sans" font-weight="600">Sample</text>

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

ข้อความที่แปลงเป็นเส้นขอบจะมีลักษณะใกล้เคียงแบบนี้:

<path d="M ... Z" />

ในกรณีนี้ ตัวอักษรแต่ละตัวถูกแปลงเป็นรูปทรงเวกเตอร์แล้ว ผู้รับไม่ต้องมีฟอนต์ แต่คำนั้นไม่ใช่สตริงข้อความทั่วไปที่แก้ไขได้อีกต่อไป

คุณตรวจได้โดยไม่ต้องเข้าใจมาร์กอัปทั้งหมด:

1. ทำสำเนา SVG;
2. เปิดสำเนาในโปรแกรมแก้ไขข้อความธรรมดา;
3. ค้นหา <text และ <tspan;
4. ค้นหาชื่อฟอนต์ที่มองเห็น;
5. หากไม่พบ ให้ตรวจว่าตัวอักษรสร้างจากองค์ประกอบ <path> หรือไม่

ในโปรแกรมเวกเตอร์ ใช้เครื่องมือข้อความแล้วคลิกตัวอักษร เคอร์เซอร์ข้อความกะพริบแสดงว่ายังเป็นข้อความ โหนดรอบตัวอักษรแต่ละตัวแสดงว่าเป็นเส้นขอบ

สามสถานะของตัวอักษร

สาเหตุที่ 1: ไม่ได้ติดตั้งฟอนต์ที่ต้องการ

แอตทริบิวต์ font-family ของ SVG เป็นรายการชื่อตระกูลฟอนต์ตามลำดับความสำคัญ ตาม เอกสารอ้างอิง SVG font-family ของ MDN ตัวเรนเดอร์จะเลือกจากรายการนั้น หากหาตระกูลแรกไม่พบ จะไปตัวถัดไป และท้ายที่สุดไปยังตระกูลทั่วไปอย่าง sans-serif หรือ serif

กรณีนี้เกิดบ่อยเมื่อ:

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

การติดตั้ง “ฟอนต์คล้าย ๆ กัน” ไม่ได้คืนเค้าโครงเดิม ฟอนต์ sans-serif สองตัวอาจมีความกว้างตัวอักษร ส่วนที่ยื่นขึ้น ระยะคู่ตัวอักษร และค่ามิติเส้นฐานต่างกัน ตัวแทนอาจดูใกล้เคียงแต่ยังดันคำที่จัดกึ่งกลางออกจากตำแหน่งที่ต้องการ เมื่อมีฟอนต์ที่ต้องการแล้ว ตัวอย่างการจัดแนวข้อความ SVG ในแนวตั้ง ช่วยแยกการวางเส้นฐานออกจากการจัดกึ่งกลางกล่องข้อความและการจัดกึ่งกลางตามที่มองเห็น

สาเหตุที่ 2: SVG คาดหวังเว็บฟอนต์ที่ไม่ได้โหลด

SVG ที่อยู่ในหน้าเว็บรับฟอนต์จาก CSS ของหน้าได้ และอาจมีบล็อกสไตล์ที่ใช้กฎ @font-face; SVG 2 กำหนดให้รองรับฟอนต์ที่ดาวน์โหลดได้ ผ่านโมเดล CSS Fonts การจัดแบบนี้ล้มเหลวได้เมื่อ URL ฟอนต์ผิด ไฟล์ยังไม่ได้เผยแพร่ การเข้าถึงถูกบล็อก รูปแบบที่ร้องขอไม่รองรับ หรือเปิด SVG เดี่ยว ๆ แทนหน้าเว็บที่จัดหาสไตล์ให้

ใช้เครื่องมือนักพัฒนาของเบราว์เซอร์แล้วโหลดหน้าใหม่ ในแผง Network กรองหาไฟล์ฟอนต์และดูคำขอที่ล้มเหลว ในสไตล์ที่คำนวณแล้วขององค์ประกอบ <text> ให้ยืนยันว่าฟอนต์ใดเรนเดอร์จริง แทนการเชื่อชื่อตระกูลที่ประกาศไว้

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

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

สาเหตุที่ 3: ตระกูลหรือน้ำหนักไม่ตรงกันทั้งหมด

การจับคู่ฟอนต์ของ CSS ใช้มากกว่าป้ายชื่อตระกูลที่มองเห็น SVG อาจร้องขอ:

font-family: "Example Sans";
font-style: normal;
font-weight: 600;

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

ตรวจเอกสารต้นฉบับเทียบกับ SVG เคียงกัน:

• ชื่อตระกูลตรงกันทุกตัว;
• รูปแบบและน้ำหนักตัวเลข;
• ระยะห่างตัวอักษร;
• ตัวพิมพ์ใหญ่เล็กและอักขระจริง;
• คุณสมบัติ OpenType เช่น ตัวอักษรควบ;
• ค่าแกนฟอนต์แปรผัน;
• พฤติกรรมข้อความตามพาธหรือข้อความแนวตั้ง

อย่าแก้ตระกูลฟอนต์ไม่ตรงด้วยการปรับสเกลแต่ละคำเอง วิธีนั้นซ่อนอาการแต่ยังคงรูปตัวอักษรผิดไว้

สาเหตุที่ 4: การส่งออกเก็บข้อความไว้ แต่แอปนำเข้าจัดการต่างกัน

เค้าโครงข้อความ SVG ไม่เหมือนเอกสารจัดพิมพ์บนเดสก์ท็อป ตัวส่งออกอาจใช้องค์ประกอบ <tspan> ซ้อนกัน พิกัดแยกแต่ละตัว text-anchor หรือ <textPath> แอปนำเข้าอาจทำให้แบน จัดกลุ่มใหม่ หรือตีความคุณสมบัติเหล่านี้ใหม่ หากกำลังสร้างตราสัญลักษณ์ใหม่ ขั้นตอนข้อความ SVG ตามพาธที่แก้ไขได้ แยกตรา เส้นโค้งนำ และข้อความที่ยังแก้ไขได้ เพื่อให้ทดสอบแต่ละส่วนได้

สำหรับการวางในเอกสาร ให้ทำตาม ขั้นตอนรูป SVG และงานภาพแทรกใน Typst การเก็บคำบรรยายเป็นข้อความของเอกสารเองช่วยให้ตรวจตัวอักษรในภาพแยกจากเลขรูปและรูปแบบย่อหน้าได้

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

หากมีฟอนต์ถูกต้องแล้วแต่ตำแหน่งยังเปลี่ยน ให้ตรวจโครงสร้างแทนการเปลี่ยนแบบอักษร:

1. เปรียบเทียบภาพที่เบราว์เซอร์เรนเดอร์กับโปรแกรมต้นฉบับ;
2. ตรวจว่าทุกอักขระมีตำแหน่ง x ของตัวเองหรือไม่;
3. ตรวจการแปลงรูปที่ซ้อนกันในกลุ่มข้อความ;
4. ดูว่าตัวนำเข้าลบ text-anchor ระยะคู่ตัวอักษร หรือการตั้งค่าเส้นฐานหรือไม่;
5. ทดสอบสำเนาที่ใช้ข้อความแนวนอนธรรมดาเพื่อแยกปัญหาข้อความตามพาธ

สำหรับโลโก้ ตรา หรือหัวเรื่องหนึ่งบรรทัดที่รูปลักษณ์สำคัญกว่าการแก้ไข เส้นขอบมักเป็นรูปแบบส่งมอบที่ปลอดภัยกว่า

สาเหตุที่ 5: แปลงข้อความเป็นเส้นขอบแล้วคาดหวังว่ายังแก้เป็นข้อความได้

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

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

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

เก็บสองไฟล์เสมอ:

• ต้นฉบับที่แก้ไขได้: ข้อความที่ยังแก้ไขได้ ข้อมูลฟอนต์เดิม เลเยอร์ที่ตั้งชื่อ และรูปแบบของแอปต้นฉบับ
• สำเนาส่งมอบ: SVG, EPS หรือ PDF ที่แปลงข้อความเป็นเส้นขอบสำหรับส่งต่องานที่ต้องคงรูปลักษณ์

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

ควรใช้วิธีแก้แบบไหน?

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

ขั้นตอนแปลงเป็นเส้นขอบอย่างปลอดภัย

สำหรับการส่งมอบที่ต้องคงรูปลักษณ์:

1. บันทึกเอกสารต้นฉบับพร้อมข้อความที่ยังแก้ไขได้;
2. ทำสำเนาแล้วเติม -outlined หรือ -delivery ในชื่อไฟล์;
3. เลือกข้อความและใช้ Create Outlines, Convert to Curves, Object to Path หรือคำสั่งเทียบเท่า;
4. ตรวจช่องในตัวอักษรและรูปทรงที่ซ้อนกัน;
5. ส่งออก SVG;
6. เปิด SVG ในเบราว์เซอร์และโปรแกรมตัวที่สอง;
7. เปรียบเทียบกับต้นฉบับทั้งขนาดปกติและเมื่อซูมสูง;
8. ส่งไฟล์เส้นขอบโดยเก็บต้นฉบับข้อความและข้อมูลสิทธิ์ใช้งานฟอนต์ไว้

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

หากโลโก้ที่เหลืออยู่มีเพียงภาพราสเตอร์

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

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

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

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

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

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

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

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

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

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

1. W3C — ข้อความ SVG — เนื้อหา <text> และ <tspan> ที่ยังเป็นข้อความ คุณสมบัติฟอนต์ เค้าโครง และการรองรับฟอนต์ที่ดาวน์โหลดได้
2. W3C — โมดูล CSS Fonts ระดับ 3 — การจับคู่ตระกูลฟอนต์ การเลือกแบบ ฟอนต์ที่หาย และฟอนต์สำรองของระบบ
3. MDN — SVG font-family — รายการตระกูลตามลำดับและฟอนต์สำรองทั่วไปใน SVG
4. Adobe Illustrator — สร้างข้อความเส้นขอบ — การแปลงข้อความเป็นพาธและการสูญเสียความสามารถแก้ไขเป็นข้อความ
5. Adobe Illustrator — บันทึกงาน — การส่งออกข้อความ SVG เส้นขอบ และข้อควรระวังความเข้ากันได้ของข้อความตามพาธ

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