SVG: এটি কী, মূল ধারণা এবং ওয়েব ডেভেলপমেন্টে ব্যবহার

SVG কী?

SVG XML-ভিত্তিক একটি ভেক্টর গ্রাফিক্স ফর্ম্যাট, যা 2001 সালে W3C সুপারিশ হিসাবে প্রবর্তিত হয়। রাস্টার ফর্ম্যাটের বিপরীতে, SVG জ্যামিতিক প্রিমিটিভ — বিন্দু, রেখা, বক্ররেখা এবং বহুভুজ — এর মাধ্যমে ছবি বর্ণনা করে। একটি SVG ফাইল হল একটি সরল টেক্সট XML ডকুমেন্ট যা মানক সরঞ্জাম দিয়ে পড়া, সম্পাদনা এবং সংকুচিত করা যায়।

SVG আর্কিটেকচারে বেশ কয়েকটি মূল ধারণা অন্তর্ভুক্ত রয়েছে। viewBox প্রকৃত উপাদান মাত্রা থেকে স্বাধীন একটি ভার্চুয়াল স্থানাঙ্ক ব্যবস্থা নির্ধারণ করে। উদাহরণস্বরূপ, viewBox="0 0 100 100" একটি 100×100 বর্গাকার গ্রিড তৈরি করে, যার ভিতরে সমস্ত স্থানাঙ্ক নির্দিষ্ট থাকে। কন্টেইনারের প্রস্থ বা উচ্চতা পরিবর্তন হলে, বিষয়বস্তু আনুপাতিকভাবে স্কেল হয়।

W3C SVG 2 Specification অনুসারে, SVG-এর আধুনিক সংস্করণ গ্রেডিয়েন্ট, মাস্ক, ফিল্টার, নির্বিচারে অবস্থানে টেক্সট, JavaScript-এর মাধ্যমে ইন্টারঅ্যাকটিভিটি এবং CSS ও SMIL-এর মাধ্যমে অ্যানিমেশন সমর্থন করে। SVG DOM-এ একটি সম্পূর্ণ HTML উপাদান হিসাবে একীভূত, যা প্রতিটি গ্রাফিক্যাল প্রিমিটিভের উপর প্রোগ্রাম্যাটিক নিয়ন্ত্রণের অনুমতি দেয়।

মোবাইল ডেভেলপমেন্টে, SVG iOS-এ UIGraphicsImageRenderer-এর মাধ্যমে এবং Android-এ VectorDrawable-এর মাধ্যমেও ব্যবহৃত হয় — উভয় ফর্ম্যাট SVG-সদৃশ বিবরণকে GPU-তে হার্ডওয়্যার-ত্বরিত রাস্টারে রূপান্তর করে।

SVG ফর্ম্যাটের ইতিহাস এবং বিবর্তন

SVG 1.0 2001 সালে, SVG 1.1 2003 সালে W3C সুপারিশ হয় এবং SVG 2.0 2012 সাল থেকে উন্নয়নের অধীনে রয়েছে। SVG 2-এর প্রধান উদ্ভাবন হল গভীর CSS একীকরণ, কম্পোজিটিং এবং ব্লেন্ডিং মোডের জন্য সমর্থন, এবং HTML-তে namespace উপসর্গ ছাড়া SVG ব্যবহার করার ক্ষমতা।

যদিও SVG 2 এখনও সুপারিশের মর্যাদা অর্জন করেনি, আধুনিক ব্রাউজারগুলি ইতিমধ্যে এর বেশিরভাগ কার্যকারিতা সমর্থন করে। Chrome, Safari, Firefox এবং Edge-এ SVG 1.1-এর জন্য প্রায় সম্পূর্ণ সমর্থন এবং SVG 2-এর একটি উল্লেখযোগ্য অংশ রয়েছে।

SVG-এর মৌলিক উপাদান

