মূলঃ How to Use SVG Images in CSS and HTML – A Tutorial for Beginners, লেখকঃ Edidiong Asikpo

SVG মানে স্কেলেবল ভেক্টর গ্রাফিক্স (Scalable Vector Graphics)। এক্সটেন্সিবল মার্কআপ ল্যাংগুয়েজ (XML)-এ লেখা ভেক্টর-ভিত্তিক গ্রাফিক্স এর জন্য এটি একটি অনন্য ছবির ফরম্যাট।

এই টিউটোরিয়ালে SVG ছবি কেন ব্যবহার করবেন এবং কীভাবে CSS এবং HTML এ SVG ব্যবহার করা যায় তা আমি ব্যাখ্যা করব।

আপনি SVG ছবি কেন ব্যবহার করবেন?

SVG ছবি ব্যবহার করার বেশ কয়েকটি কারণ থাকতে পারে। তার মধ্যে কয়েকটি হলোঃ

  • SVG ফরম্যাটের ছবিত উপরে জুম করা হলেও ছবির মান নষ্ট হয় না।
  • যেকোন IDE বা টেক্সট-এডিটর ব্যবহার করেই SVG ছবি তৈরি বা এডিট করা যায়।
  • এই ফরম্যাটের ছবিগুলি অ্যাক্সেসিবল এবং অ্যানিমেটেবল।
  • ফাইলের আকার খুবই ছোট হয় এবং ছবিগুলি অনেক স্কেলেবল হয়।
  • ছবিগুলিকে খুব সহজেই সার্চ, ইন্ডেক্সা, স্ক্রিপ্ট এবং কমপ্রেস করা যায়।

চলুন এখন দেখি আপনি SVG ছবি নিয়ে আসলে কীভাবে কাজ করতে পারেন।

এই টিউটোরিয়ালে ব্যবহৃত ছবিটি কিভাবে ডাউনলোড করবেন

আমি এই টিউটোরিয়ালে যে SVG ছবিটি ব্যবহার করেছি সেটি নিয়ে যদি আপনি কাজ করতে চান, তাহলে নিম্নোক্ত ধাপগুলি অনুসরণ করে ডাউনলোড করতে পারবেন।

  • unDraw ওয়েবসাইটটিতে যান।
  • ব্যাকগ্রাউন্ড কালার হিসেবে হলুদ ব্যবহার করুন।
  • সার্চবক্সে happy শব্দটি সার্চ করুন।
ncSY7Rn
  • Happy news নামের ছবিটিতে ক্লিক করুন।
  • পপ-আপ উইন্ডোতে Download SVG to your projects বাটনটিতে ক্লিক করুন।
qGrT73n

আপনি যদি উপরের ধাপগুলো ঠিকমতো অনুসরণ করেন তাহলে SVG ছবিটি এখন আপনার কম্পিউটারে থাকা উচিত।

3uCGy6B

এখন SVG ছবিটি আপনার পছন্দের IDE বা টেক্সট-এডিটর এ খুলুন। ছবির নাম বদলে happy.svg বা আপনার ইচ্ছামতো যেকোনো একটি নাম দিন।

CSS এবং HTML-এ SVG ছবি কীভাবে ব্যবহার করতে হয়

CSS এবং HTML-এ SVG ছবি ব্যবহার করার বেশ কয়েকটি উপায় আছে। এই টিউটোরিয়ালে আমরা ৬টি উপায় সম্পর্কে জানব।

১. একটি SVG-কে <img> হিসেবে কিভাবে ব্যবহার করা যায়

একটি ওয়েবপেজের সাথে SVG ছবি যুক্ত করার এটি সবচেয়ে সহজ উপায়। এই মেথডটির জন্য, আপনার HTML ডকুমেন্ট এ একটি <img> এলিমেন্ট যুক্ত করুন এবং src এট্রিবিউট-এ আপনার কাঙ্ক্ষিত ছবিটি রেফার করুনঃ

<img src = "happy.svg" alt="My Happy SVG"/>

যদি ধরে নিই যে আপনি ছবিটি unDraw থেকে ডাউনলোড করেছেন এবং তার নাম happy.svg দিয়েছেন, তাহলে আপনি সরাসরি উপরের কোড স্নিপেটটি আপনার HTML ডকুমেন্ট-এ যোগ করতে পারেন।

আপনি যদি সবকিছু ঠিক মতো করে থাকেন, তাহলে আপনার ওয়েবপেজটি দেখতে হুবহু নিচের ডেমোটির মতো হবে।

যখন আপনি কোন আকার নির্ধারণ না করে <img> ট্যাগটি ব্যবহার করে একটি SVG ছবি যুক্ত করেন, তখন এটি স্বয়ংক্রিয়ভাবে মূল ফাইলের আকার নেয়।

উদাহরণ স্বরূপ, উপরের ডেমোতে, আমি SVG ছবিটির আকার বদল করিনি, তাই এটি তার আসল আকারই ধারণ করেছে (প্রস্থে 600.53015px এবং উচ্চতায় 915.11162px)।

উল্লেখ্যঃ মূল আকার বদল করতে চাইলে, আপনাকে নিচের ডেমোর মতো CSS এর সাহায্যে width এবং height নির্ধারণ করতে হবে। আপনি চাইলে সরাসরি মূল width এবং height ও আপডেট করতে পারেন।

যদিও আপনি <img> ট্যাগ এর মাধ্যমে যুক্ত করা SVG ছবির আকার বদলাতে পারেন, কিন্তু ছবির স্টাইলে খুব বড় কোন পরিবর্তন আনার ক্ষেত্রে বেশ কিছু সীমাবদ্ধতা আছে।

