SVG এর মধ্যে ফন্ট ইমপোর্ট করা

এসভিজি (SVG) ফাইলের মধ্যে টেক্সট উপাদান ব্যবহার করতে, আপনি বিভিন্ন ধরনের ফন্ট ইমপোর্ট করতে পারেন, যা গ্রাফিক্সের চেহারা এবং ডিজাইনকে আরও সুন্দর এবং কাস্টমাইজড করে তোলে। ফন্ট ইমপোর্ট করার মাধ্যমে আপনি আপনার ডিজাইনকে আরো ইউনিক এবং প্রফেশনাল দেখতে পারেন। এসভিজি ফাইলের মধ্যে ফন্ট ইমপোর্ট করার দুটি প্রধান পদ্ধতি রয়েছে: ইন্টারনেট থেকে ফন্ট লিঙ্ক করা এবং লোকাল ফন্ট ব্যবহার করা।

1. ওয়েব ফন্ট (Web Font) ইমপোর্ট করা

এসভিজি ফাইলে ওয়েব ফন্ট ইমপোর্ট করার জন্য আপনি <style> ট্যাগ ব্যবহার করতে পারেন। এতে, আপনি ফন্ট ফ্যামিলি নির্ধারণ করে ওয়েব ফন্ট ফাইল লিঙ্ক করতে পারেন। সাধারণত ওয়েব ফন্ট ব্যবহারের জন্য Google Fonts বা অন্য ওয়েব ফন্ট সার্ভিস থেকে ফন্ট লিঙ্ক করা হয়।

উদাহরণ:

<svg width="500" height="200" xmlns="http://www.w3.org/2000/svg">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
    text {
      font-family: 'Roboto', sans-serif;
      font-size: 30px;
      fill: black;
    }
  </style>
  <text x="10" y="50">Hello, SVG with Web Font!</text>
</svg>

ব্যাখ্যা:

• <style> ট্যাগের মধ্যে @import ব্যবহার করে Google Fonts থেকে Roboto ফন্ট লিঙ্ক করা হয়েছে।
• font-family: 'Roboto', sans-serif; দিয়ে টেক্সটের ফন্ট ফ্যামিলি সেট করা হয়েছে।
• এতে Roboto ফন্ট এসভিজি টেক্সট উপাদানে ব্যবহার হবে।

2. লোকাল ফন্ট (Local Font) ইমপোর্ট করা

এসভিজি ফাইলে লোকাল ফন্ট ব্যবহার করার জন্য, আপনি <style> ট্যাগে @font-face ব্যবহার করে লোকাল ফন্ট ফাইলের পাথ নির্ধারণ করতে পারেন। এটি সাধারণত তখন ব্যবহৃত হয়, যখন আপনি নিজের কাস্টম ফন্ট ব্যবহার করতে চান।

উদাহরণ:

<svg width="500" height="200" xmlns="http://www.w3.org/2000/svg">
  <style>
    @font-face {
      font-family: 'MyCustomFont';
      src: url('path/to/font-file.ttf') format('truetype');
    }
    text {
      font-family: 'MyCustomFont', sans-serif;
      font-size: 30px;
      fill: black;
    }
  </style>
  <text x="10" y="50">Hello, SVG with Local Font!</text>
</svg>

ব্যাখ্যা:

• @font-face এর মাধ্যমে MyCustomFont নামক ফন্ট লোড করা হয়েছে, যা path/to/font-file.ttf অবস্থানে রয়েছে।
• font-family: 'MyCustomFont' দ্বারা টেক্সট উপাদানের ফন্ট সেট করা হয়েছে।

বিঃদ্রঃ: লোকাল ফন্ট ফাইলটি সাধারণত ওয়েবসাইটের ডিরেক্টরি অথবা সেভকৃত ফোল্ডারে থাকতে হবে, এবং আপনাকে ফন্ট ফাইলের সঠিক পাথ দিতে হবে।

3. ফন্ট ফাইলের কাস্টমাইজড ফরম্যাট ব্যবহার

যদি আপনি কিছু বিশেষ ফন্ট ফরম্যাট যেমন SVG ফন্ট ফাইল ব্যবহার করতে চান, তবে আপনি ফন্টটি এক্সপোর্ট করে সেটি এসভিজি ফাইল হিসেবে ব্যবহার করতে পারেন। এই ধরনের ফন্ট সাধারণত কিছু ওয়েবসাইটে ডাউনলোড করা যায়, যা এসভিজি ফরম্যাটে পাওয়া যায় এবং ওয়েবপেজে ব্যবহার করা যায়।

উদাহরণ:

<svg width="500" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <font id="MyFont" horiz-adv-x="1000">
      <font-face font-family="MyCustomFont" units-per-em="1000"/>
      <glyph unicode="A" d="M150,0 L75,200 L225,200 Z" />
    </font>
  </defs>
  <text x="10" y="50" font-family="MyCustomFont" font-size="30" fill="black">Hello, SVG Font!</text>
</svg>

ব্যাখ্যা:

• <defs> ট্যাগের মধ্যে font ফন্ট ফাইল সংজ্ঞায়িত করা হয়েছে, যেখানে glyph ট্যাগের মাধ্যমে প্রতিটি অক্ষরের ডাটা দেয়া হয়েছে।

সারাংশ

এসভিজি ফাইলে ফন্ট ইমপোর্ট করা অত্যন্ত সহজ এবং কার্যকরী। আপনি ওয়েব ফন্ট বা লোকাল ফন্ট ব্যবহার করে এসভিজি ফাইলে টেক্সটের ফন্ট কাস্টমাইজ করতে পারেন। ওয়েব ফন্ট সাধারণত Google Fonts বা অন্য ওয়েব সার্ভিস থেকে পাওয়া যায়, এবং লোকাল ফন্ট ফাইলগুলো @font-face এর মাধ্যমে লোড করা যায়। এগুলির মাধ্যমে আপনি এসভিজি ফাইলে বিভিন্ন স্টাইলিং এবং কাস্টম ফন্ট ব্যবহার করতে পারবেন, যা আপনার ডিজাইনের বৈচিত্র্য এবং আকর্ষণীয়তা বাড়াবে।