SVG এর মৌলিক সিমেন্টিক্স

এসভিজি (Scalable Vector Graphics) একটি XML ভিত্তিক ফরম্যাট, যা ওয়েব পেজে ভেক্টর গ্রাফিক্স তৈরি করতে ব্যবহৃত হয়। এসভিজি ফাইলের মাধ্যমে গ্রাফিক্স তৈরি করার জন্য কিছু মৌলিক সিমেন্টিক্স বা ট্যাগ ব্যবহার করা হয়। এসভিজি ফাইলের স্ট্রাকচার এবং তার উপাদানগুলোর জন্য যে সিমেন্টিক্স ব্যবহৃত হয়, তা জানা ওয়েব ডেভেলপারদের জন্য অত্যন্ত গুরুত্বপূর্ণ। এখানে এসভিজি এর মৌলিক সিমেন্টিক্স (tags) এবং তাদের ব্যাখ্যা দেওয়া হল।

SVG ট্যাগ

<svg>: এটি মূল এসভিজি ডকুমেন্টের রুট এলিমেন্ট। এসভিজি গ্রাফিক্স তৈরি করতে, প্রথমে এই ট্যাগে সমস্ত উপাদান বা গ্রাফিক্স যোগ করতে হয়। এই ট্যাগে width, height, viewBox এর মতো অ্যাট্রিবিউট ব্যবহার করা হয় যা চিত্রের সাইজ এবং দৃশ্যমান অঞ্চল নির্ধারণ করে।

উদাহরণ:

<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
  <!-- SVG Content goes here -->
</svg>

গ্রাফিক্স উপাদান

<circle>: এটি একটি বৃত্ত (circle) তৈরি করতে ব্যবহৃত হয়। এর জন্য সাধারণত cx, cy, r অ্যাট্রিবিউট ব্যবহৃত হয় যা বৃত্তের কেন্দ্রের অবস্থান এবং তার ব্যাসার্ধ নির্ধারণ করে।

উদাহরণ:

<circle cx="250" cy="250" r="100" stroke="black" stroke-width="4" fill="red" />

<rect>: এটি একটি আয়তক্ষেত্র (rectangle) তৈরি করতে ব্যবহৃত হয়। এর জন্য x, y, width, এবং height অ্যাট্রিবিউট ব্যবহৃত হয়।

উদাহরণ:

<rect x="50" y="50" width="200" height="100" stroke="black" stroke-width="4" fill="blue" />

<line>: এটি একটি সোজা রেখা (line) তৈরি করতে ব্যবহৃত হয়। এর জন্য x1, y1, x2, y2 অ্যাট্রিবিউট ব্যবহার করা হয় যা রেখার শুরু এবং শেষ পয়েন্ট নির্ধারণ করে।

উদাহরণ:

<line x1="0" y1="0" x2="200" y2="200" stroke="green" stroke-width="4" />

<polygon>: এটি একাধিক পয়েন্টের মাধ্যমে একটি পলিগন তৈরি করতে ব্যবহৃত হয়। এর জন্য points অ্যাট্রিবিউট ব্যবহার করা হয়, যেখানে একাধিক পয়েন্ট সেপারেটেড দ্বারা উল্লেখ করা হয়।

উদাহরণ:

<polygon points="200,10 250,190 160,210" stroke="purple" stroke-width="4" fill="yellow" />

<path>: এটি একটি মাল্টি-পয়েন্ট রুট (curve) তৈরি করতে ব্যবহৃত হয়। এর জন্য d অ্যাট্রিবিউট ব্যবহার করা হয়, যা বিভিন্ন ধরনের মুভ, লাইন, কেভ, এবং ক্লোজিং অপারেশন নির্ধারণ করে।

উদাহরণ:

<path d="M10 10 H 90 V 90 H 10 Z" stroke="black" stroke-width="4" fill="transparent" />

টেক্সট উপাদান

<text>: এসভিজিতে টেক্সট প্রদর্শন করতে <text> ট্যাগ ব্যবহার করা হয়। এর জন্য x, y অ্যাট্রিবিউট ব্যবহার করা হয়, যা টেক্সটের অবস্থান নির্ধারণ করে।

উদাহরণ:

<text x="50" y="50" font-family="Verdana" font-size="35" fill="blue">Hello, SVG!</text>

অন্যান্য উপাদান

<g>: এটি একটি গ্রুপ ট্যাগ, যার মাধ্যমে একাধিক গ্রাফিক্স উপাদানকে একটি গ্রুপে জড়ো করা যায়। এটি একসাথে রূপান্তর (transformation), স্টাইল বা অন্যান্য প্রপার্টি প্রয়োগ করতে সহায়তা করে।

উদাহরণ:

<g transform="translate(50,50)">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  <rect x="100" y="100" width="80" height="80" stroke="black" stroke-width="3" fill="green" />
</g>

<defs> এবং <use>: এসভিজি ফাইলের মধ্যে পুনরাবৃত্তি গ্রাফিক্স তৈরি করতে <defs> এবং <use> ট্যাগ ব্যবহার করা হয়। <defs> ট্যাগের মধ্যে উপাদানগুলো সংজ্ঞায়িত করা হয় এবং <use> ট্যাগের মাধ্যমে সেগুলো পুনরায় ব্যবহার করা হয়।

উদাহরণ:

<defs>
  <circle id="myCircle" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="blue" />
</defs>
<use href="#myCircle" x="100" y="100" />
<use href="#myCircle" x="200" y="200" />

সারাংশ

এসভিজি (SVG) এর মৌলিক সিমেন্টিক্স বা ট্যাগগুলো ওয়েব পেজে গ্রাফিক্স তৈরি করার একটি শক্তিশালী মাধ্যম। এর মাধ্যমে বিভিন্ন ধরনের চিত্র যেমন বৃত্ত, আয়তক্ষেত্র, রেখা, পলিগন, এবং পথ তৈরি করা সম্ভব। এই সিমেন্টিক্স এবং ট্যাগগুলোর মাধ্যমে এসভিজি ডকুমেন্টের গঠন এবং কাস্টমাইজেশন করা যায়।