এসভিজি (SVG) ফাইলের মধ্যে বিভিন্ন ধরনের গ্রাফিক্স তৈরি করতে ব্যবহার করা হয় কিছু মৌলিক ট্যাগ। এই ট্যাগগুলি বিভিন্ন ভেক্টর শেপ (যেমন বৃত্ত, আয়তক্ষেত্র, রেখা, পলিলাইন, পলিগন) তৈরি করার জন্য ব্যবহৃত হয়। নিচে এসভিজির এই প্রধান ট্যাগগুলোর ব্যাখ্যা দেওয়া হলো এবং এগুলির ব্যবহারের উদাহরণ দেওয়া হয়েছে।
<circle> ট্যাগ
<circle> ট্যাগের মাধ্যমে একটি বৃত্ত (circle) তৈরি করা হয়। এটি সাধারণত একটি কেন্দ্রে নির্দিষ্ট ব্যাসার্ধের বৃত্ত আঁকতে ব্যবহৃত হয়।
ব্যবহার:
<svg width="200" height="200">
<circle cx="100" cy="100" r="50" stroke="black" stroke-width="3" fill="red" />
</svg>
ব্যাখ্যা:
cxওcy: বৃত্তের কেন্দ্রের X ও Y অবস্থান নির্ধারণ করে।r: বৃত্তের ব্যাসার্ধ (radius)।stroke: বৃত্তের বর্ডারের রং।stroke-width: বর্ডারের প্রস্থ।fill: বৃত্তের অভ্যন্তরের রং।
<rect> ট্যাগ
<rect> ট্যাগের মাধ্যমে একটি আয়তক্ষেত্র (rectangle) তৈরি করা হয়। এটি দৈর্ঘ্য ও প্রস্থ নির্ধারণ করে একটি আয়তক্ষেত্র আঁকতে ব্যবহৃত হয়।
ব্যবহার:
<svg width="200" height="200">
<rect x="50" y="50" width="100" height="80" stroke="blue" stroke-width="4" fill="yellow" />
</svg>
ব্যাখ্যা:
xওy: আয়তক্ষেত্রের উপরের বাম কোণার X ও Y অবস্থান।widthওheight: আয়তক্ষেত্রের প্রস্থ এবং উচ্চতা।stroke: আয়তক্ষেত্রের বর্ডারের রং।stroke-width: বর্ডারের প্রস্থ।fill: আয়তক্ষেত্রের অভ্যন্তরের রং।
<line> ট্যাগ
<line> ট্যাগের মাধ্যমে একটি সোজা রেখা (line) আঁকা হয়। এটি দুটি পয়েন্টের মধ্যে রেখা তৈরি করে।
ব্যবহার:
<svg width="200" height="200">
<line x1="10" y1="10" x2="190" y2="190" stroke="green" stroke-width="2" />
</svg>
ব্যাখ্যা:
x1ওy1: রেখার প্রথম পয়েন্টের X ও Y অবস্থান।x2ওy2: রেখার দ্বিতীয় পয়েন্টের X ও Y অবস্থান।stroke: রেখার রং।stroke-width: রেখার প্রস্থ।
<polyline> ট্যাগ
<polyline> ট্যাগের মাধ্যমে একাধিক সংযুক্ত রেখা (connected lines) তৈরি করা হয়, যাকে পলিলাইন বলা হয়। এটি একাধিক পয়েন্টের মাধ্যমে একটি আঁকাবাঁকা রেখা তৈরি করে।
ব্যবহার:
<svg width="200" height="200">
<polyline points="50,150 100,50 150,150" stroke="purple" stroke-width="3" fill="none" />
</svg>
ব্যাখ্যা:
points: একাধিক পয়েন্টের তালিকা, যেখানে প্রতিটি পয়েন্টের X ও Y মান দিয়ে রেখাগুলি সংযুক্ত করা হয়।stroke: রেখার রং।stroke-width: রেখার প্রস্থ।fill: অভ্যন্তরের রং (এখানে "none" ব্যবহার করা হয়েছে, কারণ পলিলাইনে কোনো পূর্ণতা নেই)।
<polygon> ট্যাগ
<polygon> ট্যাগের মাধ্যমে একটি বহুভুজ (polygon) আঁকা হয়, যা একাধিক পয়েন্টের মাধ্যমে তৈরি হয়। পলিগন চিত্রে সাধারণত অনেকগুলো সোজা রেখা যুক্ত থাকে যা একটি ঘেরাবন্ধ গঠন তৈরি করে।
ব্যবহার:
<svg width="200" height="200">
<polygon points="100,10 40,180 190,60 10,60 160,180" stroke="orange" stroke-width="4" fill="blue" />
</svg>
ব্যাখ্যা:
points: একাধিক পয়েন্টের তালিকা যা পলিগনের কোণগুলির অবস্থান নির্দেশ করে।stroke: পলিগনের বর্ডারের রং।stroke-width: বর্ডারের প্রস্থ।fill: পলিগনের অভ্যন্তরের রং।
এসভিজির এই ট্যাগগুলি ব্যবহার করে খুব সহজেই বিভিন্ন ধরনের ভেক্টর গ্রাফিক্স তৈরি করা যায়, যা ওয়েব ডিজাইনে অত্যন্ত কার্যকর। এদের মাধ্যমে তৈরি করা চিত্রগুলো স্কেলযোগ্য এবং নির্ভুলভাবে বিভিন্ন স্ক্রীনে প্রদর্শিত হয়, তাই এসভিজি গ্রাফিক্স ওয়েব পেজ ডিজাইন ও ইউজার ইন্টারফেসের জন্য উপযুক্ত।
Read more
