SVG এর সাথে CSS Styles এবং Classes এর ব্যবহার

এসভিজি (SVG) ফাইলগুলি একটি XML ভিত্তিক গ্রাফিক্স ফরম্যাট, যা ভেক্টর গ্রাফিক্স এবং ওয়েব ডিজাইনে ব্যবহৃত হয়। এসভিজি উপাদানগুলিকে CSS স্টাইলস এবং CSS ক্লাস এর মাধ্যমে স্টাইলিং করা যায়, যাতে আপনি তাদের রঙ, আকার, স্ট্রোক, শ্যাডো, এবং অন্যান্য বৈশিষ্ট্য কাস্টমাইজ করতে পারেন। এই প্রক্রিয়াটি এসভিজি উপাদানগুলিকে আরো সুন্দর এবং ইন্টারঅ্যাকটিভ করে তোলে।

এখানে, আমরা এসভিজি ফাইলের সাথে CSS স্টাইলিং এবং ক্লাস ব্যবহারের কিছু পদ্ধতি দেখব।

১. এসভিজি এলিমেন্টে CSS স্টাইলিং

আপনি সরাসরি এসভিজি উপাদানগুলির মধ্যে style অ্যাট্রিবিউট ব্যবহার করে CSS স্টাইল প্রয়োগ করতে পারেন। তবে, সাধারণত এটি ভালোভাবে কাস্টমাইজ করার জন্য CSS ফাইল বা <style> ট্যাগ ব্যবহার করা হয়।

উদাহরণ: এসভিজি এলিমেন্টে CSS স্টাইলিং

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="red" stroke="black" stroke-width="4"/>
</svg>

এখানে, বৃত্তের রঙ, স্ট্রোক এবং স্ট্রোকের প্রস্থ সরাসরি এসভিজি উপাদানে fill, stroke, এবং stroke-width অ্যাট্রিবিউট দ্বারা কন্ট্রোল করা হয়েছে।

২. CSS ফাইল দিয়ে এসভিজি স্টাইলিং

এসভিজি উপাদানগুলির স্টাইল CSS ফাইল ব্যবহার করেও পরিবর্তন করা যেতে পারে। আপনি CSS সিলেক্টর দিয়ে এসভিজি উপাদানগুলির স্টাইল কাস্টমাইজ করতে পারেন।

উদাহরণ: CSS ফাইল দিয়ে এসভিজি স্টাইলিং

<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <circle id="myCircle" cx="100" cy="100" r="50" />
</svg>

<style>
  #myCircle {
    fill: green;
    stroke: black;
    stroke-width: 5;
  }
</style>

এখানে, CSS সিলেক্টর #myCircle ব্যবহার করে বৃত্তটির রঙ, স্ট্রোক, এবং স্ট্রোকের প্রস্থ পরিবর্তন করা হয়েছে।

৩. এসভিজি এ ক্লাস এবং CSS ক্লাসের ব্যবহার

আপনি CSS ক্লাস ব্যবহার করে একাধিক এসভিজি উপাদানকে একই ধরনের স্টাইল প্রয়োগ করতে পারেন। এসভিজি উপাদানগুলিতে class অ্যাট্রিবিউট যোগ করে আপনি সহজেই বিভিন্ন গ্রাফিক্সের স্টাইল কাস্টমাইজ করতে পারবেন।

উদাহরণ: এসভিজি এ ক্লাস ব্যবহার

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <circle class="circle-style" cx="100" cy="100" r="50"/>
  <rect class="rect-style" x="50" y="50" width="100" height="100"/>
</svg>

<style>
  .circle-style {
    fill: blue;
    stroke: black;
    stroke-width: 4;
  }

  .rect-style {
    fill: yellow;
    stroke: green;
    stroke-width: 3;
  }
</style>

এখানে, দুটি এসভিজি উপাদান—একটি বৃত্ত এবং একটি আয়তক্ষেত্র—CSS ক্লাস ব্যবহার করে পৃথকভাবে স্টাইল করা হয়েছে।

৪. CSS Hover Effects এবং SVG

