SVG ফরম্যাটে গ্রাফিক্স প্রদর্শন করার জন্য <svg> ট্যাগ ব্যবহৃত হয়। এই ট্যাগটি SVG ডকুমেন্টের মূল কন্টেইনার হিসেবে কাজ করে এবং এর মধ্যে বিভিন্ন গ্রাফিক্যাল উপাদান (যেমন, রেকটেঙ্গল, সার্কেল, লাইন ইত্যাদি) অন্তর্ভুক্ত করা হয়। <svg> ট্যাগের বিভিন্ন এট্রিবিউটস (Attributes) আছে, যা গ্রাফিক্সের আকার, স্থান, রং এবং অন্যান্য বৈশিষ্ট্য কনফিগার করার জন্য ব্যবহৃত হয়।
<svg> ট্যাগ
<svg> ট্যাগটি ব্যবহার করে আপনি একটি SVG কন্টেইনার তৈরি করেন, যার মধ্যে বিভিন্ন গ্রাফিক্যাল উপাদান রাখা হয়। সাধারণভাবে, এটি একটি ওয়েব পেজের অংশ হিসেবে কাজ করে, যেখানে গ্রাফিক্স, চিত্র বা অ্যানিমেশন প্রদর্শিত হয়।
উদাহরণ:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="80" stroke="black" stroke-width="4" fill="yellow" />
</svg>
এখানে, <svg> ট্যাগটি একটি 200x200 পিক্সেলের ক্যানভাস তৈরি করেছে এবং একটি হলুদ রঙের বৃত্ত (circle) আঁকছে যার ব্যাসার্ধ 80।
<svg> ট্যাগের প্রধান এট্রিবিউটস
- width এবং height:
- এগুলো দ্বারা SVG ক্যানভাসের আকার নির্ধারিত হয়। এই এট্রিবিউটসের মান পিক্সেলে দেওয়া হয়।
- উদাহরণ:
width="500" height="300"
- xmlns (XML Namespace):
- এটি SVG এর XML namespace নির্ধারণ করে, যা ডকুমেন্টের মধ্যে SVG উপাদানগুলি সঠিকভাবে শনাক্ত করতে সাহায্য করে। এই namespace সাধারণত
xmlns="http://www.w3.org/2000/svg"থাকে।
- এটি SVG এর XML namespace নির্ধারণ করে, যা ডকুমেন্টের মধ্যে SVG উপাদানগুলি সঠিকভাবে শনাক্ত করতে সাহায্য করে। এই namespace সাধারণত
- viewBox:
viewBoxএট্রিবিউটটি গ্রাফিক্সের একটি নির্দিষ্ট অংশকে দর্শনীয় করে তোলে। এটি 4টি মান নেয়:min-x,min-y,width, এবংheight।- উদাহরণ:
viewBox="0 0 200 200"– এটি গ্রাফিক্সের একটি অংশ প্রদর্শন করবে যা 200x200 পিক্সেলের আকারে ফিট হবে।
- preserveAspectRatio:
- এই এট্রিবিউটটি গ্রাফিক্সের আকার পরিবর্তন করা হলে তার অনুপাত (aspect ratio) কিভাবে রক্ষা করা হবে তা নির্ধারণ করে।
- উদাহরণ:
preserveAspectRatio="xMidYMid meet"
- style:
- CSS স্টাইল নির্ধারণ করার জন্য ব্যবহৃত হয়, যাতে SVG গ্রাফিক্সের মধ্যে ইনলাইন স্টাইল প্রয়োগ করা যায়।
- উদাহরণ:
style="border: 1px solid black;"
অন্যান্য গুরুত্বপূর্ণ এট্রিবিউটস
- id:
- এটি SVG উপাদানের একটি ইউনিক আইডি সেট করে, যা JavaScript অথবা CSS এর মাধ্যমে সেই উপাদানটি চিহ্নিত করতে সহায়তা করে।
- উদাহরণ:
id="myCircle"
- class:
- এটি SVG উপাদানগুলিকে একটি নির্দিষ্ট CSS ক্লাসে যুক্ত করতে ব্যবহৃত হয়, যাতে সেই উপাদানগুলির জন্য একাধিক স্টাইল প্রয়োগ করা যায়।
- উদাহরণ:
class="circleClass"
- x, y:
- এগুলো SVG উপাদানগুলির অবস্থান নির্ধারণ করে, যেখানে
xঅনুভূমিক এবংyউল্লম্ব অবস্থান বোঝায়। - উদাহরণ:
<rect x="50" y="50" width="150" height="150" />
- এগুলো SVG উপাদানগুলির অবস্থান নির্ধারণ করে, যেখানে
- fill:
- এই এট্রিবিউটটি SVG উপাদানের ভেতরের রং নির্ধারণ করে।
- উদাহরণ:
fill="red"
- stroke:
- এটি SVG উপাদানের চারপাশের রং (বর্ডার) নির্ধারণ করে।
- উদাহরণ:
stroke="black"
- stroke-width:
- এটি SVG উপাদানের বর্ডারের প্রস্থ (width) নির্ধারণ করে।
- উদাহরণ:
stroke-width="5"
সারাংশ
<svg> ট্যাগ এবং তার এট্রিবিউটসের মাধ্যমে আপনি SVG ডকুমেন্টের বিভিন্ন গ্রাফিক্যাল উপাদান তৈরি ও কাস্টমাইজ করতে পারেন। এর মাধ্যমে ওয়েব পেজে স্কেলেবল এবং উচ্চমানের গ্রাফিক্স প্রদর্শন করা সম্ভব, যা ওয়েব ডিজাইনে অত্যন্ত কার্যকর।
Read more
