SVG এ টেক্সট যোগ করা

এসভিজি (Scalable Vector Graphics) ফাইলের মধ্যে আপনি সহজেই টেক্সট যোগ করতে পারেন। এটি ওয়েব পেজে গ্রাফিক্সের পাশাপাশি পাঠ্যও প্রদর্শন করতে সহায়তা করে। এসভিজি-তে টেক্সট যোগ করতে <text> ট্যাগ ব্যবহার করা হয়, যেখানে আপনি টেক্সটের অবস্থান, আকার, রঙ ইত্যাদি কাস্টমাইজ করতে পারেন।

এসভিজি তে টেক্সট যোগ করার মৌলিক কাঠামো

এসভিজি ফাইলের মধ্যে টেক্সট যোগ করতে, <text> ট্যাগের মধ্যে আপনি টেক্সটটি নির্দিষ্ট অবস্থানে সন্নিবেশ করতে পারবেন। এর মধ্যে x এবং y অ্যাট্রিবিউটের মাধ্যমে টেক্সটের অবস্থান নির্ধারণ করা হয়।

উদাহরণস্বরূপ:

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
  <text x="50" y="50" font-family="Arial" font-size="30" fill="black">Hello, SVG!</text>
</svg>

এখানে:

• x এবং y হলো টেক্সটের অবস্থান (প্রস্থ এবং উচ্চতা)।
• font-family হলো টেক্সটের ফন্ট স্টাইল।
• font-size হলো টেক্সটের আকার।
• fill হলো টেক্সটের রঙ।

টেক্সটের অবস্থান কাস্টমাইজ করা

এসভিজি তে টেক্সটের অবস্থান আপনি বিভিন্ন পদ্ধতিতে কাস্টমাইজ করতে পারেন। আপনি x এবং y মান পরিবর্তন করে টেক্সটের অবস্থান স্থির করতে পারেন, অথবা dx এবং dy এর মাধ্যমে অবস্থান শিফট করতে পারেন।

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
  <text x="50" y="50" font-family="Arial" font-size="30" fill="blue">SVG Text</text>
  <text x="50" y="100" dx="20" dy="20" font-family="Arial" font-size="30" fill="red">Shifted Text</text>
</svg>

এখানে:

• প্রথম <text> ট্যাগটি x="50" এবং y="50" তে অবস্থান করছে।
• দ্বিতীয় <text> ট্যাগটির dx="20" এবং dy="20" এর মাধ্যমে টেক্সটটি পূর্বের অবস্থান থেকে কিছুটা শিফট করা হয়েছে।

স্টাইল এবং অ্যানিমেশন যোগ করা

এসভিজি টেক্সটের উপর CSS স্টাইল এবং JavaScript অ্যানিমেশন যোগ করাও সম্ভব। উদাহরণস্বরূপ, আপনি CSS এর মাধ্যমে টেক্সটের রঙ বা আকার পরিবর্তন করতে পারেন:

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
  <style>
    .animateText {
      font-family: Arial;
      font-size: 30;
      fill: green;
      transition: fill 0.5s ease;
    }

    .animateText:hover {
      fill: red;
    }
  </style>
  <text x="50" y="50" class="animateText">Hover to Change Color</text>
</svg>

এখানে:

• .animateText ক্লাসের মাধ্যমে CSS স্টাইল দেয়া হয়েছে, যেখানে fill রঙ পরিবর্তন করা হয় হোভার করার সময়।

সারাংশ

এসভিজি তে টেক্সট যোগ করা একটি সহজ প্রক্রিয়া, যেখানে আপনি <text> ট্যাগের মাধ্যমে বিভিন্ন ধরনের টেক্সট কাস্টমাইজ করতে পারেন। আপনি টেক্সটের অবস্থান, আকার, রঙ ইত্যাদি পরিবর্তন করতে পারবেন এবং CSS এর মাধ্যমে টেক্সটের স্টাইলিং ও অ্যানিমেশন যোগ করতে পারবেন। এসভিজি-তে টেক্সটের এই লচীলতা ওয়েব ডেভেলপমেন্টের জন্য অত্যন্ত উপকারী।

