এসভিজি (SVG) ফরম্যাটে গ্রাফিক্সের প্রদর্শন এবং কাস্টমাইজেশন করার জন্য বেশ কিছু উন্নত (Advanced) কৌশল ব্যবহার করা যায়। এই কৌশলগুলির মধ্যে Filters, Clipping, এবং Masking অত্যন্ত শক্তিশালী টুলস যা এসভিজি গ্রাফিক্সকে আরও আকর্ষণীয়, ডায়নামিক এবং ইন্টারঅ্যাকটিভ করে তোলে। এগুলি ব্যবহার করে আপনি এসভিজি উপাদানগুলির উপর ভিজ্যুয়াল ইফেক্টস, সিলেকশন এবং শেডিং তৈরি করতে পারেন।
এখানে, আমরা এসভিজি ফিল্টার, ক্লিপিং এবং মাস্কিং এর অ্যাডভান্সড টেকনিক্যাল গাইড আলোচনা করব।
1. SVG Filters (এসভিজি ফিল্টার)
এসভিজি ফিল্টারগুলি গ্রাফিক্সের ওপর বিভিন্ন ধরনের ভিজ্যুয়াল প্রভাব প্রয়োগ করতে ব্যবহৃত হয়, যেমন ব্লার, ব্রাইটনেস, কনট্রাস্ট, এবং শ্যাডো ইত্যাদি। ফিল্টারগুলি <filter> ট্যাগের মাধ্যমে ব্যবহার করা হয় এবং বিভিন্ন ফিল্টার উপাদানগুলির মাধ্যমে এটি কার্যকর করা হয়।
Filter Components:
<feGaussianBlur>: গৌসিয়ান ব্লার প্রয়োগ করে।<feOffset>: পজিশন পরিবর্তন করে।<feComponentTransfer>: রঙের মান পরিবর্তন করে।<feDropShadow>: ছায়া তৈরি করে।
উদাহরণ: SVG Filter - Gaussian Blur
<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="blue" filter="url(#blurEffect)" />
</svg>
ব্যাখ্যা:
<filter>: এটি একটি ফিল্টার তৈরির জন্য ব্যবহৃত হয়।<feGaussianBlur>: এটি গৌসিয়ান ব্লার প্রয়োগ করে, যা গ্রাফিক্সকে কিছুটা মুশকিল বা ঝাপসা করে তোলে।stdDeviation="5": ব্লারের তীব্রতা নির্ধারণ করে।
2. Clipping (এসভিজি ক্লিপিং)
ক্লিপিং একটি টেকনিক যা দিয়ে আপনি এসভিজি উপাদানের অংশ কাটতে বা সীমাবদ্ধ করতে পারেন। ক্লিপিংকে <clipPath> ট্যাগের মাধ্যমে বাস্তবায়িত করা হয়, যা একটি উপাদানকে অন্য একটি শেপের মধ্যে ক্লিপ করে রাখে।
Clipping Path Example:
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<defs>
<clipPath id="clip-circle">
<circle cx="100" cy="100" r="50" />
</clipPath>
</defs>
<rect x="0" y="0" width="200" height="200" fill="orange" clip-path="url(#clip-circle)" />
</svg>
ব্যাখ্যা:
<clipPath>: এটি একটি ক্লিপিং এলিমেন্ট তৈরি করে যা অন্য এসভিজি উপাদানগুলির ওপর প্রয়োগ করা হয়।clip-path="url(#clip-circle)": এটি ক্লিপিং পাথ (এখানে বৃত্ত) প্রয়োগ করে এবং এর মাধ্যমে শুধুমাত্র বৃত্তের মধ্যে থাকা অংশটি দৃশ্যমান হয়।
ক্লিপিং এর ব্যবহার:
- গোলাকার প্রোফাইল ছবি: বৃত্তের মধ্যে একটি ছবি ক্লিপ করা।
- ইনফোগ্রাফিক্স: নির্দিষ্ট আকারের কাস্টম শেপে তথ্য প্রদর্শন।
3. Masking (এসভিজি মাস্কিং)
মাস্কিং একটি প্রক্রিয়া যা দিয়ে আপনি এসভিজি উপাদানগুলির উপর সিলুয়েট বা শেড তৈরি করতে পারেন। <mask> ট্যাগ ব্যবহার করে আপনি গ্রাফিক্সে মাস্ক প্রয়োগ করতে পারেন, যেখানে একটি উপাদান অন্য উপাদান দ্বারা গোপন বা মাস্ক করা হয়।
Masking Example:
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<defs>
<mask id="mask-effect" x="0" y="0" width="200" height="200">
<circle cx="100" cy="100" r="50" fill="white" />
</mask>
</defs>
<rect x="0" y="0" width="200" height="200" fill="blue" mask="url(#mask-effect)" />
</svg>
ব্যাখ্যা:
<mask>: এটি একটি মাস্ক তৈরি করে, যা অন্য উপাদানকে আড়াল বা গোপন করার জন্য ব্যবহৃত হয়।mask="url(#mask-effect)": এটি মাস্কের অ্যাপ্লিকেশন প্রয়োগ করে, যেখানে শুধুমাত্র মাস্কে থাকা সাদা অংশ দৃশ্যমান হয়।
মাস্কিং এর ব্যবহার:
- ছায়া ও হাইলাইট: সিলুয়েট বা ছায়া তৈরি করার জন্য।
- গ্রাডিয়েন্ট মাস্কিং: এক উপাদানকে আরেকটি উপাদান দ্বারা গ্রাডিয়েন্ট মাস্কিং করা, যাতে ধীরে ধীরে পরিবর্তন ঘটে।
4. Advanced SVG Effects: Combining Filters, Clipping, and Masking
এসভিজি ফিল্টার, ক্লিপিং এবং মাস্কিং ব্যবহার করে আপনি আরও জটিল এবং সৃজনশীল গ্রাফিক্স তৈরি করতে পারেন। এগুলো একত্রিত করে আপনি রিয়েল টাইম গ্রাফিক্স ইফেক্ট তৈরি করতে পারেন।
উদাহরণ: SVG Filter, Clipping, and Masking Combined
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<defs>
<filter id="blur-effect">
<feGaussianBlur in="SourceGraphic" stdDeviation="4" />
</filter>
<clipPath id="clip-shape">
<circle cx="100" cy="100" r="60" />
</clipPath>
<mask id="mask-effect" x="0" y="0" width="200" height="200">
<rect width="200" height="200" fill="black" />
<circle cx="100" cy="100" r="40" fill="white" />
</mask>
</defs>
<rect x="0" y="0" width="200" height="200" fill="yellow" filter="url(#blur-effect)" clip-path="url(#clip-shape)" mask="url(#mask-effect)" />
</svg>
ব্যাখ্যা:
<filter>: গৌসিয়ান ব্লার প্রভাব প্রয়োগ করা হয়েছে।<clipPath>: একটি বৃত্তের আকারে ক্লিপিং প্রভাব প্রয়োগ করা হয়েছে।<mask>: একটি মাস্ক প্রয়োগ করা হয়েছে যাতে শুধুমাত্র বৃত্তের মধ্যে থাকা অংশ দৃশ্যমান হয়।
এখানে, বৃত্তের মধ্যে একটি ব্লার প্রভাব প্রয়োগ করা হয়েছে, ক্লিপিং এবং মাস্কিং ব্যবহার করে সম্পূর্ণ চিত্রের একটি অংশ দেখানো হয়েছে।
সারাংশ
এসভিজি (SVG) ফাইলের মাধ্যমে ফিল্টার, ক্লিপিং, এবং মাস্কিং টেকনিক ব্যবহার করে আপনি ওয়েব পেজে ডায়নামিক এবং আকর্ষণীয় গ্রাফিক্স তৈরি করতে পারেন। ফিল্টার ব্যবহার করে আপনি বিভিন্ন ভিজ্যুয়াল প্রভাব যেমন ব্লার, ব্রাইটনেস, এবং শ্যাডো তৈরি করতে পারেন, ক্লিপিং এবং মাস্কিং ব্যবহার করে আপনি নির্দিষ্ট অংশগুলো গোপন বা সিলুয়েট তৈরি করতে পারেন। এই সব কৌশল একত্রে ব্যবহার করে আপনি ওয়েব পেজের গ্রাফিক্সকে আরও ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় করতে পারেন।
Read more
