এসভিজি (SVG) ফরম্যাটে ফিল্টার এবং এফেক্টস ব্যবহার করার মাধ্যমে গ্রাফিক্সের দৃশ্যমানতা ও স্টাইলকে আরও আকর্ষণীয় ও ইন্টারঅ্যাকটিভ করা যায়। এসভিজি ফিল্টারগুলি মূলত চিত্রের উপর বিভিন্ন ধরণের ভিজ্যুয়াল ইফেক্ট প্রয়োগ করতে ব্যবহৃত হয়, যেমন ব্লার, শ্যাডো, গ্রেডিয়েন্ট, উজ্জ্বলতা এবং কনট্রাস্ট পরিবর্তন ইত্যাদি। এই ফিল্টারগুলি এসভিজি উপাদানের মধ্যে একত্রিত করা যায় এবং CSS বা JavaScript দ্বারা কন্ট্রোল করা যেতে পারে।
1. এসভিজি ফিল্টার (SVG Filters)
এসভিজি ফিল্টারগুলোর মাধ্যমে আপনি গ্রাফিক্স বা চিত্রের উপাদানগুলির উপর বিভিন্ন প্রভাব (effects) প্রয়োগ করতে পারেন। এসভিজি ফিল্টারগুলি সাধারণত <filter> ট্যাগের মাধ্যমে ব্যবহার করা হয়, যার মধ্যে বিভিন্ন ফিল্টারের প্রকার থাকতে পারে। এই ফিল্টারগুলিকে <fe> এলিমেন্ট দ্বারা নির্দিষ্ট করা হয়।
উদাহরণ:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blurEffect">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
</defs>
<circle cx="100" cy="100" r="50" fill="red" filter="url(#blurEffect)" />
</svg>
ব্যাখ্যা:
<filter>ট্যাগের মধ্যেid="blurEffect"ফিল্টার তৈরি করা হয়েছে।<feGaussianBlur>এলিমেন্টের মাধ্যমে ব্লার (blur) প্রভাব প্রয়োগ করা হয়েছে।stdDeviation="5"এর মাধ্যমে ব্লারের পরিমাণ নির্ধারণ করা হয়েছে।filter="url(#blurEffect)"এর মাধ্যমে ফিল্টারটি<circle>উপাদানে প্রয়োগ করা হয়েছে।
2. কমন এসভিজি ফিল্টার প্রকার
এসভিজি ফিল্টারের মাধ্যমে বিভিন্ন ধরনের ভিজ্যুয়াল ইফেক্ট তৈরি করা যায়। এর মধ্যে কিছু সাধারণ ফিল্টার প্রকার:
Gaussian Blur
- ব্লার প্রভাব সৃষ্টি করে যা চিত্রের সীমানা মলিন বা মসৃণ করে।
<feGaussianBlur in="SourceGraphic" stdDeviation="10" />
Drop Shadow
- এই ফিল্টারটি একটি বস্তুর নীচে ছায়া তৈরি করে, যা 3D প্রভাব সৃষ্টি করতে সহায়ক।
<filter id="f1" x="0" y="0" width="150%" height="150%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blurred" />
<feOffset in="blurred" dx="5" dy="5" result="offsetblur" />
<feFlood flood-color="black" result="color" />
<feComposite in2="offsetblur" operator="in" result="shadow" />
<feComposite in2="SourceAlpha" operator="in" result="final" />
<feComposite in2="SourceAlpha" operator="over" />
</filter>
Brightness/Contrast
- চিত্রের উজ্জ্বলতা এবং কনট্রাস্ট পরিবর্তন করতে ব্যবহৃত হয়।
<feComponentTransfer>
<feFuncR type="table" tableValues="0 1" />
<feFuncG type="table" tableValues="0 1" />
<feFuncB type="table" tableValues="0 1" />
</feComponentTransfer>
Color Matrix
- চিত্রের রঙ পরিবর্তন বা ম্যানিপুলেশন করার জন্য ব্যবহার করা হয়।
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" />
3. এসভিজি এফেক্টস (SVG Effects)
এসভিজি এফেক্টস দ্বারা আপনি চিত্রের উপর নানা ধরনের ইন্টারঅ্যাকটিভ এফেক্ট বা স্টাইলিং প্রয়োগ করতে পারেন। এসভিজি ফিল্টারগুলোর সাথে CSS বা JavaScript ব্যবহার করে ডায়নামিক এফেক্টস তৈরি করা সম্ভব।
CSS দিয়ে ফিল্টার ব্যবহার:
CSS ফিল্টার ব্যবহার করে এসভিজি উপাদানে বিভিন্ন প্রভাব যেমন ব্লার, গ্রে স্কেল, উজ্জ্বলতা ইত্যাদি প্রয়োগ করা যায়।
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="50" fill="blue" style="filter: blur(5px);" />
</svg>
এখানে, CSS ফিল্টার blur(5px) প্রয়োগ করা হয়েছে, যা সিলিন্ডারের উপর ব্লার প্রভাব সৃষ্টি করবে।
JavaScript দিয়ে ফিল্টার কন্ট্রোল:
JavaScript ব্যবহার করে আপনি ফিল্টারগুলির মান পরিবর্তন করতে পারেন, যেমন ব্লারের পরিমাণ বা রঙের কনট্রাস্ট পরিবর্তন করা। এটি ব্যবহারকারীর ইন্টারঅ্যাকশন বা অন্য ইভেন্টের মাধ্যমে ডায়নামিক পরিবর্তন করতে সহায়ক।
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" id="mySVG">
<circle cx="100" cy="100" r="50" fill="green" id="circleElement" />
</svg>
<script>
document.getElementById("circleElement").setAttribute("style", "filter: blur(10px);");
</script>
এখানে, JavaScript কোডের মাধ্যমে সিলিন্ডারের উপর ব্লার প্রভাব ডায়নামিকভাবে পরিবর্তন করা হয়েছে।
4. ফিল্টার ও এফেক্টস-এর মধ্যে পার্থক্য
- ফিল্টার: এসভিজি ফিল্টারগুলি মূলত স্থির এবং চিত্রের উপাদানের উপর বিশেষ প্রভাব প্রয়োগ করে। এগুলি সাধারণত
<filter>ট্যাগের মাধ্যমে ব্যবহৃত হয় এবং এগুলির মাধ্যমে গ্রাফিক্সের গুণগত মান বা দৃশ্যমানতা পরিবর্তিত হয়। - এফেক্টস: এসভিজি এফেক্টস সাধারণত CSS এবং JavaScript এর মাধ্যমে নিয়ন্ত্রিত হয়, যা ডায়নামিক এবং ইন্টারঅ্যাকটিভ হতে পারে। এগুলি সাধারণত ওয়েব পেজের রেসপন্সিভ এবং ইন্টারঅ্যাকটিভ ডিজাইনের জন্য ব্যবহৃত হয়।
সারাংশ
এসভিজি ফিল্টার এবং এফেক্টস গ্রাফিক্সের উপর বিভিন্ন প্রভাব প্রয়োগ করতে সহায়তা করে, যেমন ব্লার, শ্যাডো, রঙ পরিবর্তন, কনট্রাস্ট পরিবর্তন ইত্যাদি। এই ফিল্টারগুলি চিত্রের গুণগত মান উন্নত করতে ব্যবহৃত হয় এবং ওয়েব ডিজাইন ও ইন্টারঅ্যাকটিভ এফেক্টস তৈরি করতে ব্যবহৃত হয়। CSS এবং JavaScript এর সাহায্যে ফিল্টার এবং এফেক্টস আরও ডায়নামিক এবং ইন্টারঅ্যাকটিভ করা যায়।
Read more