এসভিজি (SVG) ফাইলের মাধ্যমে শুধু গ্রাফিক্সই নয়, বরং টেক্সটও যোগ করা সম্ভব। <text> ট্যাগের মাধ্যমে এসভিজি চিত্রে টেক্সট যোগ করা যায়। এটি আপনাকে ওয়েব পেজের গ্রাফিক্সের মধ্যে টেক্সট সন্নিবেশ করতে এবং তার অবস্থান, আকার, রং ইত্যাদি কাস্টমাইজ করতে সহায়তা করে।

<text> ট্যাগের ব্যবহার

<text> ট্যাগটি মূলত টেক্সটের একটি এলিমেন্ট, যেখানে আপনি টেক্সটটি নির্দিষ্ট স্থানে এবং কাস্টম স্টাইলের মাধ্যমে প্রদর্শন করতে পারেন। এই ট্যাগের মধ্যে টেক্সটের অবস্থান, আকার, রঙ এবং অন্যান্য বৈশিষ্ট্য নিয়ন্ত্রণ করা যায়।

উদাহরণ:

<svg width="500" height="200">
  <text x="50" y="50" font-family="Arial" font-size="30" fill="blue">Hello, SVG!</text>
</svg>

ব্যাখ্যা:

• x এবং y: টেক্সটের অবস্থান নির্ধারণ করে। x হলো অনুভূমিক (horizontal) এবং y হলো উল্লম্ব (vertical) অবস্থান।
• font-family: টেক্সটের ফন্ট পরিবারের নাম।
• font-size: টেক্সটের আকার (ফন্ট সাইজ)।
• fill: টেক্সটের রঙ।

<text> ট্যাগের অন্যান্য গুরুত্বপূর্ণ এট্রিবিউট

1. text-anchor:
   এটি টেক্সটের কিভাবে আলাইন হবে তা নির্ধারণ করে। এটি start, middle, বা end হতে পারে।
   • উদাহরণ: text-anchor="middle" – এটি টেক্সটকে কেন্দ্রবিন্দুতে সারিবদ্ধ করে।
2. stroke এবং stroke-width:
   এই অ্যাট্রিবিউটগুলি টেক্সটের বর্ডার বা সীমানা নির্ধারণ করে।
   • উদাহরণ: stroke="black" stroke-width="2" – এটি টেক্সটের চারপাশে কালো সীমানা তৈরি করবে।
3. transform:
   এটি টেক্সটের ঘূর্ণন, স্কেল বা স্থানান্তরের জন্য ব্যবহৃত হয়।
   • উদাহরণ: transform="rotate(45)" – এটি টেক্সটটিকে 45 ডিগ্রী ঘুরিয়ে দেবে।
4. dy:
   এটি টেক্সটের উল্লম্ব অবস্থান সামান্য পরিবর্তন করতে ব্যবহৃত হয়, বিশেষ করে যখন একাধিক লাইন টেক্সট থাকে।
   • উদাহরণ: dy="1.5em" – এটি টেক্সটের উপরিভাগ থেকে কিছুটা নিচে নিয়ে আসবে।

একাধিক লাইন টেক্সট যোগ করা

এসভিজি এর <text> ট্যাগ দিয়ে একাধিক লাইন টেক্সট যোগ করা সম্ভব, তবে <tspan> ট্যাগের মাধ্যমে প্রতিটি লাইনে টেক্সট স্থানান্তর করা হয়।

উদাহরণ:

<svg width="500" height="200">
  <text x="50" y="50" font-family="Arial" font-size="30" fill="blue">
    Hello,
    <tspan x="50" dy="1.2em">Welcome to SVG!</tspan>
    <tspan x="50" dy="1.2em">Enjoy the tutorial!</tspan>
  </text>
</svg>

ব্যাখ্যা:

• <tspan>: এটি টেক্সটের নতুন লাইনে স্থানান্তর করতে ব্যবহৃত হয়। dy অ্যাট্রিবিউটের মাধ্যমে প্রতিটি লাইনের মধ্যে একটু স্থান রাখা হয়।

