UltKit

تحويل TTF إلى SVG

تحوّل هذه الصفحة خط TrueType إلى خط SVG، أي ملف XML واحد يكون فيه كل حرف عنصر <glyph> ويُكتب محيطه كبيانات مسار SVG. هذا مفيد لأدوات خطوط الأيقونات ومحررات الخطوط، لكنه ليس صورة لنصك.

محوّل الخطوط

أو أفلت ملفات TTF, OTF, WOFF … هنا ·

الحد الأقصى 95 MB لكل ملف· حتى 20 ملفًا· تُحذف بعد 30 دقيقة

الإخراج

تُعالج الملفات على خوادمنا وتُحذف بعد 30 دقيقة.

طريقة استخدام هذه الأداة

  1. 1

    ارفع ملف TTF

    أضف ملف TTF واحدًا أو أكثر بامتداد .ttf، بحد أقصى 20 ملفًا في الدفعة الواحدة و95 MB لكل ملف. تعمل الأداة مع خطوط الأيقونات والخطوط النصية على حد سواء.

  2. 2

    أبقِ خط SVG صيغةً للإخراج

    الخيار التحويل إلى مضبوط على خط SVG. لا ينطبق التلميح (Hinting) على مخرجات SVG، لذلك يختفي هذا الخيار؛ أما اسم العائلة ضمن الإعدادات المتقدمة فما زال يتيح إعادة تسمية الخط.

  3. 3

    حوّل إلى SVG

    اضغط تحويل إلى SVG ثم نزّل ملف .svg. افتحه في محرر نصوص أو Inkscape أو FontForge للوصول إلى مسارات الحروف.

خط SVG مقابل صورة SVG للنص

عند البحث عن تحويل TTF إلى SVG ستجد هدفين مختلفين مختلطين. الأول خط SVG: صيغة الخط المعرّفة في توصية SVG 1.0 الصادرة عن W3C عام 2001، حيث يحتوي العنصر <font> على عنصر <glyph> لكل حرف مع قيمة Unicode وعرض التقدم والمخطط على هيئة مسار. والثاني صورة SVG لنص ما، كحروف شعار أو اسم مرتب في سطر ومحفوظ على هيئة أشكال. يُنتج هذا المحوّل النوع الأول. وإذا كان لديك شعار على هيئة صورة وليس خطًا، فإن تحويل PNG إلى SVG يتتبعه ويحوله إلى مسارات.

لا يفقد تحويل مخطط TrueType إلى بيانات مسار SVG شيئًا من الشكل. تدعم مسارات SVG المنحنيات التربيعية نفسها التي يستخدمها TrueType، فيُكتب كل محيط كما هو. أما ما لا يبقى فهو كل ما يحيط بالمخططات: تعليمات التلميح وميزات OpenType التي تتجاوز الكيرنينغ البسيط والجداول الثنائية التي تحتاجها أنظمة التشغيل لتثبيت الخط. لا يمكن تثبيت خط SVG على Windows أو macOS.

كيف يبدو ملف خط SVG

مثال مختصر لشيفرة داخل خط SVG
<svg xmlns="http://www.w3.org/2000/svg">
  <!-- خط SVG بحرف واحد -->
  <defs>
    <font id="BrandSans" horiz-adv-x="1229">
      <font-face font-family="Brand Sans" units-per-em="2048" ascent="1638" descent="-410" />
      <glyph unicode="L" glyph-name="L" horiz-adv-x="1100" d="M180 0V1456H360V160H1040V0Z" />
    </font>
  </defs>
</svg>

ما تنتجه هذه الصفحة: ملف واحد، وعنصر <glyph> واحد لكل حرف، بوحدات الخط والمحور y متجه إلى الأعلى.

  • يُفتح في FontForge وInkscape وأدوات خطوط الأيقونات
  • لا يمكن تثبيته على الكمبيوتر
  • لا تحمّله متصفحات Chrome وEdge وFirefox الحالية

من أين جاءت خطوط SVG وإلى أين انتهت

SVG 1.0 يعرّف عنصر الخط
2001
آخر إصدار من Safari على iPhone احتاج إلى خطوط ويب SVG
iOS 4.1
يزيل خطوط SVG في 2014
Chrome 38
يحذف فصل الخطوط
SVG 2

