تبدیل TTF به SVG

Q: چرا گلیفها هنگام چسباندن در یک طرح وارونه دیده میشوند؟

فونتهای SVG از دستگاه مختصات خود فونت استفاده میکنند که در آن محور y از خط پایه به سمت بالا است، در حالی که در ترسیمهای معمولی SVG محور y از بالا به پایین شمارش میشود. مسیر را بهصورت عمودی برعکس کنید، مثلاً با تبدیل `scale(1,-1)`، تا درست نمایش داده شود.

Q: آیا فونتهای SVG کرنینگ و لیگاتورها را حفظ میکنند؟

فقط تا حدی. فرمت فونت SVG میتواند جفتهای کرنینگ را با عنصرهای `hkern` و گلیفهای چندکاراکتری ذخیره کند، اما معادلی برای جدولهای ویژگی OpenType مانند حروف کوچککپس، جایگزینها یا قواعد بافتاری ندارد. اگر به این ویژگیها نیاز دارید، فایل TTF را نگه دارید.

این صفحه فونت TrueType را به فونت SVG تبدیل می‌کند: یک فایل XML که در آن هر نویسه یک عنصر <glyph> است و طرح آن به‌صورت داده‌های مسیر SVG نوشته شده است. این خروجی برای ابزارهای آیکون‌فونت و ویرایشگرهای فونت مفید است، اما با تصویری از متن شما یکی نیست.

یا فایل‌های TTF, OTF, WOFF … را اینجا رها کنید ·

حداکثر 95 MB برای هر فایل· تا 20 فایل· حذف پس از 30 دقیقه

خروجی

تبدیل به

فایل‌ها روی سرورهای ما پردازش می‌شوند و پس از 30 دقیقه حذف می‌شوند.

نحوه استفاده از این ابزار

1
فایل TTF را بارگذاری کنید
یک یا چند فایل .ttf اضافه کنید؛ حداکثر ۲۰ فایل در هر دسته و هر کدام تا 95 MB. هم فونت‌های آیکون و هم فونت‌های متنی پشتیبانی می‌شوند.
2
فونت SVG را به‌عنوان خروجی نگه دارید
گزینهٔ تبدیل به روی فونت SVG تنظیم شده است. هینتینگ در خروجی SVG کاربرد ندارد و به همین دلیل این گزینه نمایش داده نمی‌شود؛ اما نام خانواده در تنظیمات پیشرفته همچنان نام فونت را تغییر می‌دهد.
3
تبدیل به SVG
دکمهٔ تبدیل به SVG را بزنید و فایل .svg را دانلود کنید. برای دسترسی به مسیرهای گلیف‌ها، آن را در ویرایشگر متن، Inkscape یا FontForge باز کنید.

فونت SVG در برابر تصویر SVG از متن

اگر «TTF to SVG» را جست‌وجو کنید، دو هدف متفاوت را در هم می‌بینید. یکی فونت SVG است: فرمت فونتی که در توصیه‌نامهٔ SVG 1.0 از W3C در سال 2001 تعریف شد و در آن عنصر <font> به ازای هر کاراکتر یک <glyph> با مقدار یونیکد، عرض پیشروی و طرح کلی به‌صورت مسیر دارد. دیگری تصویر SVG از یک متن است؛ حروف یک لوگو یا نام که در یک خط چیده شده و به‌شکل اشکال ذخیره شده‌اند. این مبدل نوع اول را می‌سازد. اگر آنچه دارید تصویر لوگو است و نه فونت، تبدیل PNG به SVG آن را به مسیر تبدیل می‌کند.

تبدیل طرح TrueType به داده‌های مسیر SVG از نظر شکل هیچ چیزی را از دست نمی‌دهد. مسیرهای SVG همان منحنی‌های درجه دوم مورد استفادهٔ TrueType را پشتیبانی می‌کنند، پس هر کانتور همان‌طور که هست نوشته می‌شود. آنچه از بین می‌رود هر چیزی است که پیرامون طرح‌ها قرار دارد: دستورهای هینتینگ، ویژگی‌های OpenType فراتر از کرنینگ ساده و جدول‌های باینری که سیستم‌عامل‌ها برای نصب فونت لازم دارند. فونت SVG را نمی‌توان روی Windows یا macOS نصب کرد.

فایل فونت SVG چه شکلی دارد

نمونهٔ کوتاه‌شدهٔ کدهای یک فونت SVG