সারাংশ

এসভিজি <text> ট্যাগের মাধ্যমে আপনি সহজেই গ্রাফিক্সের মধ্যে টেক্সট যোগ করতে পারেন এবং সেটি কাস্টমাইজ করতে পারেন। এর মাধ্যমে বিভিন্ন প্রকার স্টাইলিং, অবস্থান, আকার এবং অ্যানিমেশন প্রয়োগ করে ওয়েব ডিজাইনে টেক্সট ব্যবহারের একটি শক্তিশালী উপায় তৈরি হয়।

এসভিজি (SVG) ফরম্যাটে টেক্সট উপাদান ব্যবহার করে ওয়েব পেজে পাঠ্য বা শব্দ প্রদর্শন করা যায়। এসভিজি তে টেক্সটের ফন্ট, সাইজ, এবং স্টাইল কনফিগার করার জন্য CSS স্টাইলিং ব্যবহার করা হয়। এসভিজি টেক্সট উপাদানের জন্য একাধিক এট্রিবিউট এবং স্টাইলিং অপশন রয়েছে, যা পাঠ্যের চেহারা কাস্টমাইজ করতে সহায়তা করে।

এসভিজি টেক্সট উপাদান

এসভিজি ফরম্যাটে টেক্সট প্রদর্শন করতে <text> ট্যাগ ব্যবহার করা হয়। এর মধ্যে টেক্সটের কনটেন্ট, অবস্থান, এবং স্টাইলিং নির্ধারণ করা হয়।

বেসিক টেক্সট উদাহরণ:

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="40">Hello, SVG!</text>
</svg>

ফন্ট কনফিগার করা

font-family: টেক্সটের ফন্ট নির্বাচন করতে font-family ব্যবহার করা হয়। এখানে আপনি পছন্দমত ফন্টের নাম দিতে পারেন, যেমন "Arial", "Verdana", "Times New Roman" ইত্যাদি।

font-size: টেক্সটের আকার বা সাইজ নির্ধারণ করতে font-size ব্যবহার করা হয়। এটি পিক্সেল, পয়েন্ট বা অন্যান্য ইউনিটে উল্লেখ করা যেতে পারে।

font-weight: টেক্সটের মোটা বা পাতলা হওয়ার জন্য font-weight ব্যবহার করা হয়। এটি সাধারণত "normal", "bold", বা সংখ্যাগত মান (যেমন, 100, 200, ..., 900) দিয়ে কনফিগার করা হয়।

font-style: টেক্সটের স্টাইল (যেমন italics) কনফিগার করতে font-style ব্যবহার করা হয়। এর মান হতে পারে "normal" অথবা "italic"।

উদাহরণ:

<svg width="400" height="100" xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="40" font-family="Arial" font-size="24" font-weight="bold" font-style="italic">
    Styled Text in SVG
  </text>
</svg>

টেক্সটের অ্যালাইনমেন্ট

text-anchor: টেক্সটের অবস্থান বা অ্যালাইনমেন্ট নির্ধারণ করতে text-anchor ব্যবহার করা হয়। এটি start, middle, এবং end তিনটি মানে হতে পারে:

• start: টেক্সটের শুরু অবস্থান (ডিফল্ট)
• middle: টেক্সটের মাঝখান দিয়ে অ্যালাইন করা
• end: টেক্সটের শেষ দিয়ে অ্যালাইন করা

উদাহরণ:

<svg width="400" height="100" xmlns="http://www.w3.org/2000/svg">
  <text x="200" y="40" font-family="Verdana" font-size="24" text-anchor="middle">
    Centered Text
  </text>
</svg>

টেক্সটের রঙ এবং স্ট্রোক

fill: টেক্সটের রঙ পরিবর্তন করতে fill ব্যবহার করা হয়।

stroke: টেক্সটের চারপাশে একটি বর্ডার বা স্ট্রোক যোগ করতে stroke ব্যবহার করা হয়।

