এসভিজি (SVG) এর পূর্ণরূপ হলো Scalable Vector Graphics। এটি একটি মার্কআপ ভাষা যা ভেক্টর-ভিত্তিক গ্রাফিক্স তৈরি ও প্রদর্শনের জন্য ব্যবহৃত হয়। HTML5 এর অংশ হিসেবে SVG ওয়েবপেজে সরাসরি গ্রাফিক্স যোগ করার একটি শক্তিশালী পদ্ধতি সরবরাহ করে। এটি রেজোলিউশন স্বাধীন এবং বিভিন্ন স্ক্রিন সাইজে মান সমান থাকে।
এসভিজি-এর বৈশিষ্ট্য
- ভেক্টর-ভিত্তিক গ্রাফিক্স: এটি লাইন, পয়েন্ট এবং আকৃতির মাধ্যমে গ্রাফিক্স তৈরি করে, যা পিক্সেলেশন ছাড়াই বড় বা ছোট করা যায়।
- রেজোলিউশন স্বাধীন: যেকোনো স্ক্রিন রেজোলিউশনে মান বজায় রাখে।
- ইন্টারেক্টিভ: CSS এবং JavaScript দিয়ে স্টাইল এবং ইন্টারেকশন যোগ করা যায়।
- অ্যানিমেশন: বিল্ট-ইন অ্যানিমেশন সমর্থন করে।
- ফাইলের আকার ছোট: এসভিজি গ্রাফিক্স সাধারণত লাইটওয়েট হয়।
এসভিজি ট্যাগ
<svg>
বর্ণনা: HTML এ SVG যুক্ত করার জন্য <svg> ট্যাগ ব্যবহার করা হয়। এটি SVG গ্রাফিক্স ধারণ করে।
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="50" fill="blue" />
</svg>
এসভিজি আকৃতির উপাদানসমূহ
১. circle (বৃত্ত)
ব্যবহার: বৃত্ত আঁকতে ব্যবহৃত হয়।
<svg width="200" height="200">
<circle cx="100" cy="100" r="50" fill="red" />
</svg>
| অ্যাট্রিবিউট | অর্থ |
|---|---|
cx | বৃত্তের কেন্দ্রের X অবস্থান |
cy | বৃত্তের কেন্দ্রের Y অবস্থান |
r | বৃত্তের ব্যাসার্ধ |
২. rect (আয়তক্ষেত্র)
ব্যবহার: আয়তক্ষেত্র আঁকতে ব্যবহৃত হয়।
<svg width="200" height="200">
<rect x="50" y="50" width="100" height="100" fill="green" />
</svg>
| অ্যাট্রিবিউট | অর্থ |
|---|---|
x | আয়তক্ষেত্রের বাম কোণের X অবস্থান |
y | আয়তক্ষেত্রের বাম কোণের Y অবস্থান |
width | আয়তক্ষেত্রের প্রস্থ |
height | আয়তক্ষেত্রের উচ্চতা |
৩. line (রেখা)
ব্যবহার: একটি সরল রেখা আঁকতে ব্যবহৃত হয়।
<svg width="200" height="200">
<line x1="50" y1="50" x2="150" y2="150" stroke="black" stroke-width="2" />
</svg>
| অ্যাট্রিবিউট | অর্থ |
|---|---|
x1, y1 | রেখার প্রারম্ভিক পয়েন্টের অবস্থান |
x2, y2 | রেখার সমাপ্তি পয়েন্টের অবস্থান |
৪. polygon (বহুভুজ)
ব্যবহার: একাধিক পয়েন্ট ব্যবহার করে একটি বহুভুজ আঁকতে ব্যবহৃত হয়।
<svg width="200" height="200">
<polygon points="50,50 150,50 100,150" fill="orange" />
</svg>
| অ্যাট্রিবিউট | অর্থ |
|---|---|
points | প্রতিটি পয়েন্টের X,Y অবস্থান |
৫. path (পথ)
ব্যবহার: জটিল আকৃতি আঁকতে ব্যবহৃত হয়।
<svg width="200" height="200">
<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="purple" fill="transparent" stroke-width="2" />
</svg>
| অ্যাট্রিবিউট | অর্থ |
|---|---|
d | পথের নির্দেশনা (মুভ, লাইন, কার্ভ) |
এসভিজি স্টাইলিং
CSS ব্যবহার করে SVG-কে স্টাইল করা যায়। উদাহরণ:
<svg width="200" height="200">
<circle cx="100" cy="100" r="50" class="circle" />
</svg>
<style>
.circle {
fill: yellow;
stroke: black;
stroke-width: 5;
}
</style>
এসভিজি অ্যানিমেশন
SVG অ্যানিমেশন যুক্ত করার জন্য animate ট্যাগ ব্যবহার করা যায়।
<svg width="200" height="200">
<circle cx="100" cy="100" r="50" fill="blue">
<animate attributeName="r" from="10" to="50" dur="2s" repeatCount="indefinite" />
</circle>
</svg>
এসভিজি বনাম ইমেজ
| বৈশিষ্ট্য | SVG | ইমেজ (JPEG/PNG) |
|---|---|---|
| ফাইল ফরম্যাট | ভেক্টর ভিত্তিক | রাস্টার ভিত্তিক |
| রেজোলিউশন | রেজোলিউশন স্বাধীন | স্কেল করলে পিক্সেলেশন হয় |
| স্টাইলিং | CSS এবং JavaScript ব্যবহার করে সম্ভব | সরাসরি স্টাইলিং সম্ভব নয় |
| ফাইল সাইজ | ছোট, সহজ পরিবর্তনযোগ্য | তুলনামূলক বড় |
উদাহরণ: সম্পূর্ণ এসভিজি কোড
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Example</title>
</head>
<body>
<h1>এসভিজি উদাহরণ</h1>
<svg width="400" height="200">
<rect x="50" y="50" width="100" height="100" fill="blue" />
<circle cx="250" cy="100" r="50" fill="red" />
<line x1="50" y1="150" x2="350" y2="150" stroke="green" stroke-width="2" />
</svg>
</body>
</html>
SVG ব্যবহার করে ওয়েবপেজে রেজোলিউশন স্বাধীন, ইন্টারেক্টিভ এবং লাইটওয়েট গ্রাফিক্স তৈরি করা যায়। এটি আধুনিক ওয়েব ডেভেলপমেন্টে একটি গুরুত্বপূর্ণ টুল যা জটিল আকৃতি, অ্যানিমেশন এবং ইন্টারেক্টিভ কন্টেন্টের জন্য আদর্শ।
Read more