CSS :hover পসুডোক্লাস ব্যবহার করে আপনি এসভিজি উপাদানগুলির উপর হোভার ইফেক্টও প্রয়োগ করতে পারেন। এটি ব্যবহারকারীর ইন্টারঅ্যাকশনের জন্য ইন্টারঅ্যাকটিভিটি যোগ করতে সাহায্য করে।

উদাহরণ: CSS Hover Effect on SVG

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <circle class="hover-circle" cx="100" cy="100" r="50"/>
</svg>

<style>
  .hover-circle {
    fill: orange;
    stroke: black;
    stroke-width: 4;
    transition: fill 0.3s ease; /* Smooth transition for color change */
  }

  .hover-circle:hover {
    fill: red; /* Change the fill color to red on hover */
  }
</style>

এখানে, বৃত্তটির রঙ হোভার করলে লাল হয়ে যাবে এবং এই পরিবর্তনটি মসৃণভাবে হবে কারণ transition প্রপার্টি ব্যবহার করা হয়েছে।

৫. CSS Animation এবং SVG

আপনি CSS অ্যানিমেশন ব্যবহার করে এসভিজি উপাদানগুলিতে চলমান বা মসৃণ পরিবর্তন তৈরি করতে পারেন। এর মাধ্যমে গ্রাফিক্সে অ্যানিমেশন এবং পরিবর্তন আনা যায়।

উদাহরণ: CSS Animation on SVG

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <circle class="animate-circle" cx="100" cy="100" r="50"/>
</svg>

<style>
  .animate-circle {
    fill: blue;
    stroke: black;
    stroke-width: 4;
    animation: changeColor 3s infinite alternate; /* Animation for color change */
  }

  @keyframes changeColor {
    0% {
      fill: blue;
    }
    50% {
      fill: green;
    }
    100% {
      fill: purple;
    }
  }
</style>

এখানে, বৃত্তটির রঙ অ্যানিমেশন এর মাধ্যমে নীল থেকে সবুজ এবং তারপর বেগুনি হবে। অ্যানিমেশনটি প্রতি 3 সেকেন্ড পরপর পুনরাবৃত্তি হবে।

৬. Inline CSS vs External CSS for SVG

• Inline CSS: যখন আপনি এসভিজি উপাদানের মধ্যে সরাসরি style অ্যাট্রিবিউট ব্যবহার করেন, তখন এটি inline CSS হিসেবে গণ্য হয়। এটি সাধারণত একক বা ছোট এসভিজি উপাদানগুলির জন্য উপযুক্ত।
• External CSS: এসভিজি উপাদানগুলি যখন ওয়েব পেজের বাইরে থাকা সিএসএস ফাইল দ্বারা স্টাইল করা হয়, তখন এটি external CSS হিসেবে গণ্য হয়। এটি বড় এবং জটিল প্রকল্পে সুবিধাজনক, কারণ এতে কোড পুনঃব্যবহারযোগ্য এবং সেন্ট্রালাইজড থাকে।

Inline CSS Example:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <circle cx="100" cy="100" r="50" style="fill:orange;stroke:black;stroke-width:4"/>
</svg>

External CSS Example:

<svg xmlns="http://www.w3.org/2000/svg" class="circle">
  <circle cx="100" cy="100" r="50"/>
</svg>

<style>
  .circle {
    fill: orange;
    stroke: black;
    stroke-width: 4;
  }
</style>

সারাংশ

এসভিজি (SVG) এর সাথে CSS স্টাইলস এবং CSS ক্লাস এর ব্যবহার ওয়েব পেজে ভেক্টর গ্রাফিক্সকে কাস্টমাইজ এবং স্টাইল করার জন্য অত্যন্ত কার্যকরী। আপনি CSS এর মাধ্যমে এসভিজি উপাদানগুলির রঙ, আকার, স্ট্রোক, শ্যাডো, এবং অন্যান্য স্টাইলিং নিয়ন্ত্রণ করতে পারেন। CSS hover, animation, এবং transition প্রপার্টি ব্যবহার করে আপনি এসভিজি উপাদানগুলিতে ইন্টারঅ্যাকটিভিটি এবং অ্যানিমেশন যোগ করতে পারেন।