Filters এর মাধ্যমে Image Effects তৈরি করা

এসভিজি (SVG) ফরম্যাটে Custom Filters এবং Filter Effects ব্যবহার করে আপনি গ্রাফিক্সের মধ্যে ভিজ্যুয়াল ইফেক্টস যোগ করতে পারেন, যা ডিজাইনকে আরও আকর্ষণীয় এবং ইন্টারেক্টিভ করে তোলে। এসভিজি ফিল্টারগুলি বিভিন্ন ধরনের ইফেক্ট তৈরি করতে ব্যবহৃত হয় যেমন ব্লার (blur), ব্রাইটনেস (brightness), কনট্রাস্ট (contrast), শ্যাডো (shadow), গ্রেডিয়েন্ট এবং আরও অনেক কিছু।

এই ফিল্টারগুলো <filter> ট্যাগের মাধ্যমে এসভিজি গ্রাফিক্সে প্রয়োগ করা হয় এবং আপনি এগুলির সাথে কাস্টমাইজড ইফেক্টস তৈরি করতে পারেন।

এসভিজি ফিল্টার কাজের প্রক্রিয়া

এসভিজি ফিল্টার ব্যবহার করার জন্য, আপনি <filter> ট্যাগের মাধ্যমে একটি ফিল্টার তৈরি করবেন এবং তারপরে সেই ফিল্টারটি গ্রাফিক্স উপাদান (যেমন <circle>, <rect>, <path>, ইত্যাদি) এ প্রয়োগ করবেন।

Custom Filters

এসভিজি ফিল্টারগুলি সাধারণত <filter> ট্যাগের মাধ্যমে তৈরি হয় এবং এতে <feGaussianBlur>, <feColorMatrix>, <feOffset>, <feBlend> ইত্যাদি উপাদান থাকে যা বিভিন্ন ধরনের ইফেক্ট তৈরি করে।

Custom Filter এর উদাহরণ: ব্লার ইফেক্ট

<feGaussianBlur> এলিমেন্টটি একটি ব্লার ইফেক্ট তৈরি করতে ব্যবহৃত হয়। এটি সাধারণত ওয়েব ডিজাইন এবং গ্রাফিক্সে সুন্দর এবং মসৃণ প্রভাব তৈরি করতে ব্যবহৃত হয়।

উদাহরণ:

<svg width="400" 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="green" filter="url(#blurEffect)" />
</svg>

ব্যাখ্যা:

• <defs>: এটি ফিল্টার ডেফিনিশনের জন্য ব্যবহৃত হয়।
• <filter id="blurEffect">: এখানে একটি ফিল্টার তৈরি করা হয়েছে যার আইডি blurEffect।
• <feGaussianBlur>: এই উপাদানটি গ্রাফিক্সের ওপর ব্লার (blur) প্রভাব প্রয়োগ করবে।
• stdDeviation="5": এটি ব্লারের মান নির্ধারণ করে, এখানে মান ৫ সেট করা হয়েছে।

Custom Filter: Color Effects

এসভিজি ফিল্টার ব্যবহার করে আপনি গ্রাফিক্সে রঙ পরিবর্তন করতে পারেন। <feColorMatrix> উপাদানটি গ্রাফিক্সের রঙ ম্যানিপুলেট করতে ব্যবহৃত হয়, যেমন গ্রেস্কেল (grayscale), সেপিয়া (sepia), এবং অন্যান্য রঙের পরিবর্তন।

উদাহরণ:

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="colorEffect">
      <feColorMatrix in="SourceGraphic" type="matrix" values="0.5 0 0 0 0  0 0.5 0 0 0  0 0 0.5 0 0  0 0 0 1 0" />
    </filter>
  </defs>
  <circle cx="100" cy="100" r="50" fill="green" filter="url(#colorEffect)" />
</svg>

ব্যাখ্যা:

• <feColorMatrix>: এটি রঙের একটি কাস্টম মেট্রিক্স তৈরি করে যা একটি গ্রাফিক্সের রঙ পরিবর্তন করে।
• values="0.5 0 0 0 0 0 0.5 0 0 0 0 0 0.5 0 0": এখানে রঙের মান পরিবর্তন করা হয়েছে, যার ফলে ছবির রঙ সাদামাটা হয়ে যাবে।

Filter Effects: Shadow, Offset, and Blend

এসভিজি ফিল্টারের মধ্যে <feDropShadow>, <feOffset>, এবং <feBlend> এর মতো আরও অনেক ফিল্টার রয়েছে যা ইফেক্ট তৈরি করতে সাহায্য করে।

Drop Shadow Effect

<feDropShadow> উপাদানটি টেক্সট বা গ্রাফিক্সের নিচে শ্যাডো (shadow) তৈরি করে, যা ডিজাইনে একটি গভীরতা এবং এক্সটেনশন যোগ করে।

উদাহরণ:

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="shadowEffect">
      <feDropShadow dx="5" dy="5" stdDeviation="3" flood-color="black" />
    </filter>
  </defs>
  <circle cx="100" cy="100" r="50" fill="blue" filter="url(#shadowEffect)" />
</svg>

ব্যাখ্যা:

• <feDropShadow>: এটি একটি শ্যাডো তৈরি করে।
• dx="5", dy="5": এগুলি শ্যাডোর অবস্থান নির্ধারণ করে, যেখানে dx অনুভূমিক স্থানান্তর এবং dy উল্লম্ব স্থানান্তর।
• stdDeviation="3": এটি শ্যাডোর ব্লার মান নির্ধারণ করে।

Offset Effect

<feOffset> উপাদানটি গ্রাফিক্সের অবস্থান পরিবর্তন করতে ব্যবহৃত হয়, এটি মূল গ্রাফিক্সের একটি কপি তৈরি করে এবং সেটিকে একটি নির্দিষ্ট অবস্থানে স্থানান্তরিত করে।

উদাহরণ:

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="offsetEffect">
      <feOffset dx="10" dy="10" result="offset"/>
    </filter>
  </defs>
  <circle cx="100" cy="100" r="50" fill="purple" filter="url(#offsetEffect)" />
</svg>

ব্যাখ্যা:

• <feOffset>: এটি গ্রাফিক্সের একটি কপি তৈরি করে এবং তাকে কিছুটা স্থানান্তরিত করে (এখানে dx="10" এবং dy="10" এর মাধ্যমে ১০ পিক্সেল স্থানান্তর করা হয়েছে)।

Blend Effect

<feBlend> উপাদানটি দুটি বা তার বেশি গ্রাফিক্সের মধ্যে মিশ্রণ (blending) ইফেক্ট তৈরি করতে ব্যবহৃত হয়।

উদাহরণ:

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="blendEffect">
      <feBlend in="SourceGraphic" in2="backgroundImage" mode="multiply" />
    </filter>
  </defs>
  <circle cx="100" cy="100" r="50" fill="orange" filter="url(#blendEffect)" />
</svg>

ব্যাখ্যা:

• <feBlend>: এটি দুইটি গ্রাফিক্সের মধ্যে মিশ্রণ তৈরি করে। এখানে mode="multiply" ব্যবহার করা হয়েছে যা দুটি উপাদানের মধ্যে গুণফল (multiply) ইফেক্ট তৈরি করে।

সারাংশ

এসভিজি ফরম্যাটে Custom Filters এবং Filter Effects ব্যবহার করে আপনি গ্রাফিক্সে বিভিন্ন ধরনের আকর্ষণীয় ভিজ্যুয়াল ইফেক্ট তৈরি করতে পারেন। <feGaussianBlur>, <feColorMatrix>, <feDropShadow>, <feOffset>, এবং <feBlend> এর মতো উপাদানগুলি গ্রাফিক্সের ভিজ্যুয়াল আকর্ষণীয়তা বাড়ানোর জন্য অত্যন্ত কার্যকর। এগুলি ডিজাইনকে আরও ইন্টারঅ্যাকটিভ এবং ডাইনামিক করে তোলে, বিশেষ করে ওয়েব ডিজাইনে।