SVG দ্বি-মাত্রিক গ্রাফিক্স বর্ণনা করার জন্য উপাদানগুলির একটি সেট সরবরাহ করে। প্রতিটি উপাদানের বৈশিষ্ট্য রয়েছে যা তার অবস্থান, আকার এবং চাক্ষুষ উপস্থিতি নির্ধারণ করে। বৈশিষ্ট্যগুলি xml বৈশিষ্ট্য হিসাবে বা CSS বৈশিষ্ট্যের মাধ্যমে সেট করা যেতে পারে।

• <rect> x, y, width, height, rx, ry (কোণ গোলাকার) বৈশিষ্ট্য সহ আয়তক্ষেত্র।
• <circle> cx, cy (কেন্দ্র) এবং r (ব্যাসার্ধ) বৈশিষ্ট্য সহ বৃত্ত।
• <ellipse> cx, cy, rx, ry বৈশিষ্ট্য সহ উপবৃত্ত।
• <line> x1, y1, x2, y2 বৈশিষ্ট্য সহ রেখা খণ্ড।
• <polyline> points বৈশিষ্ট্য (স্থানাঙ্ক তালিকা) সহ ভাঙা রেখা।
• <polygon> points বৈশিষ্ট্য সহ বন্ধ বহুভুজ।
• <path> d বৈশিষ্ট্য (আদেশ: M, L, C, Q, A, Z) সহ নির্বিচারে পথ।
• <text> x, y, font-size, font-family বৈশিষ্ট্য সহ টেক্সট উপাদান।

path উপাদান হল সবচেয়ে শক্তিশালী এবং নমনীয় SVG উপাদান। d বৈশিষ্ট্যে আদেশের একটি ক্রম থাকে: M (moveTo), L (lineTo), C (কিউবিক বেজিয়ার বক্ররেখা), Q (কোয়াড্রাটিক বেজিয়ার বক্ররেখা), A (চাপ), Z (পথ বন্ধ)। প্রতিটি আদেশের একটি পরম বা আপেক্ষিক রূপ রয়েছে (বড় বা ছোট হাতের অক্ষর)।

SVG <g>-এর মাধ্যমে উপাদান গ্রুপিংও সমর্থন করে। গ্রুপ ভিজ্যুয়াল বৈশিষ্ট্য (fill, stroke, transform) সমস্ত চাইল্ড উপাদানে উত্তরাধিকার সূত্রে প্রদান করে। এটি আকারের একটি সম্পূর্ণ সেটে একটি একক শৈলী প্রয়োগ করতে এবং একটি একক transform-এর মাধ্যমে তাদের অবস্থান নিয়ন্ত্রণ করতে দেয়।

SVG বনাম রাস্টার গ্রাফিক্স: ফর্ম্যাট তুলনা

SVG এবং রাস্টার ফর্ম্যাট (JPEG, PNG, WebP) এর মধ্যে প্রধান পার্থক্য হল তথ্য সংরক্ষণের পদ্ধতি। রাস্টার একটি নির্দিষ্ট আকারের গ্রিডে প্রতিটি পিক্সেলের রঙ সংরক্ষণ করে। SVG আকার পুনরুত্পাদনের জন্য গাণিতিক আদেশ সংরক্ষণ করে। এই পার্থক্য ফর্ম্যাটগুলির সমস্ত সুবিধা এবং অসুবিধা নির্ধারণ করে।

HTTP Archive, 2025 অনুসারে, 68% ওয়েবসাইট আইকনের জন্য, 34% ইলাস্ট্রেশনের জন্য এবং 22% লোগোর জন্য SVG ব্যবহার করে। গড় SVG আইকনের আকার 0.5–2 KB, যেখানে একই মানের একটি রাস্টার আইকন PNG ফর্ম্যাটে 5–20 KB।

SVG ফটোগ্রাফ এবং জটিল রাস্টার ছবির জন্য উপযুক্ত নয় — XML বিবরণের আকার সমতুল্য JPEG-কে ছাড়িয়ে যাবে। SVG-এর জন্য প্রস্তাবিত প্রয়োগ: আইকন, লোগো, ইলাস্ট্রেশন, ডায়াগ্রাম, চার্ট, রেসপন্সিভ ডিজাইন সহ ইন্টারফেস উপাদান।

