এসভিজি (SVG) ফরম্যাটে opacity এবং transparency এর ব্যবহার ওয়েব গ্রাফিক্সে গভীরতা এবং দৃশ্যমানতা নিয়ন্ত্রণ করতে অত্যন্ত গুরুত্বপূর্ণ। এগুলোর মাধ্যমে আপনি গ্রাফিক্সের স্বচ্ছতা বা স্বচ্ছ অংশ তৈরি করতে পারেন, যা ডিজাইনের ইফেক্ট উন্নত করতে সহায়তা করে।
Opacity এর ব্যবহার
Opacity এসভিজি উপাদানের দৃশ্যমানতা বা স্বচ্ছতা নিয়ন্ত্রণ করে। এটি একটি সংখ্যা যা 0 থেকে 1 এর মধ্যে পরিবর্তিত হয়:
0মানে সম্পূর্ণ স্বচ্ছ (অদৃশ্য)1মানে সম্পূর্ণ অস্বচ্ছ (পুরোপুরি দৃশ্যমান)
ব্যবহার:
opacityপ্রপার্টি এসভিজি উপাদানের সম্পূর্ণ স্বচ্ছতা নির্ধারণ করে, অর্থাৎ পুরো উপাদান (যেমন, আকার, লাইন, টেক্সট) কতটুকু দৃশ্যমান হবে তা নিয়ন্ত্রণ করে।
উদাহরণ:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="80" fill="blue" opacity="0.5" />
</svg>
এখানে, blue বৃত্তের স্বচ্ছতা 50% রাখা হয়েছে (opacity="0.5"), যার ফলে বৃত্তটি আংশিকভাবে স্বচ্ছ হবে এবং পেছনের অংশ দেখা যাবে।
Transparency (স্বচ্ছতা)
এসভিজি ফরম্যাটে transparency মূলত opacity এরই আরেকটি ধারণা, তবে এটি মূলত কেবল রঙ বা পূর্ণতার ক্ষেত্রে ব্যবহৃত হয়। যখন কোনো রঙের আংশিক স্বচ্ছতা প্রয়োজন হয়, তখন RGBA বা HSLA রঙ মডেল ব্যবহার করা হয়।
- RGBA: RGB এর সাথে Alpha চ্যানেল যুক্ত করা হয়, যা রঙের স্বচ্ছতা নির্ধারণ করে।
Aমানে alpha (স্বচ্ছতা), যা 0 (সম্পূর্ণ স্বচ্ছ) থেকে 1 (সম্পূর্ণ অস্বচ্ছ) পর্যন্ত হতে পারে।
উদাহরণ:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<rect x="50" y="50" width="100" height="100" fill="rgba(255, 0, 0, 0.3)" />
</svg>
এখানে, rgba(255, 0, 0, 0.3) রঙটি লাল (red) রঙের আংশিক স্বচ্ছতা (30%) দিয়ে পূর্ণ হবে, যা গ্রাফিক্সের পেছনের অংশও দৃশ্যমান করবে।
Opacity এবং Transparency একসাথে ব্যবহার করা
আপনি opacity এবং transparency এর মধ্যে পার্থক্য বুঝে একসাথে ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আপনি একটি রঙের স্বচ্ছতা নির্ধারণ করে সাথে সাথে পুরো উপাদানটির opacity পরিবর্তন করতে পারেন। এইভাবে, আপনি আরো স্বচ্ছ এবং ইন্টারঅ্যাকটিভ ডিজাইন তৈরি করতে পারেন।
উদাহরণ:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<!-- রঙের স্বচ্ছতা এবং উপাদানের পুরো opacity নির্ধারণ -->
<circle cx="100" cy="100" r="80" fill="rgba(0, 0, 255, 0.4)" opacity="0.7" />
</svg>
এখানে, blue বৃত্তটির fill এর রঙে 40% স্বচ্ছতা রয়েছে (rgba(0, 0, 255, 0.4)) এবং পুরো উপাদানটির opacity 70% (opacity="0.7")।
CSS এর মাধ্যমে Opacity নিয়ন্ত্রণ
এসভিজি উপাদানগুলোর opacity CSS এর মাধ্যমে পরিবর্তন করা যেতে পারে। এর জন্য opacity CSS প্রপার্টি ব্যবহার করা হয়, যা উপাদানের দৃশ্যমানতা নিয়ন্ত্রণ করে।
উদাহরণ:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="80" fill="green" class="semi-transparent" />
</svg>
<style>
.semi-transparent {
opacity: 0.4;
}
</style>
এখানে, .semi-transparent ক্লাসের মাধ্যমে বৃত্তের opacity 40% করা হয়েছে।
সারাংশ
- Opacity এসভিজি উপাদানের সাধারণ স্বচ্ছতা নিয়ন্ত্রণ করে। এটি 0 থেকে 1 পর্যন্ত মানে হতে পারে, যেখানে 0 মানে সম্পূর্ণ স্বচ্ছ এবং 1 মানে সম্পূর্ণ অস্বচ্ছ।
- Transparency মূলত রঙের স্বচ্ছতার ধারণা, যা RGBA বা HSLA রঙ মডেল দিয়ে নিয়ন্ত্রণ করা হয়।
A(alpha) চ্যানেলটি স্বচ্ছতা নির্ধারণ করে। - Opacity এবং Transparency একসাথে ব্যবহার করে আপনি গ্রাফিক্সের অধিকতর স্বচ্ছ এবং ইন্টারঅ্যাকটিভ ডিজাইন তৈরি করতে পারেন।
এসভিজি তে opacity এবং transparency এর ব্যবহার আপনাকে আপনার ডিজাইনকে আরও সৃষ্টিশীল এবং দক্ষভাবে কাস্টমাইজ করার সুযোগ দেয়।
Read more
