TTF থেকে SVG কনভার্টার

Q: SVG ফন্টে কি কার্নিং ও লিগেচার থাকে?

শুধু আংশিক। SVG ফন্ট ফরম্যাটে `hkern` এলিমেন্ট দিয়ে কার্নিং জোড়া এবং একাধিক-অক্ষরের গ্লিফ রাখা যায়, কিন্তু স্মল ক্যাপস, অল্টারনেটস বা কনটেক্সচুয়াল রুলের মতো OpenType ফিচার টেবিলের সমতুল্য কিছু নেই। এগুলো দরকার হলে TTF রেখে দিন।

এই পেজ একটি TrueType ফন্টকে SVG ফন্টে বদলে দেয়: একটি XML ফাইল, যেখানে প্রতিটি অক্ষর একটি <glyph> এলিমেন্ট এবং তার আউটলাইন SVG পাথ ডেটা হিসেবে লেখা থাকে। আইকন ফন্ট টুল ও ফন্ট এডিটরের জন্য এটি কাজের, তবে এটি আপনার লেখার কোনো ছবি নয়।

অথবা TTF, OTF, WOFF … ফাইল এখানে ড্রop করুন ·

প্রতি ফাইল সর্বোচ্চ 95 MB· সর্বোচ্চ 20টি ফাইল· 30 মিনিট পরে মুছে ফেলা হয়

আউটপুট

যে ফরম্যাটে রূপান্তর

ফাইল আমাদের সার্ভারে প্রসেস করা হয় এবং 30 মিনিট পরে মুছে ফেলা হয়।

অক্ষর

যে অক্ষর রাখবেন

যে স্ক্রিপ্ট ব্যবহার করেন না তা বাদ দিলে ওয়েব ফন্ট শত শত KB থেকে ৩০ KB-এর নিচে নামতে পারে। কম্পিউটারে ইনস্টল করার ফন্টে সব অক্ষর রাখুন।

রেন্ডারিং ও ওয়েব

ফন্টের নাম

ফ্যামিলির নাম

মূল নাম রাখতে খালি রাখুন। নাম বদলালে রূপান্তরিত ফন্ট মূলটির পাশে সংঘাত ছাড়াই ইনস্টল করা যায়।

স্টাইলের নাম

যেমন Regular, Bold, Italic। মূল স্টাইলের নাম রাখতে খালি রাখুন।

এই টুল কীভাবে ব্যবহার করবেন

1
TTF আপলোড করুন
এক বা একাধিক .ttf ফাইল যোগ করুন, প্রতি ব্যাচে সর্বোচ্চ ২০টি এবং প্রতিটি ৯৫ MB পর্যন্ত। আইকন ফন্ট ও টেক্সট ফন্ট দুটোই চলে।
2
আউটপুট হিসেবে SVG ফন্ট রাখুন
যে ফরম্যাটে রূপান্তর এ SVG ফন্ট নির্বাচন করা থাকে। SVG আউটপুটে হিন্টিং প্রযোজ্য নয়, তাই সেই অপশন দেখা যায় না; উন্নত সেটিংস-এর ফ্যামিলির নাম দিয়ে তবুও ফন্টের নাম বদলানো যায়।
3
SVG-তে কনভার্ট করুন
SVG-এ কনভার্ট করুন চাপুন এবং .svg ফাইলটি ডাউনলোড করুন। গ্লিফ পাথ দেখতে ফাইলটি টেক্সট এডিটর, Inkscape বা FontForge-এ খুলুন।

TTF থেকে SVG করলে কী পাবেন?

একটি SVG ফন্ট ফাইল, যেখানে প্রতিটি অক্ষরের আউটলাইন SVG পাথ ডেটা হিসেবে থাকে। যখন দরকার হবে তখন এটি বেছে নিন:

1আইকন ফন্ট টুল বা Inkscape-এর SVG Font Editor-এ ইমপোর্ট করার জন্য গ্লিফ আউটলাইন
2খুব পুরোনো iPhone ব্রাউজারের জন্য পুরোনো ওয়েবফন্ট কিটের .svg অংশ
3প্রতিটি অক্ষরের পাঠযোগ্য ভেক্টর ডেটা, যেমন একটি আইকন বের করার জন্য

SVG ফন্ট বনাম লেখার SVG ছবি