<svg xmlns="http://www.w3.org/2000/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" />
      <!-- بقیهٔ glyphها برای کوتاهی حذف شده‌اند -->
    </font>
  </defs>
</svg>

خروجی این صفحه: یک فایل با یک <glyph> برای هر کاراکتر، در واحدهای فونت و با محور y رو به بالا.

در FontForge، Inkscape و ابزارهای فونت آیکون باز می‌شود
روی کامپیوتر قابل نصب نیست
Chrome، Edge و Firefox فعلی آن را بارگذاری نمی‌کنند

یک OTF یا TTF معمولی با جدول اضافی SVG که گلیف‌های رنگی و لایه‌دار را نگه می‌دارد.

مانند هر فونتی نصب می‌شود
برای ایموجی و حروف چندرنگ استفاده می‌شود
پشتیبانی بسته به برنامه و مرورگر متفاوت است

فونت‌های SVG از کجا آمدند و به کجا رفتند

SVG 1.0 عنصر font را تعریف می‌کند: 2001
آخرین Safari روی iPhone که به وب‌فونت SVG نیاز داشت: iOS 4.1
فونت‌های SVG را در سال 2014 حذف می‌کند: Chrome 38
فصل فونت را حذف می‌کند: SVG 2

TTF

فونت TrueType

TTF فرمت فونت TrueType است که Apple در اواخر دهه 1980 توسعه داد، در 1991 منتشر کرد و سپس به Microsoft مجوز داد. شکل حروف را با منحنی‌های درجه دوم تعریف می‌کند و دستورهای hinting دارد که متن را روی صفحه‌نمایش شفاف نشان می‌دهد. همه سیستم‌عامل‌های دسکتاپ، واژه‌پردازها و برنامه‌های طراحی از آن پشتیبانی می‌کنند. برخی قابلیت‌های پیشرفته تایپوگرافی OpenType را ندارد و از فرمت‌های فونت وب حجیم‌تر است.

فشرده‌سازی: بدون اتلاف
شفافیت: –
انیمیشن: –
سال معرفی: 1991 · Apple

مبدل TTF

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 را در سال 2014 و در نسخهٔ 38 حذف کرد و Firefox و Internet Explorer هرگز آن را اضافه نکردند. برای وب‌سایت، به‌جای آن فایل TTF را با تبدیل TTF به WOFF2 تبدیل کنید.

چرا گلیف‌ها هنگام چسباندن در یک طرح وارونه دیده می‌شوند؟

فونت‌های SVG از دستگاه مختصات خود فونت استفاده می‌کنند که در آن محور y از خط پایه به سمت بالا است، در حالی که در ترسیم‌های معمولی SVG محور y از بالا به پایین شمارش می‌شود. مسیر را به‌صورت عمودی برعکس کنید، مثلاً با تبدیل scale(1,-1)، تا درست نمایش داده شود.

چگونه متن را برای Cricut یا دستگاه لیزر به مسیر SVG تبدیل کنم؟

فایل TTF را نصب کنید، متن خود را در Inkscape یا Illustrator بنویسید و آن را به خطوط (outline) تبدیل کنید: در Inkscape از Path › Object to Path و در Illustrator از Type › Create Outlines. سپس آن را به‌صورت SVG ذخیره کنید. فونت SVG هر حرف را جداگانه نگه می‌دارد و به‌شکل کلمات چیده نشده است.

آیا فونت‌های SVG کرنینگ و لیگاتورها را حفظ می‌کنند؟

فقط تا حدی. فرمت فونت SVG می‌تواند جفت‌های کرنینگ را با عنصرهای hkern و گلیف‌های چندکاراکتری ذخیره کند، اما معادلی برای جدول‌های ویژگی OpenType مانند حروف کوچک‌کپس، جایگزین‌ها یا قواعد بافتاری ندارد. اگر به این ویژگی‌ها نیاز دارید، فایل TTF را نگه دارید.

آیا خروجی فونت SVG برای آیکون‌فونت‌ها مفید است؟

بله، امروزه کاربرد اصلی آن همین است. ابزارهای فونت آیکون مانند IcoMoon فونت‌های SVG را وارد می‌کنند و به شما امکان می‌دهند آیکون‌ها را از یک فونت آیکون قدیمی بیرون بکشید، ویرایش کنید و مجموعه‌ای تازه بسازید یا هر آیکون را به‌صورت SVG جداگانه خروجی بگیرید.