stroke-width: স্ট্রোকের প্রস্থ নির্ধারণ করতে stroke-width ব্যবহার করা হয়।

উদাহরণ:

<svg width="400" height="100" xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="40" font-family="Arial" font-size="30" fill="blue" stroke="red" stroke-width="2">
    Text with Stroke and Fill
  </text>
</svg>

টেক্সটের গভীরতা এবং ট্রান্সফর্মেশন

transform: টেক্সটের রূপান্তর বা অ্যানিমেশন করতে transform ব্যবহার করা হয়, যেমন রোটেশন, স্কেলিং, ট্রান্সলেশন (স্থানান্তর) ইত্যাদি।

• rotate(): টেক্সট ঘুরানো
• scale(): টেক্সটের আকার বাড়ানো বা কমানো
• translate(): টেক্সট স্থানান্তর করা

উদাহরণ:

<svg width="400" height="100" xmlns="http://www.w3.org/2000/svg">
  <text x="100" y="40" font-family="Verdana" font-size="24" transform="rotate(15)">
    Rotated Text
  </text>
</svg>

সারাংশ

এসভিজি (SVG) তে টেক্সটের ফন্ট, সাইজ, এবং স্টাইল কনফিগার করা সহজ এবং অত্যন্ত নমনীয়। আপনি বিভিন্ন ফন্ট, সাইজ, রঙ, এবং স্টাইলিং ব্যবহার করে টেক্সটের চেহারা পরিবর্তন করতে পারেন। এছাড়া, টেক্সটের অ্যালাইনমেন্ট, স্ট্রোক, এবং রূপান্তরগুলি যোগ করে আরও আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ ডিজাইন তৈরি করা যায়। এসভিজি টেক্সট ব্যবহারে ওয়েব ডেভেলপমেন্টে অত্যন্ত কার্যকরী এবং স্কেলযোগ্য গ্রাফিক্স তৈরি করা সম্ভব।

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

১. টেক্সটের অবস্থান নির্ধারণ (Positioning the Text)

এসভিজি টেক্সটের অবস্থান নির্ধারণ করতে x এবং y অ্যাট্রিবিউট ব্যবহার করা হয়। এগুলি টেক্সটের শুরু পয়েন্ট (সর্বপ্রথম অক্ষরের অবস্থান) নির্দেশ করে।

উদাহরণ:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <text x="50" y="50" fill="black">Hello, SVG!</text>
</svg>

এই কোডে, x="50" এবং y="50" নির্দেশ করে যে টেক্সট "Hello, SVG!" ৫০, ৫০ পিক্সেলের অবস্থানে শুরু হবে। এর মানে হল যে টেক্সটটি এসভিজি ক্যানভাসের ৫০ পিক্সেল ডান দিকে এবং ৫০ পিক্সেল নিচে অবস্থান করবে।

২. টেক্সটের Alignment সেট করা (Text Alignment)

এসভিজি টেক্সটের Alignment নির্ধারণের জন্য text-anchor অ্যাট্রিবিউট ব্যবহার করা হয়। এটি টেক্সটের অবস্থান পরিবর্তন না করে, টেক্সটের অক্ষরের অবস্থান বা কেন্দ্র সঠিকভাবে ঠিক করে।

text-anchor এর প্রধান মানগুলো হলো:

• start: টেক্সটের শুরুর পয়েন্ট অনুযায়ী এলাইনমেন্ট (ডিফল্ট)
• middle: টেক্সটের কেন্দ্র অনুযায়ী এলাইনমেন্ট
• end: টেক্সটের শেষ পয়েন্ট অনুযায়ী এলাইনমেন্ট

উদাহরণ ১: start Alignment

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <text x="50" y="50" text-anchor="start" fill="black">Hello, SVG!</text>
</svg>

এখানে text-anchor="start" ব্যবহার করা হয়েছে, যার মানে হলো টেক্সটের শুরুর পয়েন্ট (50, 50) থেকে শুরু হবে এবং টেক্সটের বাকি অংশ সেই অনুযায়ী সাজানো হবে।

