এসভিজি (SVG) ফরম্যাটে filters ব্যবহারের মাধ্যমে আপনি ইমেজের উপর নানা ধরনের ইফেক্ট তৈরি করতে পারেন, যেমন ব্লার, ব্রাইটনেস পরিবর্তন, কনট্রাস্ট পরিবর্তন, গ্লো ইফেক্ট, শ্যাডো ইত্যাদি। ফিল্টার ব্যবহার করে গ্রাফিক্সে ডাইনামিক এবং আর্কষণীয় ইফেক্ট দেওয়া যায়, যা ডিজাইনের আরও গভীরতা এবং আকর্ষণ যোগ করে।
SVG Filters কী?
Filters হল এক ধরনের গ্রাফিক্স প্রক্রিয়া, যা এসভিজি (SVG) উপাদানগুলির উপর প্রভাব ফেলে এবং তাদের চেহারা পরিবর্তন করে। এসভিজি ফিল্টারগুলির মধ্যে প্রভাবগুলোর মধ্যে ব্লার, কনট্রাস্ট, ব্রাইটনেস, গ্রেডিয়েন্ট ম্যাপিং এবং আরও অনেক কিছু অন্তর্ভুক্ত রয়েছে।
এসভিজি ফিল্টারটি সাধারণত <defs> ট্যাগের মধ্যে সংজ্ঞায়িত করা হয় এবং পরে এই ফিল্টারটি এক বা একাধিক গ্রাফিক্স উপাদানের উপর প্রয়োগ করা হয়।
Filter তৈরির জন্য প্রাথমিক কাঠামো
ফিল্টার তৈরি করতে, প্রথমে <filter> ট্যাগ ব্যবহার করা হয়, যেখানে বিভিন্ন প্রভাবের জন্য <fe> (ফিল্টার এফেক্ট) উপাদানগুলি ব্যবহার করা হয়।
উদাহরণ:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="f1" x="0" y="0" width="150%" height="150%">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<circle cx="70" cy="70" r="50" stroke="black" stroke-width="3" fill="red" filter="url(#f1)" />
</svg>
এখানে:
<filter>ট্যাগের মাধ্যমে একটি ফিল্টার তৈরি করা হয়েছে।<feGaussianBlur>হল ফিল্টারটির একটি প্রভাব, যা একটি গাউসিয়ান ব্লার (Gaussian Blur) প্রয়োগ করবে।stdDeviation="15"এর মাধ্যমে ব্লারের শক্তি নির্ধারণ করা হয়েছে।filter="url(#f1)"ব্যবহার করে এই ফিল্টারটি একটি বৃত্তের উপর প্রয়োগ করা হয়েছে।
Common SVG Filters এবং তাদের উদাহরণ
1. Blur Filter (feGaussianBlur)
ব্লার প্রভাব ছবির সীমান্তকে মুছে ফেলে, যার ফলে একটি ঝাপসা বা অস্পষ্ট ইফেক্ট তৈরি হয়।
উদাহরণ:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur-effect" x="0" y="0" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
</defs>
<circle cx="70" cy="70" r="50" stroke="black" stroke-width="3" fill="blue" filter="url(#blur-effect)" />
</svg>
এখানে stdDeviation="5" ব্যবহার করে ব্লারের মাত্রা নির্ধারণ করা হয়েছে।
2. Brightness Filter (feComponentTransfer)
এই ফিল্টারটি একটি চিত্রের উজ্জ্বলতা বা ব্রাইটনেস পরিবর্তন করতে ব্যবহৃত হয়।
উদাহরণ:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="brightness" x="0" y="0" width="200%" height="200%">
<feComponentTransfer>
<feFuncR type="table" tableValues="0 1" />
<feFuncG type="table" tableValues="0 1" />
<feFuncB type="table" tableValues="0 1" />
</feComponentTransfer>
</filter>
</defs>
<circle cx="70" cy="70" r="50" stroke="black" stroke-width="3" fill="green" filter="url(#brightness)" />
</svg>
এখানে feComponentTransfer ট্যাগের মাধ্যমে চিত্রের উজ্জ্বলতা পরিবর্তন করা হয়েছে।
3. Drop Shadow Filter (feDropShadow)
এই ফিল্টারটি একটি ড্রপ শ্যাডো (drop shadow) ইফেক্ট যোগ করতে ব্যবহৃত হয়, যা একটি গ্রাফিক্যাল উপাদানের পিছনে একটি ছায়া তৈরি করে।
উদাহরণ:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="drop-shadow">
<feDropShadow dx="5" dy="5" stdDeviation="3" flood-color="black" />
</filter>
</defs>
<circle cx="70" cy="70" r="50" stroke="black" stroke-width="3" fill="orange" filter="url(#drop-shadow)" />
</svg>
এখানে:
dx="5"এবংdy="5"দিয়ে ছায়ার অবস্থান নির্ধারণ করা হয়েছে।stdDeviation="3"দিয়ে ছায়ার মাত্রা কন্ট্রোল করা হয়েছে।
4. Contrast Filter (feComponentTransfer)
এই ফিল্টারটি একটি চিত্রের কনট্রাস্ট পরিবর্তন করতে ব্যবহৃত হয়।
উদাহরণ:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="contrast">
<feComponentTransfer>
<feFuncR type="table" tableValues="0 1" />
<feFuncG type="table" tableValues="0 1" />
<feFuncB type="table" tableValues="0 1" />
</feComponentTransfer>
</filter>
</defs>
<circle cx="70" cy="70" r="50" stroke="black" stroke-width="3" fill="blue" filter="url(#contrast)" />
</svg>
এখানে feComponentTransfer ব্যবহার করে কনট্রাস্ট পরিবর্তন করা হয়েছে।
সারাংশ
এসভিজি ফিল্টারগুলি গ্রাফিক্সের উপর বিভিন্ন ধরনের ইফেক্ট তৈরি করার একটি শক্তিশালী মাধ্যম। Blur, Brightness, Drop Shadow, এবং Contrast ইত্যাদি ফিল্টার ব্যবহার করে আপনি ইমেজ বা গ্রাফিক্সের উপর নানা ধরনের পরিবর্তন এনে ডিজাইনে আকর্ষণীয় ইফেক্ট তৈরি করতে পারেন। এসভিজি ফিল্টারগুলি ওয়েব ডেভেলপমেন্টে সৃজনশীলতা ও ইন্টারঅ্যাকটিভিটির স্তর যোগ করতে সহায়ক।
Read more
