SVG Font

รูปแบบฟอนต์เวกเตอร์ดั้งเดิม — XML ที่อ่านได้ด้วยมนุษย์ซึ่งแมป SVG paths ไปยัง font glyphs

SVG Font คืออะไร?

SVG fonts ถูกกำหนดเป็นส่วนหนึ่งของ ข้อกำหนด SVG 1.1 ที่เผยแพร่โดย W3C ต่างจากรูปแบบฟอนต์ไบนารีแบบดั้งเดิม SVG fonts ฝัง glyph outlines เป็นข้อมูล SVG path ภายใน element <font> แต่ละ glyph แทนด้วย element <glyph> ที่มี attribute d ซึ่งมี vector path อธิบายรูปร่าง

โดยสาระ SVG fonts คือภาพ SVG ที่บรรจุในรูปแบบฟอนต์ ไวยากรณ์ path เดียวกับที่ใช้วาดรูปในไฟล์ SVG ถูกนำมาใช้กำหนดรูปแบบตัวอักษรและ icon outlines ทำให้ตรวจสอบได้อย่างเป็นพิเศษ — คุณสามารถเปิด SVG font ในโปรแกรมแก้ไขข้อความใดก็ได้และอ่านเรขาคณิตจริงของทุก glyph

วิธีการทำงาน

ไฟล์ SVG font ห่อ glyph paths ไว้ในโครงสร้าง XML มาตรฐาน ต่อไปนี้คือตัวอย่างแบบย่อ:

<font id="MyIcons">
  <font-face font-family="MyIcons" units-per-em="1024"/>
  <glyph glyph-name="home" unicode="&#xE001;"
         d="M512 0L0 448h128v576h256V640h256v384h256V448h128z"/>
  <glyph glyph-name="search" unicode="&#xE002;"
         d="M..."/>
</font>

Element <font-face> ประกาศชื่อ font family และระบบพิกัด (units-per-em) แต่ละ <glyph> แมป Unicode code point ไปยัง vector path attribute d ใช้ไวยากรณ์ path เดียวกันกับ element <path> ของ SVG ปกติ

นี่คือ รูปแบบขั้นกลาง ใน pipeline ของ Bobcorn ไอคอน SVG แต่ละชิ้นจะถูกรวบรวมเป็นโครงสร้าง SVG font ก่อน แล้วจึงแปลงเป็นรูปแบบไบนารี: SVG Font → TTF → WOFF / WOFF2 / EOT

ข้อดีและข้อเสีย

การรองรับของเบราว์เซอร์

การรองรับ SVG font ถูกลบออกจากเบราว์เซอร์หลักส่วนใหญ่ Chrome ยกเลิกการรองรับ SVG font ในเวอร์ชัน 38 (ปี 2014) Firefox ไม่เคยนำไปใช้ Edge (ฐาน Chromium) ก็ไม่รองรับเช่นกัน ที่ยังคงรองรับเพียงแห่งเดียวคือ Safari และ iOS Safari ที่ยังคงแสดงผล SVG fonts

สำหรับการใช้งานเว็บจริง SVG font เป็นรูปแบบที่ล้าสมัยไปแล้ว ไม่ควรใช้เป็นรูปแบบส่งมอบสำหรับผู้ใช้ปลายทาง ให้ใช้ WOFF2 แทน

เมื่อไรควรใช้ SVG Font

• การดีบักปัญหาการสร้างฟอนต์ — เนื่องจากเป็น XML ธรรมดา คุณสามารถอ่านข้อมูล path โดยตรงและเปรียบเทียบกับไอคอน SVG ต้นฉบับเพื่อวินิจฉัยปัญหา
• เป็นรูปแบบต้นทางใน build pipelines — เครื่องมือสร้างฟอนต์หลายตัว (รวมถึง Bobcorn) ใช้ SVG font เป็นตัวแทนกลางก่อนแปลงเป็นรูปแบบไบนารี
• รองรับ iOS รุ่นเก่า < 5 — หายากมากในปัจจุบัน แต่อุปกรณ์ iOS รุ่นเก่าที่ก่อนการรองรับ WOFF สามารถใช้ SVG fonts สำหรับ web fonts เท่านั้น