কখন SVG বেছে নেবেন এবং কখন রাস্টার ফর্ম্যাট বেছে নেবেন

SVG ইন্টারফেস উপাদানগুলির জন্য সর্বোত্তম পছন্দ যা Retina ডিসপ্লে এবং ব্রাউজারের যেকোনো জুম স্তরে স্পষ্ট দেখাতে হবে। রাস্টার ফটোগ্রাফ, জটিল টেক্সচার এবং লক্ষ লক্ষ রঙের ছবির জন্য যেখানে ভেক্টর বিবরণ অত্যন্ত জটিল হবে।

হাইব্রিড পদ্ধতি — ইন্টারফেস উপাদানের জন্য SVG এবং ফটো সামগ্রীর জন্য WebP/AVIF-এর সংমিশ্রণ — গুণমান এবং পৃষ্ঠা লোড কর্মক্ষমতার মধ্যে সর্বোত্তম ভারসাম্য প্রদান করে।

ইনলাইন SVG এবং CSS স্টাইলিং

ইনলাইন SVG হল <img> বা background-image-এর মাধ্যমে আলাদা ফাইলের পরিবর্তে সরাসরি HTML ডকুমেন্টে SVG মার্কআপ এম্বেড করা। ইনলাইন SVG-এর সুবিধা হল যে SVG উপাদানগুলি DOM-এর অংশ হয়ে যায় এবং CSS-এর মাধ্যমে স্টাইল করা, JavaScript-এর মাধ্যমে নিয়ন্ত্রণ করা এবং অতিরিক্ত সার্ভার অনুরোধ ছাড়াই অ্যানিমেট করা যায়।

<img src="icon.svg"> এর বিপরীতে, যেখানে SVG শ্যাডো DOM-এ বিচ্ছিন্ন, ইনলাইন SVG প্যারেন্ট ডকুমেন্ট থেকে রঙ এবং ফন্ট উত্তরাধিকার সূত্রে পায়। এটি উদাহরণস্বরূপ, প্রতিটি অবস্থার জন্য আলাদা ফাইল লোড না করেই CSS ছদ্ম-শ্রেণী :hover-এর মাধ্যমে হোভারে আইকনের রঙ পরিবর্তন করা বাস্তবায়নের অনুমতি দেয়।

CSS-Tricks অনুসারে, আধুনিক ওয়েব অ্যাপ্লিকেশনে আইকন ব্যবহারের প্রস্তাবিত উপায় হল ইনলাইন SVG। CSS বৈশিষ্ট্য fill, stroke, stroke-width সরাসরি SVG উপাদানে প্রযোজ্য। CSS কাস্টমাইজেশনের জন্য, এটি গুরুত্বপূর্ণ যে উৎস SVG-তে fill এবং stroke ইনলাইন বৈশিষ্ট্য হিসাবে সেট না থাকে — অন্যথায় CSS সেগুলি ওভাররাইড করতে পারবে না।

• সুবিধা: CSS স্টাইলিং, JS নিয়ন্ত্রণ, কোন HTTP অনুরোধ নেই, viewBox অভিযোজনযোগ্যতা।
• অসুবিধা: HTML পৃষ্ঠার আকার বৃদ্ধি, HTML থেকে আলাদাভাবে ক্যাশ করতে অক্ষমতা।
• বিকল্প: SVG স্প্রাইট — একাধিক SVG একটি ফাইলে একত্রিত করা এবং <use href="#id"> ব্যবহার করা।

SVG স্প্রাইট ক্যাশিং সমস্যা সমাধান করে: সমস্ত আইকন একটি ফাইলে সংগ্রহ করা হয়, ব্রাউজার এটি একবার লোড করে এবং পৃথক আইকনগুলি স্প্রাইটের ভিতরে পছন্দসই উপাদানের id নির্দিষ্ট করে <use>-এর মাধ্যমে অ্যাক্সেস করা হয়।

SVG অ্যানিমেশন: CSS এবং SMIL