২. CSS background-image হিসেবে কীভাবে একটি SVG ব্যবহার করা যায়

এটি অনেকটা <img> ট্যাগ ব্যবহার করে HTML ডকুমেন্ট-এ SVG যুক্ত করার মতোই। কিন্তু এবার আমরা HTML-এর বদলে CSS ব্যবহার করব, যা আপনি নিচে কোড স্নিপেটে দেখতে পাবেন।

body {
  background-image: url(happy.svg);
}

CSS-এ ব্যাকগ্রাউন্ড ছবি হিসেবে আপনি যখন একটি SVG ব্যবহার করবেন, তখন <img> মেথড-এর মত একই সীমাবদ্ধতা থাকবে। তারপরও এটি আরও একটু কাস্টমাইজেবল।

নিচের ডেমোটি দেখুন এবং CSS ব্যবহার করে আপনার ইচ্ছামতো এটিকে পরিবর্তন করুন।

৩. ইনলাইন SVG ছবি কিভাবে ব্যবহার করা যায়

<svg> </svg> ট্যাগটি ব্যবহার করে SVG ছবিগুলো সরাসরি HTML ডকুমেন্ট-এ লেখা যায়।
এটি করতে চাইলে VS code বা আপনার পছন্দের IDE-তে SVG ছবিটি খুলুন, কোডটি কপি করুন এবং আপনার HTML ডকুমেন্ট-এর <body> এলিমেন্ট এর ভেতর পেস্ট করুন।

<body>
 // Paste the SVG code here.
</body>

আপনি যদি সব কিছু ঠিক মতো করে থাকেন, তাহলে আপনার ওয়েবপেজটি দেখতে হুবহু নিচের ডেমোটির মতো হবে।

আপনি যখন HTML ডকুমেন্ট-এ SVG ইনলাইন হিসেবে ব্যবহার করেন, তখন লোড টাইম কমে যায় কারণ এটি একটি HTTP রিকোয়েস্ট হিসেবে কাজ করে।

<img> অথবা background-image মেথডটির তুলনায় এটি আপনাকে আরো কাস্টমাইজেশনের সুযোগ দিবে।

৪. <object> হিসেবে একটি SVG কীভাবে ব্যবহার করা যায়

HTML <object> এলিমেন্ট ব্যবহার করেও আপনি একটি ওয়েবপেজ এর সাথে SVG ছবি যুক্ত করতে পারেন। সেক্ষেত্রে নিচের কোড সিনট্যাক্সটি ব্যবহার করতে হবেঃ

<object data="happy.svg" width="300" height="300"> </object>

আপনি data এট্রিবিউটটি ব্যবহার করে অবজেক্ট হিসেবে যে রিসোর্সটি ব্যবহার করবেন তার URL নির্ধারিত করে দিতে পারেন, আমাদের ক্ষেত্রে সেটি একটি SVG ছবি হবে।

ছবির আকার নির্দিষ্ট করার জন্য আপনি width এবং height ব্যবহার করবেন।

আপনার দেখার জন্য নিচে একটি ডেমো দেওয়া হলো।

SVG সাপোর্ট করে এমন সব ব্রাউজার‌ই <object> এলিমেন্টের ব্যবহার‌ সাপোর্ট করে।

৫. <iframe> হিসেবে কীভাবে ব্যবহার করা যায়

যদিও এটা না করাই ভালো, তারপরও আপনি নিচের ডেমোর মত একটি <iframe> ব্যবহার করেও SVG ছবি যুক্ত করতে পারেন।

তারপরও মাথায় রাখবেন যে <iframe> মেইনটেইন করা বেশ কঠিন এবং আপনার সাইটের Search Engine Optimization (SEO) এর জন্য বেশ খারাপ হতে পারে।

<iframe> ফরমেটে যুক্ত করা SVG ছবি স্কেলেবল না হওয়ায় স্কেলেবল ভেক্টর গ্রাফিক্স নামটাও একরকম ব্যর্থ‌ই হয়।

৬. <embed> হিসেবে SVG কীভাবে ব্যবহার করবেন

HTML এবং CSS-এ ছবি যুক্ত করার আরেকটি উপায় হচ্ছে HTML <embed> এলিমেন্ট। তার জন্য এই সিনট্যাক্সটি ব্যবহার করতে হয়: <embed src="happy.svg" />

মনে রাখবেন যে এই মেথডটির‌ও অনেক সীমাবদ্ধতা রয়েছে। MDN অনুযায়ী, অধিকাংশ আধুনিক ব্রাউজার‌ই আর ব্রাউজার প্লাগ-ইন সাপোর্ট করে না। এর মানে সাধারণ ব্যবহারকারীর ব্রাউজারে আপনার সাইট ব্যবহারযোগ্য করতে চাইলে <embed> এর উপর নির্ভর করা শ্রেয় নয়।

HTML <embed> এলিমেন্ট ব্যবহার করে একটি SVG ছবি যুক্ত করার একটি ডেমো নিচে দেখানো হলো।

উপসংহার

আশা করি আপনি HTML এবং CSS-এ বিভিন্নভাবে SVG ছবি ব্যবহার করার উপায় শিখেছেন। SVG ছবি ওয়েবসাইটে যুক্ত করার সময় আশা করি এটি আপনাকে সাহায্য করবে।

আপনার যদি কোন প্রশ্ন থাকে তাহলে আমাকে টুইটার-এ মেসেজ দিতে পারেন, আমি অবশ্যই উত্তর দেবো।