এসভিজি (SVG) হলো স্কেলযোগ্য ভেক্টর গ্রাফিক্স, যা ওয়েব ডিজাইনে বিভিন্ন ধরনের গ্রাফিক্স, চিত্র, আইকন এবং অ্যানিমেশন তৈরির জন্য ব্যবহৃত হয়। এসভিজি ফাইলগুলিকে লেআউটের মধ্যে সঠিকভাবে স্থান দেওয়ার জন্য, CSS Grids এবং Flexbox দুটি অত্যন্ত শক্তিশালী টুলস। এই দুটি CSS পদ্ধতি এসভিজি উপাদানগুলির লেআউট পরিচালনা এবং সেগুলির মধ্যে ফ্লেক্সিবিলিটি এবং রেসপন্সিভ আচরণ যোগ করতে সহায়তা করে।
নিচে CSS Grids এবং Flexbox ব্যবহার করে এসভিজি লেআউট ম্যানেজমেন্টের কৌশল আলোচনা করা হলো।
1. Flexbox দিয়ে SVG Layout Management
Flexbox (Flexible Box) CSS লেআউট মডেলটি ব্যবহৃত হয় উপাদানগুলিকে এক লাইনে বা কলামে ফ্লেক্সিবলভাবে সাজানোর জন্য। Flexbox দিয়ে আপনি এসভিজি উপাদানগুলিকে খুব সহজে সেন্টার বা স্পেস তৈরি করতে পারেন এবং তাদের মধ্যে ইন্টারঅ্যাকশন নিয়ন্ত্রণ করতে পারেন।
Flexbox এর সাহায্যে SVG উপাদানগুলির লেআউট সাজানো
<div class="flex-container">
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="80" height="80" stroke="black" stroke-width="3" fill="blue" />
</svg>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="green" />
</svg>
</div>
<style>
.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
</style>
এখানে:
display: flexব্যবহার করে flex container তৈরি করা হয়েছে, যা তার শিশু উপাদানগুলিকে এক লাইনে সাজায়।justify-content: space-between: উপাদানগুলিকে আড়াআড়ি ভাবে সমানভাবে বিতরণ করবে।align-items: center: উপাদানগুলিকে উল্লম্বভাবে সেন্টার করবে।
ফলস্বরূপ, তিনটি এসভিজি উপাদান একটি লাইন বরাবর সঠিকভাবে সজ্জিত হবে এবং তাদের মধ্যে সমান গ্যাপ থাকবে।
2. CSS Grid দিয়ে SVG Layout Management
CSS Grid আরও শক্তিশালী এবং বহুমুখী লেআউট সিস্টেম, যা আপনাকে একাধিক কলাম এবং সারিতে উপাদানগুলো সাজানোর সুযোগ দেয়। এটি এসভিজি উপাদানগুলির জন্য একাধিক স্থানে সঠিকভাবে স্থান প্রদান করতে সক্ষম।
CSS Grid এর সাহায্যে SVG উপাদানগুলির লেআউট সাজানো
<div class="grid-container">
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="80" height="80" stroke="black" stroke-width="3" fill="blue" />
</svg>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="green" />
</svg>
</div>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
grid-gap: 20px; /* Space between grid items */
}
</style>
এখানে:
display: gridব্যবহার করে গ্রিড কন্টেইনার তৈরি করা হয়েছে।grid-template-columns: repeat(3, 1fr): এটি তিনটি সমান কলাম তৈরি করবে।grid-gap: 20px: গ্রিড আইটেমগুলির মধ্যে ২০ পিক্সেল গ্যাপ রাখবে।
ফলস্বরূপ, এসভিজি উপাদানগুলির একটি গ্রিড লেআউট তৈরি হবে, যেখানে তিনটি কলামে সমান স্থান বরাদ্দ থাকবে।
3. Responsive SVG Layouts Using Flexbox and Grid
CSS Flexbox এবং Grid উভয়ই রেসপন্সিভ ডিজাইনে সাহায্য করে। এসভিজি উপাদানগুলিকে বিভিন্ন স্ক্রীন সাইজে উপযুক্তভাবে প্রদর্শন করতে media queries ব্যবহার করে রেসপন্সিভ আচরণ তৈরি করা যেতে পারে।
Responsive Layout Using Flexbox
<div class="responsive-flex">
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="orange" />
</svg>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="80" height="80" stroke="black" stroke-width="3" fill="purple" />
</svg>
</div>
<style>
.responsive-flex {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.responsive-flex svg {
flex: 1 1 45%; /* Each svg takes 45% of the available width */
margin: 10px;
}
@media (max-width: 768px) {
.responsive-flex svg {
flex: 1 1 100%; /* For smaller screens, each svg takes full width */
}
}
</style>
এখানে:
flex-wrap: wrapব্যবহার করে ফ্লেক্স কন্টেইনারের আইটেমগুলো লাইনের নিচে চলে আসবে যদি সেগুলি এক লাইনে সাইজ না হয়।flex: 1 1 45%: এসভিজি আইটেমগুলিকে 45% প্রস্থ দেওয়া হয়েছে, যা বড় স্ক্রীনে দুটি করে উপাদান এক লাইনে প্রদর্শিত হবে।@mediaকুয়েরি ব্যবহার করে ছোট স্ক্রীনে এসভিজি উপাদানগুলি পুরোপুরি 100% প্রস্থে প্রদর্শিত হবে।
4. Responsive SVG Layout Using Grid
<div class="responsive-grid">
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="pink" />
</svg>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="80" height="80" stroke="black" stroke-width="3" fill="cyan" />
</svg>
</div>
<style>
.responsive-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
@media (max-width: 768px) {
.responsive-grid {
grid-template-columns: repeat(2, 1fr); /* 2 columns on smaller screens */
}
}
@media (max-width: 480px) {
.responsive-grid {
grid-template-columns: 1fr; /* 1 column on very small screens */
}
}
</style>
এখানে:
grid-template-columns: repeat(3, 1fr)বড় স্ক্রীনে তিনটি কলাম তৈরি করবে।@mediaকুয়েরি ব্যবহার করে স্ক্রীন সাইজের উপর ভিত্তি করে গ্রিডের কলাম সংখ্যা পরিবর্তন করা হয়েছে। ছোট স্ক্রীনে দুটি এবং খুব ছোট স্ক্রীনে একক কলাম প্রদর্শিত হবে।
সারাংশ
CSS Flexbox এবং CSS Grid এসভিজি লেআউট ম্যানেজমেন্টে খুবই কার্যকরী টুলস। Flexbox উপাদানগুলিকে একলাইনে বা কলামে ফ্লেক্সিবলি সাজাতে সাহায্য করে, যেখানে Grid উপাদানগুলিকে একটি নির্দিষ্ট গ্রিড সিস্টেমে সাজায়। এই দুই পদ্ধতির সাহায্যে আপনি এসভিজি উপাদানগুলিকে রেসপন্সিভভাবে ডিজাইন করতে পারেন, যা ওয়েব পেজের উপাদানগুলির মধ্যে একটি পরিষ্কার এবং সুন্দর লেআউট তৈরি করে।
Read more