TTF

خط TrueType

TTF هي صيغة خطوط TrueType التي طورتها Apple في أواخر الثمانينيات وأصدرتها عام 1991، ثم رخّصتها لشركة Microsoft. تعرّف مخططات الحروف بمنحنيات تربيعية وتتضمن تعليمات تلميح تجعل النص حادًا على الشاشات. تدعمها كل أنظمة سطح المكتب ومعالجات النصوص وتطبيقات التصميم. تفتقر إلى بعض الميزات الطباعية المتقدمة في OpenType وحجمها أكبر من صيغ خطوط الويب.

الضغط
دون فقدان
الشفافية
–
الحركة
–
سنة الظهور
1991 · Apple
محول TTF

SVG

رسومات متجهة قابلة للتحجيم (SVG)

SVG صيغة متجهة قائمة على XML اعتمدها W3C عام 2001. فهي تصف الأشكال والمسارات والنصوص بدل البكسلات، فتبقى حادة بأي حجم، وغالبًا ما تكون صغيرة جدًا للشعارات والأيقونات. وتدعم الشفافية وتنسيق CSS والبرمجة والحركة، وتعرضها كل المتصفحات مباشرةً. لا يناسب SVG الصور الفوتوغرافية، وقد يبطؤ عرض الرسومات المعقدة. يمكن فتحه وتحريره في Illustrator وInkscape وFigma والمتصفحات.

الضغط
–
الشفافية
نعم
الحركة
نعم
سنة الظهور
2001 · W3C
محول SVG

يكتب تحويل TTF إلى SVG مخطط كل حرف على هيئة بيانات مسار SVG قابلة للتعديل داخل خط SVG، وهو ما تستخدمه أدوات خطوط الأيقونات ومحررات الخطوط وحزم خطوط الويب القديمة؛ وليس وسيلة لتحميل الخطوط في صفحات الويب الحديثة.

الأسئلة الشائعة حول تحويل TTF إلى SVG

هل يمكنني استخدام خط SVG في CSS @font-face اليوم؟

لا، ليس في معظم المتصفحات. أزالت Chrome دعم خطوط SVG في الإصدار 38 عام 2014، ولم تضفه Firefox ولا Internet Explorer أصلًا. للمواقع الإلكترونية، حوّل ملف TTF باستخدام تحويل TTF إلى WOFF2 بدلًا من ذلك.

لماذا تظهر المحارف مقلوبة عند لصقها في رسم؟

تستخدم خطوط SVG نظام إحداثيات الخط نفسه، حيث يتجه المحور y إلى الأعلى من خط الأساس، بينما تحسب رسومات SVG العادية المحور y إلى الأسفل من الأعلى. اقلب المسار عموديًا، مثلًا بتحويل scale(1,-1)، فيظهر بالشكل الصحيح.

كيف أحوّل النص إلى مسارات SVG لجهاز Cricut أو آلة القص بالليزر؟

ثبّت ملف TTF، واكتب كلماتك في Inkscape أو Illustrator، ثم حوّل النص إلى مسارات: Path › Object to Path في Inkscape، وType › Create Outlines في Illustrator. احفظ النتيجة بصيغة SVG. يحتوي خط SVG على كل حرف بشكل منفصل، وليس منسقًا على هيئة كلمات.

هل تحتفظ خطوط SVG بتباعد الأحرف (kerning) والحروف المركبة؟

جزئيًا فقط. يمكن لصيغة خط SVG تخزين أزواج الكيرنينغ بعناصر hkern والحروف متعددة المحارف، لكنها لا تحتوي على ما يعادل جداول ميزات OpenType مثل الأحرف الكبيرة الصغيرة والبدائل والقواعد السياقية. احتفظ بملف TTF إذا كنت تحتاج إليها.

هل إخراج خط SVG مفيد لخطوط الأيقونات؟

نعم، وهذا استخدامه الرئيسي اليوم. تستورد أدوات خطوط الأيقونات مثل IcoMoon خطوط SVG، مما يتيح لك استخراج الأيقونات من خط أيقونات قديم وتعديلها وبناء مجموعة جديدة أو تصدير كل أيقونة كملف SVG مستقل.