CSS SVG অ্যানিমেশন ব্রাউজারে ভেক্টর গ্রাফিক্স অ্যানিমেট করার সবচেয়ে সাধারণ এবং কার্যকরী উপায়। CSS বৈশিষ্ট্য যেমন transform, opacity এবং fill HTML উপাদানের মতোই SVG উপাদানে প্রযোজ্য। নির্বিচারে পথ বরাবর অ্যানিমেশনের জন্য CSS বৈশিষ্ট্য offset-path ব্যবহার করা হয়।

SMIL (Synchronized Multimedia Integration Language) হল SVG-তে নির্মিত একটি অ্যানিমেশন প্রক্রিয়া যা CSS থেকে স্বাধীন। <animate>, <animateTransform> এবং <animateMotion> উপাদানগুলি JavaScript বা CSS ছাড়াই যেকোনো SVG বৈশিষ্ট্য অ্যানিমেট করার অনুমতি দেয়। SMIL অ্যানিমেশন ব্রাউজার ফ্রেম হারের সাথে সিঙ্ক্রোনাইজ করার নিশ্চয়তা দেয়।

MDN Web Docs অনুসারে, SMIL সমস্ত আধুনিক ব্রাউজারে সমর্থিত, তবে CSS অ্যানিমেশন আরও অনুমানযোগ্য এবং কার্যকরী বলে বিবেচিত হয়। SMIL-এর প্রধান ব্যবহারের ক্ষেত্রে হল সেই বৈশিষ্ট্যগুলি অ্যানিমেট করা যা CSS-এর মাধ্যমে অ্যাক্সেসযোগ্য নয়, যেমন <path> উপাদানের d (path)।

JavaScript + requestAnimationFrame SVG অ্যানিমেশনের উপর সর্বাধিক নিয়ন্ত্রণ দেয়। ওয়েব ডেভেলপাররা জটিল অ্যানিমেশন ক্রমগুলির জন্য GSAP এবং Anime.js-এর মতো লাইব্রেরি ব্যবহার করে যাতে টাইমলাইন এবং ইজিং ফাংশন থাকে যা বিশুদ্ধ CSS-এর সাথে বাস্তবায়ন করা কঠিন।

কোড উদাহরণ: SVG গ্রাফিক্স তৈরি

প্রথম উদাহরণটি মৌলিক SVG উপাদান ব্যবহার করে একটি সরল বাড়ির আইকন। সমস্ত আকার rect এবং polyline:

<!-- Inline SVG icon -->
<svg viewBox="0 0 100 100" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="50" width="60" height="40" fill="#4A90D9" />
  <rect x="35" y="65" width="30" height="25" fill="#fff" />
  <polyline points="10,50 50,15 90,50" fill="none" stroke="#4A90D9" stroke-width="6" />
</svg>

দ্বিতীয় উদাহরণটি CSS-এর মাধ্যমে একটি ঘূর্ণায়মান লোডার অ্যানিমেশন দেখায়। এটি একটি ড্যাশড আউটলাইন তৈরি করতে stroke-dasharray বৈশিষ্ট্য সহ <circle> ব্যবহার করে:

<!-- CSS animated spinner -->
<svg class="spinner" viewBox="0 0 50 50" width="40" height="40">
  <circle cx="25" cy="25" r="20" fill="none"
    stroke="#4A90D9" stroke-width="4"
    stroke-dasharray="125.6 31.4" />
</svg>

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

তৃতীয় উদাহরণটি মসৃণ কনট্যুর অঙ্কনের জন্য একটি পথ অ্যানিমেট করতে GSAP লাইব্রেরি ব্যবহার করে। GSAP stroke-dashoffset বৈশিষ্ট্যের সাথে কাজ করে, যা লাইন আবির্ভাবের প্রভাব তৈরি করে:

// GSAP দিয়ে পথ আঁকুন
import gsap from "gsap";

const path = document.querySelector("#myPath");
const length = path.getTotalLength();

gsap.set(path, {
    strokeDasharray: length,
    strokeDashoffset: length
});

gsap.to(path, {
    strokeDashoffset: 0,
    duration: 2,
    ease: "power2.out"
});