Advance HTML শিখুন বাংলায় (পর্ব ৩) — SVG দিয়ে ভেক্টর গ্রাফিক্স শিখুন

আগের পর্বে আমরা Canvas দিয়ে আঁকাআঁকি শিখেছিলাম। এই পর্বে আমরা দেখব ছবি আঁকার আরেকটা উপায় — SVG (Scalable Vector Graphics)। Canvas আর SVG দুটোই গ্রাফিক্স তৈরি করে, কিন্তু কাজ করার পদ্ধতি একদম আলাদা।

SVG কী?

SVG হলো XML-ভিত্তিক একটা ভাষা যা দিয়ে ভেক্টর গ্রাফিক্স বানানো হয়। Canvas-এ যেখানে প্রতিটা পিক্সেল আঁকা হয় (raster), SVG-তে শেপগুলো গাণিতিক হিসেবে সংজ্ঞায়িত হয় — তাই যতই জুম করো, ছবি ঝাপসা হয় না। এই কারণে লোগো, আইকন, চার্টের জন্য SVG আদর্শ।

বৈশিষ্ট্য	SVG	Canvas
ধরন	ভেক্টর (গাণিতিক)	রাস্টার (পিক্সেল)
জুম করলে	ঝাপসা হয় না	ঝাপসা হয়ে যায়
DOM এলিমেন্ট	প্রতিটা শেপ আলাদা DOM এলিমেন্ট, CSS দিয়ে স্টাইল করা যায়	একটাই এলিমেন্ট, ভেতরের শেপ DOM-এ থাকে না
উপযুক্ত ব্যবহার	লোগো, আইকন, চার্ট, সহজ অ্যানিমেশন	গেম, ছবি এডিটিং, প্রচুর অবজেক্ট

বেসিক শেপ আঁকা

SVG-তে শেপ আঁকতে হয় HTML-এর মতোই ট্যাগ দিয়ে — সরাসরি HTML ফাইলের ভেতরেই <svg> ট্যাগ বসানো যায়।

<svg width="300" height="200">
  <!-- আয়তক্ষেত্র -->
  <rect x="10" y="10" width="100" height="60" fill="#2563eb" />

  <!-- বৃত্ত -->
  <circle cx="200" cy="50" r="40" fill="#16a34a" />

  <!-- রেখা -->
  <line x1="10" y1="150" x2="280" y2="150" stroke="#000" stroke-width="3" />

  <!-- ত্রিভুজ (polygon দিয়ে) -->
  <polygon points="150,100 180,160 120,160" fill="#f97316" />

  <!-- টেক্সট -->
  <text x="10" y="190" font-size="16" fill="#000">হ্যালো SVG</text>
</svg>

ট্যাগ	কাজ
`<rect>`	আয়তক্ষেত্র (x, y, width, height)
`<circle>`	বৃত্ত (cx, cy, r)
`<line>`	সরলরেখা (x1, y1, x2, y2)
`<polygon>`	বহুভুজ (points দিয়ে বিন্দুগুলো)
`<path>`	যেকোনো জটিল শেপ (d অ্যাট্রিবিউট দিয়ে)
`<text>`	টেক্সট লেখা

CSS দিয়ে SVG স্টাইল করা

SVG-র সবচেয়ে বড় সুবিধা — প্রতিটা শেপ একটা DOM এলিমেন্ট, তাই সরাসরি CSS দিয়ে স্টাইল আর হোভার ইফেক্ট দেওয়া যায়, যেটা Canvas-এ সম্ভব না।

<style>
  .myCircle {
    fill: #2563eb;
    transition: fill 0.3s;
    cursor: pointer;
  }
  .myCircle:hover {
    fill: #dc2626;
  }
</style>

<svg width="150" height="150">
  <circle class="myCircle" cx="75" cy="75" r="50" />
</svg>

লাইভ ডেমো — হোভার করে দেখো

নিচের শেপগুলোর উপর মাউস নিয়ে যাও — CSS দিয়ে স্টাইল পাল্টাচ্ছে।

প্রতিটা শেপে হোভার করলে রঙ আর আকার বদলাবে

path — সবচেয়ে শক্তিশালী ট্যাগ

<path> দিয়ে যেকোনো জটিল শেপ আঁকা যায় — এমনকি আইকনও। d অ্যাট্রিবিউটে কিছু কমান্ড থাকে:

কমান্ড	মানে
`M x,y`	এই বিন্দুতে কলম নামানো (Move to)
`L x,y`	এই বিন্দু পর্যন্ত সরলরেখা টানা (Line to)
`C ...`	বাঁকা রেখা (Curve)
`Z`	শুরুর বিন্দুতে ফিরে গিয়ে বন্ধ করা (Close)

<!-- একটা তারা (star) shape -->
<svg width="100" height="100">
  <path d="M50,5 L61,35 L95,35 L68,55 L79,90 L50,70 L21,90 L32,55 L5,35 L39,35 Z" fill="#facc15" />
</svg>

SVG অ্যানিমেশন

CSS @keyframes ব্যবহার করে SVG শেপকে সহজে অ্যানিমেট করা যায়:

<style>
  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  .spinner {
    animation: spin 2s linear infinite;
    transform-origin: center;
  }
</style>

<svg width="100" height="100">
  <rect class="spinner" x="40" y="10" width="20" height="20" fill="#2563eb" />
</svg>

একটা সম্পূর্ণ উদাহরণ — SVG আইকন বাটন

চলো একটা "লাইক" বাটন বানাই যেটা ক্লিক করলে SVG হার্ট আইকনের রঙ আর আকার পাল্টাবে।

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8" />
  <title>SVG লাইক বাটন</title>
  <style>
    #heartIcon {
      cursor: pointer;
      fill: #d1d5db;
      transition: fill 0.3s, transform 0.2s;
    }
    #heartIcon.liked {
      fill: #ef4444;
      transform: scale(1.2);
    }
  </style>
</head>
<body>
  <svg height="40" id="heartIcon" viewbox="0 0 24 24" width="40">
    <path d="M12,21.35l-1.45-1.32C5.4,15.36,2,12.28,2,8.5 C2,5.42,4.42,3,7.5,3c1.74,0,3.41,0.81,4.5,2.09 C13.09,3.81,14.76,3,16.5,3C19.58,3,22,5.42,22,8.5 c0,3.78-3.4,6.86-8.55,11.54L12,21.35z" />
  </svg>

  <script>
    const heart = document.getElementById("heartIcon");
    heart.addEventListener("click", () => {
      heart.classList.toggle("liked");
    });
  </script>
</body>
</html>

এখানে হার্টের শেপটা একটা path দিয়ে আঁকা, আর ক্লিক করলে শুধু একটা CSS ক্লাস টগল করেই রঙ-আকার পাল্টে যাচ্ছে — কোনো নতুন করে আঁকার দরকার নেই।

নিজে চেষ্টা করো

Exercise:

একটা SVG দিয়ে সাধারণ একটা বাংলাদেশের পতাকার মতো শেপ বানাও (আয়তক্ষেত্র + বৃত্ত)।
লাইক বাটনের উদাহরণটা পরিবর্তন করে একটা কাউন্টার যোগ করো, যাতে কতবার লাইক করা হয়েছে সেটা দেখায়।
path দিয়ে একটা সাধারণ তীর (arrow) চিহ্ন আঁকার চেষ্টা করো।
উপরের স্পিনার অ্যানিমেশনটা নিয়ে একটা লোডিং ইন্ডিকেটর বানাও, যেটা একটা বাটনে ক্লিক করলে দেখা যাবে।

পরের পর্বে যা থাকছে

পরের পর্বে আমরা শিখব Accessibility — ARIA অ্যাট্রিবিউট আর সেমান্টিক মার্কআপ গভীরভাবে, যাতে ওয়েবসাইট সবার জন্য (স্ক্রিন রিডার ব্যবহারকারীসহ) ব্যবহারযোগ্য হয়।

ইলন মাস্কের সম্পদের রহস্য

আমিত্ত্ব কি কোনো স্থির সত্তা, নাকি জটিল গাণিতিক ফাংশন?

বাংলাদেশের প্রেক্ষাপটে প্যারেন্টিং ও এর সীমাবদ্ধতা

রেডিও আবিষ্কারের ইতিহাস: মার্কোনি থেকে ডিজিটাল যুগ পর্যন্ত

দারিদ্র্যের মনস্তাত্ত্বিক ফাঁদ