TTF to SVG সার্চ করলে দুটি আলাদা লক্ষ্য মিশে থাকতে দেখবেন। একটি হলো SVG ফন্ট: ২০০১ সালের W3C-র SVG 1.0 সুপারিশে সংজ্ঞায়িত ফন্ট ফরম্যাট, যেখানে <font> এলিমেন্টের ভেতরে প্রতিটি অক্ষরের জন্য একটি <glyph> থাকে, সঙ্গে Unicode মান, অ্যাডভান্স উইডথ এবং পাথ হিসেবে আউটলাইন। অন্যটি হলো কোনো লেখার SVG ছবি, অর্থাৎ লোগো বা নামের অক্ষরগুলো একটি লাইনে সাজিয়ে আকার (শেপ) হিসেবে সেভ করা। এই কনভার্টার প্রথম ধরনটি তৈরি করে। আপনার কাছে ফন্টের বদলে লোগোর ছবি থাকলে PNG থেকে SVG সেটিকে ট্রেস করে পাথে রূপান্তর করে।

TrueType আউটলাইনকে SVG পাথ ডেটায় রূপান্তর করলে আকারে কিছুই হারায় না। SVG পাথ TrueType-এর ব্যবহৃত একই কোয়াড্রাটিক কার্ভ সাপোর্ট করে, তাই প্রতিটি কনটুর যেমন আছে তেমনই লেখা হয়। যা থাকে না তা হলো আউটলাইনের চারপাশের সবকিছু: হিন্টিং নির্দেশ, সাধারণ কার্নিংয়ের বাইরের OpenType ফিচার এবং ফন্ট ইনস্টলের জন্য অপারেটিং সিস্টেমের দরকারি বাইনারি টেবিল। SVG ফন্ট Windows বা macOS-এ ইনস্টল করা যায় না।

একটি SVG ফন্ট ফাইল দেখতে কেমন

SVG ফন্টের মার্কআপের সংক্ষিপ্ত উদাহরণ

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- একটি গ্লিফসহ SVG ফন্ট -->
    <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 লোড করে না

সাধারণ OTF বা TTF, যাতে রঙিন ও স্তরযুক্ত গ্লিফসহ একটি বাড়তি SVG টেবিল থাকে।

অন্য ফন্টের মতোই ইনস্টল হয়
ইমোজি ও বহুরঙা লেটারিংয়ে ব্যবহৃত
অ্যাপ ও ব্রাউজারভেদে সাপোর্ট আলাদা

SVG ফন্ট কোথা থেকে এল আর কোথায় হারিয়ে গেল

SVG 1.0 font এলিমেন্ট সংজ্ঞায়িত করে: 2001
SVG ওয়েব ফন্ট লাগত এমন সর্বশেষ iPhone Safari: iOS 4.1
২০১৪ সালে SVG ফন্ট সরিয়ে দেয়: Chrome 38
ফন্ট অধ্যায় বাদ দেয়: SVG 2

TTF

TrueType ফন্ট

TTF হলো TrueType ফন্ট ফরম্যাট, যা ১৯৮০-র দশকের শেষে Apple তৈরি করে, ১৯৯১ সালে প্রকাশ করে এবং পরে Microsoft-কে লাইসেন্স দেয়। এটি দ্বিঘাত বক্ররেখা দিয়ে গ্লিফের আউটলাইন নির্ধারণ করে এবং হিন্টিং নির্দেশনা রাখে, যা স্ক্রিনে লেখা স্পষ্ট দেখায়। প্রতিটি ডেস্কটপ অপারেটিং সিস্টেম, ওয়ার্ড প্রসেসর ও ডিজাইন অ্যাপ TrueType সমর্থন করে। এতে OpenType-এর কিছু উন্নত টাইপোগ্রাফি সুবিধা নেই এবং এটি ওয়েব ফন্ট ফরম্যাটের চেয়ে বড়।

কম্প্রেশন: লসলেস
স্বচ্ছতা (ট্রান্সপারেন্সি): –
অ্যানিমেশন: –
প্রবর্তনের সাল: 1991 · Apple

TTF কনভার্টার

SVG

Scalable Vector Graphics