উদাহরণ ২: middle Alignment

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <text x="100" y="50" text-anchor="middle" fill="black">Hello, SVG!</text>
</svg>

এখানে text-anchor="middle" ব্যবহার করা হয়েছে, যার মানে হলো টেক্সটটি ১০০ পিক্সেল এক্স অক্ষরের অবস্থানকে কেন্দ্র করে সেন্টার করা হবে। এতে টেক্সটের শুরুর এবং শেষের অক্ষর ৫০ পিক্সেল দূরে থাকবে।

উদাহরণ ৩: end Alignment

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <text x="150" y="50" text-anchor="end" fill="black">Hello, SVG!</text>
</svg>

এখানে text-anchor="end" ব্যবহার করা হয়েছে, যার মানে হলো টেক্সটটির শেষ অক্ষরের অবস্থান x="150" এর সাথে মিলে যাবে।

৩. টেক্সটের বেসলাইন Alignment (Baseline Alignment)

এসভিজি টেক্সটের বেসলাইন নির্ধারণ করার জন্য dominant-baseline অ্যাট্রিবিউট ব্যবহার করা হয়। এটি টেক্সটের বেসলাইন পজিশনকে নিয়ন্ত্রণ করে, যার মাধ্যমে আপনি টেক্সটের উল্লম্ব অবস্থান নির্ধারণ করতে পারেন।

dominant-baseline এর মানগুলো হলো:

• auto: ডিফল্ট মান, যা সাধারণত সিস্টেমের বেসলাইন অনুযায়ী নির্ধারণ হয়।
• middle: টেক্সটের মধ‌্যবিন্দু অনুযায়ী।
• hanging: টেক্সটের উপরের অংশে।

উদাহরণ:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <text x="100" y="100" dominant-baseline="middle" text-anchor="middle" fill="black">Hello, SVG!</text>
</svg>

এখানে dominant-baseline="middle" এবং text-anchor="middle" ব্যবহার করা হয়েছে, যার মাধ্যমে টেক্সটটি ক্যানভাসের কেন্দ্রের দিকে ঠিকভাবে এলাইন হয় এবং উল্লম্বভাবে সেন্টার করা হয়।

৪. রোটেশন (Rotation) এর মাধ্যমে টেক্সটের অবস্থান পরিবর্তন

এসভিজি টেক্সটের অবস্থান রোটেট করতেও transform অ্যাট্রিবিউট ব্যবহার করা যেতে পারে। এতে টেক্সট ঘুরিয়ে নতুন পজিশনে বসানো হয়।

উদাহরণ:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <text x="100" y="100" transform="rotate(45 100,100)" fill="black">Hello, SVG!</text>
</svg>

এখানে rotate(45 100,100) রোটেশন ব্যবহার করা হয়েছে, যার মাধ্যমে টেক্সটটি ৪৫ ডিগ্রি কোণ এ ঘুরে যাবে এবং ১০০, ১০০ পিক্সেল পজিশনে থাকবে।

সারাংশ

এসভিজি (SVG) টেক্সটের অবস্থান এবং Alignment নির্ধারণ করার জন্য x, y, text-anchor, এবং dominant-baseline অ্যাট্রিবিউট ব্যবহার করা হয়। আপনি টেক্সটকে সঠিকভাবে স্থানান্তরিত করতে পারেন এবং তার Alignment নিয়ন্ত্রণ করতে পারেন, যাতে আপনার ডিজাইন সুন্দর এবং সঠিকভাবে প্রদর্শিত হয়। এর মাধ্যমে আপনি টেক্সটের অবস্থান, সাইজ এবং রোটেশনসহ আরও বিভিন্ন বিষয় নির্ধারণ করতে পারবেন।

এসভিজি (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 এর মাধ্যমে লোড করা যায়। এগুলির মাধ্যমে আপনি এসভিজি ফাইলে বিভিন্ন স্টাইলিং এবং কাস্টম ফন্ট ব্যবহার করতে পারবেন, যা আপনার ডিজাইনের বৈচিত্র্য এবং আকর্ষণীয়তা বাড়াবে।