এসভিজি (SVG) ফাইলের মাধ্যমে গ্রাফিক্স ডিজাইন করার সময় ফিল্টারগুলি ব্যবহার করা যেতে পারে, যা চিত্র বা গ্রাফিক্সে বিভিন্ন ধরনের প্রভাব বা পরিবর্তন আনতে সহায়তা করে। এসভিজি ফিল্টারগুলি গ্রাফিক্সের রং, প্রস্থ, প্রভাব, বা স্নিগ্ধতা পরিবর্তন করতে ব্যবহৃত হয়, যেমন blur, drop-shadow, এবং brightness। এই ফিল্টারগুলি গ্রাফিক্সের দিকে নতুন অনুভূতি যোগ করতে পারে এবং ওয়েব ডিজাইনের ক্ষেত্রে খুবই কার্যকরী।
1. Blur (ব্লার)
ব্লার ফিল্টার গ্রাফিক্সের মধ্যে একটি স্নিগ্ধ বা মুশকিল প্রভাব তৈরি করে, যার ফলে কোনো নির্দিষ্ট অংশ অস্পষ্ট বা ঝাপসা হয়ে যায়। এটি সাধারণত পটভূমি বা ছবি নিস্তেজ করতে ব্যবহৃত হয়।
Blur ফিল্টার ব্যবহারের সিনট্যাক্স:
<filter id="blur-filter">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
feGaussianBlur: এই কম্পোনেন্টটি গ্রাফিক্সের উপর গৌসিয়ান ব্লার প্রয়োগ করে।stdDeviation: এটি ব্লারের তীব্রতা নির্ধারণ করে। বড় মান গ্রাফিক্সকে আরও বেশি ঝাপসা করে।
উদাহরণ:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur-filter">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
</defs>
<circle cx="100" cy="100" r="50" fill="blue" filter="url(#blur-filter)" />
</svg>
এখানে, একটি বৃত্তের উপর ব্লার ফিল্টার প্রয়োগ করা হয়েছে, যার ফলে বৃত্তটি কিছুটা ঝাপসা হবে।
2. Drop-shadow (ড্রপ-শ্যাডো)
ড্রপ-শ্যাডো ফিল্টার গ্রাফিক্সের পেছনে একটি ছায়া তৈরি করে, যা গ্রাফিক্সকে আড়াল করা এবং আরও থ্রিডি প্রভাব দেয়। এটি ওয়েব ডিজাইনে খুবই জনপ্রিয়, বিশেষত টেক্সট এবং আইকনগুলোর জন্য।
Drop-shadow ফিল্টার ব্যবহারের সিনট্যাক্স:
<filter id="drop-shadow-filter">
<feDropShadow dx="5" dy="5" stdDeviation="3" />
</filter>
dxএবংdy: এগুলি ছায়ার অবস্থান নির্ধারণ করে (X এবং Y অক্ষরে কতটা স্থানান্তর হবে)।stdDeviation: এটি ছায়ার মৃদ্ধতা বা ব্লার নির্ধারণ করে।
উদাহরণ:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="drop-shadow-filter">
<feDropShadow dx="10" dy="10" stdDeviation="5" />
</filter>
</defs>
<circle cx="100" cy="100" r="50" fill="red" filter="url(#drop-shadow-filter)" />
</svg>
এখানে, একটি বৃত্তের নিচে একটি ছায়া তৈরি হয়েছে, যার ফলে এটি আরও স্পষ্টভাবে দৃশ্যমান হয়।
3. Brightness (ব্রাইটনেস)
ব্রাইটনেস ফিল্টার গ্রাফিক্সের উজ্জ্বলতা বা ঝলকানি নিয়ন্ত্রণ করতে ব্যবহৃত হয়। এটি গ্রাফিক্সের রংগুলিকে আরও উজ্জ্বল বা গা dark ় করে তুলতে সাহায্য করে।
Brightness ফিল্টার ব্যবহারের সিনট্যাক্স:
<filter id="brightness-filter">
<feComponentTransfer>
<feFuncR type="table" tableValues="0 1" />
<feFuncG type="table" tableValues="0 1" />
<feFuncB type="table" tableValues="0 1" />
</feComponentTransfer>
</filter>
feComponentTransfer: এটি আলাদা আলাদা রঙের মান (রেড, গ্রীন, ব্লু) কন্ট্রোল করে।feFuncR,feFuncG,feFuncB: এগুলি রঙের জন্য আলাদা আলাদা ম্যানিপুলেশন নির্ধারণ করে।tableValues: এর মাধ্যমে উজ্জ্বলতা বা গা dark ় পণ্যের জন্য মান নির্ধারণ করা হয়। 0 মানে গা dark ় এবং 1 মানে উজ্জ্বল।
উদাহরণ:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="brightness-filter">
<feComponentTransfer>
<feFuncR type="table" tableValues="0 1" />
<feFuncG type="table" tableValues="0 1" />
<feFuncB type="table" tableValues="0 1" />
</feComponentTransfer>
</filter>
</defs>
<circle cx="100" cy="100" r="50" fill="green" filter="url(#brightness-filter)" />
</svg>
এখানে, একটি বৃত্তের উজ্জ্বলতা বাড়ানো হয়েছে, যা সবুজ বর্ণের আরও উজ্জ্বল করে তুলেছে।
4. Combine Filters (একাধিক ফিল্টার একত্রিত করা)
এসভিজি ফিল্টারগুলিকে একত্রিত করা সম্ভব। একাধিক ফিল্টার একসাথে ব্যবহার করে আপনি আরও জটিল প্রভাব তৈরি করতে পারেন।
উদাহরণ:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="combined-filter">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
<feDropShadow dx="10" dy="10" stdDeviation="5" />
</filter>
</defs>
<circle cx="100" cy="100" r="50" fill="orange" filter="url(#combined-filter)" />
</svg>
এখানে, একটি বৃত্তের উপর প্রথমে ব্লার এবং তারপর ড্রপ-শ্যাডো প্রভাব প্রয়োগ করা হয়েছে।
সারাংশ
এসভিজি ফিল্টারগুলি গ্রাফিক্সে বিভিন্ন ধরনের প্রভাব তৈরি করতে ব্যবহৃত হয়, যেমন blur, drop-shadow, এবং brightness। এগুলি গ্রাফিক্সের রং, প্রস্থ, স্নিগ্ধতা, অথবা ছায়া পরিবর্তন করতে ব্যবহৃত হয়। এসভিজি ফিল্টারগুলির মাধ্যমে খুব সহজেই আকর্ষণীয় ও ইন্টারঅ্যাকটিভ গ্রাফিক্স ডিজাইন করা যায়, যা ওয়েব ডিজাইনে এবং ইউজার ইন্টারফেসে কার্যকরী।
Read more