SVG হলো XML-ভিত্তিক একটি ভেক্টর ফরম্যাট, যা W3C ২০০১ সালে স্ট্যান্ডার্ড করে। পিক্সেলের বদলে এটি আকার, পাথ ও টেক্সট বর্ণনা করে, তাই যেকোনো সাইজে স্পষ্ট থাকে এবং লোগো ও আইকনের জন্য সাধারণত খুব ছোট হয়। এটি স্বচ্ছতা, CSS স্টাইলিং, স্ক্রিপ্টিং ও অ্যানিমেশন সমর্থন করে, আর প্রতিটি ব্রাউজার নিজে থেকেই এটি রেন্ডার করে। SVG ফটোগ্রাফের জন্য উপযুক্ত নয়, এবং জটিল ইলাস্ট্রেশন রেন্ডার হতে ধীর হতে পারে। Illustrator, Inkscape, Figma ও ব্রাউজারে এটি খোলা ও এডিট করা যায়।

কম্প্রেশন: –
স্বচ্ছতা (ট্রান্সপারেন্সি): হ্যাঁ
অ্যানিমেশন: হ্যাঁ
প্রবর্তনের সাল: 2001 · W3C

SVG কনভার্টার

TTF থেকে SVG প্রতিটি গ্লিফের আউটলাইন এডিটযোগ্য SVG পাথ ডেটা হিসেবে SVG ফন্টের ভেতরে লেখে, যা আইকন ফন্ট টুল, ফন্ট এডিটর ও পুরোনো ওয়েবফন্ট কিটে ব্যবহার হয়; আধুনিক ওয়েব পেজে ফন্ট লোড করার উপায় এটি নয়।

TTF থেকে SVG নিয়ে প্রশ্নোত্তর

এখন কি CSS @font-face-এ SVG ফন্ট ব্যবহার করা যায়?

বেশিরভাগ ব্রাউজারে নয়। Chrome ২০১৪ সালে ভার্সন ৩৮-এ SVG ফন্ট সাপোর্ট সরিয়ে দিয়েছে, আর Firefox ও Internet Explorer কখনোই এটি যোগ করেনি। ওয়েবসাইটের জন্য বরং TTF থেকে WOFF2 দিয়ে TTF কনভার্ট করুন।

ড্রয়িংয়ে পেস্ট করলে গ্লিফগুলো উল্টো দেখায় কেন?

SVG ফন্ট ফন্টের নিজস্ব স্থানাঙ্ক ব্যবস্থা ব্যবহার করে, যেখানে y অক্ষ বেসলাইন থেকে ওপরের দিকে যায়; সাধারণ SVG ড্রয়িংয়ে y ওপর থেকে নিচের দিকে গোনা হয়। পাথটি উল্লম্বভাবে উল্টে দিন, যেমন scale(1,-1) ট্রান্সফর্ম দিয়ে, তাহলে ঠিকমতো দেখাবে।

Cricut বা লেজার কাটারের জন্য লেখাকে SVG পাথে কীভাবে বদলাব?

TTF ইনস্টল করুন, Inkscape বা Illustrator-এ আপনার শব্দগুলো টাইপ করুন এবং লেখাকে আউটলাইনে রূপান্তর করুন: Inkscape-এ Path › Object to Path, Illustrator-এ Type › Create Outlines। তারপর SVG হিসেবে সেভ করুন। SVG ফন্টে প্রতিটি অক্ষর আলাদা থাকে, শব্দ হিসেবে সাজানো থাকে না।

SVG ফন্টে কি কার্নিং ও লিগেচার থাকে?

শুধু আংশিক। SVG ফন্ট ফরম্যাটে hkern এলিমেন্ট দিয়ে কার্নিং জোড়া এবং একাধিক-অক্ষরের গ্লিফ রাখা যায়, কিন্তু স্মল ক্যাপস, অল্টারনেটস বা কনটেক্সচুয়াল রুলের মতো OpenType ফিচার টেবিলের সমতুল্য কিছু নেই। এগুলো দরকার হলে TTF রেখে দিন।

আইকন ফন্টের জন্য কি SVG ফন্ট আউটপুট কাজের?

হ্যাঁ, বর্তমানে এটাই এর প্রধান ব্যবহার। IcoMoon-এর মতো আইকন ফন্ট টুল SVG ফন্ট ইমপোর্ট করে, ফলে পুরোনো আইকন ফন্ট থেকে আইকন বের করে এডিট করা, নতুন সেট বানানো বা প্রতিটি আইকন আলাদা SVG হিসেবে এক্সপোর্ট করা যায়।