SVG Font

تنسيق الخط المتجه الأصلي — XML قابل للقراءة البشرية يربط مسارات SVG بحروف الخط الرسومية.

.svg تنسيق SVG Font
النوعمتجه قائم على XML
الضغطلا يوجد (نص عادي)
حجم الملفالأكبر بين جميع التنسيقات
الدعمSafari فقط (مهجور في المتصفحات الأخرى)
الأفضل لـالتنقيح، التنسيق المصدري
Bobcornمصدر خط الأنابيب

ما هو SVG Font؟

عُرِّفت خطوط SVG كجزء من مواصفة SVG 1.1 التي نشرها W3C. على خلاف تنسيقات الخطوط الثنائية التقليدية، تُضمّن خطوط SVG حواف الحروف الرسومية كبيانات مسار SVG داخل عنصر <font>. يُمثَّل كل حرف رسومي بعنصر <glyph> يحتوي خاصيته d على مسار المتجه الذي يصف الشكل.

في جوهرها، خطوط SVG هي رسومات SVG مُغلَّفة كخط. يُعاد استخدام نفس صيغة المسارات التي تُستخدم لرسم الأشكال في ملف SVG لتعريف أشكال الحروف وحواف الأيقونات. وهذا ما يجعلها فريدة من حيث قابلية الفحص — يمكنك فتح خط SVG في أي محرر نصي وقراءة الهندسة الفعلية لكل حرف رسومي.

كيف يعمل

يُغلّف ملف خط SVG حواف الحروف الرسومية ضمن هيكل XML قياسي. إليك مثالاً مبسطاً:

هيكل SVG Font 
<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>

يُعلن عنصر <font-face> عن اسم عائلة الخط ونظام الإحداثيات (units-per-em). يربط كل <glyph> نقطة كود Unicode بمسار متجه. تستخدم الخاصية d نفس صيغة المسارات تماماً كعنصر SVG العادي <path>.

هذا هو التنسيق الوسيط في خط أنابيب Bobcorn. تُجمَّع أيقونات SVG الفردية أولاً في هيكل خط SVG هذا، الذي يُحوَّل بعد ذلك إلى تنسيقات ثنائية: SVG Font → TTF → WOFF / WOFF2 / EOT.

المزايا والعيوب

    المزايا
  • قابل للقراءة البشرية — يُفتح في أي محرر نصي
  • سهل تنقيح حواف الحروف الرسومية والبيانات الوصفية
  • متجه بالكامل، قابلية توسع لا نهائية
  • لا حاجة للتجميع لعرض الكود المصدري
    العيوب
  • أكبر حجم ملف بين جميع تنسيقات الخطوط
  • مهجور في Chrome وFirefox وEdge
  • لا ضغط على الإطلاق
  • لا دعم لـ hinting
  • جودة تصيير رديئة على Windows

دعم المتصفحات

جرى إزالة دعم خطوط SVG من معظم المتصفحات الرئيسية. أسقط Chrome دعم خطوط SVG في الإصدار 38 (2014). لم يُنفذه Firefox قط. Edge القائم على Chromium لا يدعمه أيضاً. الاستثناء الوحيد المتبقي هو Safari وiOS Safari اللذان لا يزالان يُصيّران خطوط SVG.

للاستخدام العملي على الويب، يُعدّ SVG Font تنسيقاً قديماً في الأساس. لا ينبغي أبداً الاعتماد عليه كتنسيق توصيل للمستخدمين النهائيين. استخدم WOFF2 بدلاً منه.

متى تستخدم SVG Font

  • تنقيح مشكلات توليد الخطوط — بما أنه XML عادي، يمكنك قراءة بيانات المسار مباشرةً ومقارنتها بأيقونات SVG الأصلية لتشخيص المشكلات.
  • كتنسيق مصدر في خطوط أنابيب البناء — تستخدم أدوات توليد الخطوط الكثيرة (بما فيها Bobcorn) SVG Font كتمثيل وسيط قبل التحويل إلى تنسيقات ثنائية.
  • دعم iOS القديم < 5 — نادر للغاية اليوم، لكن أجهزة iOS القديمة التي سبقت دعم WOFF كانت تستطيع استخدام خطوط SVG فقط لخطوط الويب.
في Bobcorn
في Bobcorn، يُمثّل SVG Font الخطوة الأولى في خط أنابيب التوليد. تُجمَّع أيقونات SVG الخاصة بك في خط SVG، الذي يُحوَّل بعد ذلك إلى TTF، ومنه إلى WOFF وWOFF2 وEOT. يمكنك تصدير ملف SVG Font لأغراض التنقيح — وهو مفيد بشكل خاص عندما يبدو حرف رسومي خاطئاً وتحتاج إلى فحص بيانات المسار الخام.