আইকন

বেশিরভাগ ছবিই আপনার কন্টেন্টের অংশ, কিন্তু আইকনগুলো আপনার ইউজার ইন্টারফেসের অংশ। আপনার ইউজার ইন্টারফেসের টেক্সট যেভাবে আকার পরিবর্তন ও মানিয়ে নেয়, আইকনগুলোরও ঠিক সেভাবেই আকার পরিবর্তন ও মানিয়ে নেওয়া উচিত।

স্কেলেবল ভেক্টর গ্রাফিক্স

ফটোগ্রাফিক ইমেজের ক্ষেত্রে, ইমেজ ফরম্যাটের অনেকগুলো বিকল্প রয়েছে: JPG, WebP, এবং AVIF। নন-ফটোগ্রাফিক ইমেজের জন্য, আপনার কাছে পোর্টেবল নেটওয়ার্ক গ্রাফিক্স (PNG) ফরম্যাট এবং স্কেলেবল ভেক্টর গ্রাফিক্স (SVG) ফরম্যাটের মধ্যে থেকে বেছে নেওয়ার সুযোগ রয়েছে।

PNG এবং SVG উভয়ই সমতল রঙের ক্ষেত্রগুলির সাথে কাজ করার জন্য ভালো, এবং উভয় ফরম্যাটেই আপনার ছবির স্বচ্ছ ব্যাকগ্রাউন্ড থাকতে পারে। আপনি যদি একটি PNG ব্যবহার করেন, তাহলে সম্ভবত আপনাকে বিভিন্ন আকারে আপনার ছবির একাধিক সংস্করণ তৈরি করতে হবে এবং ছবিটিকে রেসপন্সিভ করার জন্য আপনার img এলিমেন্টে srcset অ্যাট্রিবিউট ব্যবহার করতে হবে। আর যদি আপনি একটি SVG ব্যবহার করেন, তবে এটি ডিফল্টভাবেই রেসপন্সিভ হয়।

PNG (এবং JPG, WebP, ও AVIF) হলো বিটম্যাপ ইমেজ। বিটম্যাপ ইমেজ পিক্সেল হিসেবে তথ্য সংরক্ষণ করে। একটি SVG-তে, তথ্য অঙ্কন নির্দেশাবলী হিসেবে সংরক্ষিত থাকে। যখন ব্রাউজার SVG ফাইলটি পড়ে, তখন এই নির্দেশাবলী পিক্সেলে রূপান্তরিত হয়। সবচেয়ে ভালো ব্যাপার হলো, এই নির্দেশাবলী আপেক্ষিক। লাইন এবং আকৃতি বর্ণনা করার জন্য আপনি যে মাত্রাই ব্যবহার করুন না কেন, সবকিছু একদম সঠিক স্পষ্টতায় রেন্ডার হয়। বিভিন্ন আকারের একাধিক SVG তৈরি করার পরিবর্তে, আপনি এমন একটি SVG তৈরি করতে পারেন যা সব আকারেই কাজ করবে। এর জন্য srcset অ্যাট্রিবিউট ব্যবহার করার কোনো প্রয়োজন নেই।

<img src="image.svg" alt="A description of the image." width="25" height="25">
<img src="image.svg" alt="A description of the image." width="250" height="250">

একটি SVG ফাইলে নির্দেশাবলী লেখার জন্য XML ব্যবহার করা হয়। এটি HTML-এর মতো একটি মার্কআপ ল্যাঙ্গুয়েজ।

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-21 -21 42 42" width="100" height="100">
  <title>Smiling face</title>
  <circle r="20" fill="yellow" stroke="black"/>
  <ellipse rx="2.5" ry="4" cx="-6" cy="-7" fill="black"/>
  <ellipse rx="2.5" ry="4" cx="6" cy="-7" fill="black"/>
  <path stroke="black" d="M -12,5 A 13.5,13.5,0 0,0 12,5 A 13,13,0 0,1 -12,5"/>
</svg>

একটি হলুদ স্মাইলি ফেস ইমোজি যা পিক্সেলেশন ছাড়াই বড় করা যায়।

আপনি HTML-এর ভিতরেও SVG রাখতে পারেন।

<figure>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-21 -21 42 42" width="100" height="100">
    <title>Smiling face</title>
    <circle r="20" fill="yellow" stroke="black"/>
    <ellipse rx="2.5" ry="4" cx="-6" cy="-7" fill="black"/>
    <ellipse rx="2.5" ry="4" cx="6" cy="-7" fill="black"/>
    <path stroke="black" d="M -12,5 A 13.5,13.5,0 0,0 12,5 A 13,13,0 0,1 -12,5"/>
  </svg>
  <figcaption>
  A description of the image.
  </figcaption>
</figure>

আপনি যদি এইভাবে একটি SVG এমবেড করেন, তাহলে ব্রাউজারকে একটি অনুরোধ কম করতে হয়। ছবিটি ডাউনলোড হওয়ার জন্য কোনো অপেক্ষা করতে হবে না, কারণ এটি HTML-এর সাথেই আসে... HTML- এর ভেতরেই ! এছাড়াও, আপনি শীঘ্রই জানতে পারবেন যে, এইভাবে SVG এমবেড করলে সেগুলোর স্টাইলিংয়ের ওপরও আপনার আরও বেশি নিয়ন্ত্রণ থাকে।

আইকন এবং লেখা

আইকন চিত্রগুলিতে প্রায়শই একটি স্বচ্ছ পটভূমিতে সরল আকৃতি দেখা যায়। আইকনের জন্য SVG আদর্শ।

যদি আপনার কোনো বাটন বা লিঙ্কে টেক্সট এবং তার ভেতরে একটি আইকন থাকে, তবে আইকনটি হলো উপস্থাপনামূলক। মূল বিষয় হলো টেক্সটটি। img এলিমেন্ট ব্যবহার করার সময়, একটি খালি alt অ্যাট্রিবিউট নির্দেশ করে যে ছবিটি উপস্থাপনামূলক।

<button>
<img src="hamburger.svg" alt="" width="16" height="16">
Menu
</button>

যেহেতু CSS উপস্থাপনার জন্য ব্যবহৃত হয়, তাই আপনি আপনার CSS কোডে আইকনটিকে একটি ব্যাকগ্রাউন্ড ইমেজ হিসেবে রাখতে পারেন।

<button class="menu">
Menu
</button>

.menu {
  background-image: url(hamburger.svg);
  background-position: 0.5em;
  background-repeat: no-repeat;
  background-size: 1em;
  padding-inline-start: 2em;
}

আপনি যদি আপনার HTML-এর ভিতরে SVG রাখেন, তাহলে সহায়ক প্রযুক্তি থেকে এটিকে আড়াল করতে aria-hidden অ্যাট্রিবিউট ব্যবহার করুন।

<button class="menu">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80" width="16" height="16">
    <rect width="100" height="20" />
    <rect y="30" width="100" height="20"/>
    <rect y="60" width="100" height="20"/>
  </svg>
  Menu
</button>

স্বতন্ত্র আইকন

আপনার বাটন এবং লিঙ্কের উদ্দেশ্য স্পষ্ট করতে চাইলে সেগুলোর ভেতরে লেখা ব্যবহার করুন। আপনি লেখা ছাড়াই আইকন ব্যবহার করতে পারেন, কিন্তু এটা ধরে নেবেন না যে সবাই একটি নির্দিষ্ট আইকনের অর্থ বোঝে। সন্দেহ হলে, আসল ব্যবহারকারীদের দিয়ে পরীক্ষা করে দেখুন।

যদি আপনি কোনো লেখা ছাড়া শুধু একটি আইকন ব্যবহার করার সিদ্ধান্ত নেন, তাহলে আইকনটি আর উপস্থাপনামূলক থাকে না। CSS-এ ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করে আইকনটি প্রদর্শন করা উপযুক্ত উপায় নয়। HTML-এ আইকনটিকে একটি অ্যাক্সেসিবল নাম দিতে হবে।

আপনি যদি img এলিমেন্ট ব্যবহার করেন, তাহলে আইকনটি alt অ্যাট্রিবিউট থেকে তার অ্যাক্সেসযোগ্য নামটি পায়।

<button>
<img src="hamburger.svg" alt="Menu" width="16" height="16">
</button>

আরেকটি উপায় হলো, সরাসরি লিঙ্ক বা বাটনে অ্যাক্সেসিবল নামটি বসিয়ে দেওয়া এবং ছবিটিকে প্রেজেন্টেশনাল হিসেবে ঘোষণা করা। অ্যাক্সেসিবল নামটি দেওয়ার জন্য aria-label অ্যাট্রিবিউট ব্যবহার করুন।

<button aria-label="Menu">
<img src="hamburger.svg" alt="" width="16" height="16">
</button>

আপনি যদি আপনার HTML-এর মধ্যে SVG রাখেন, তাহলে লিঙ্ক বা বাটনের একটি অ্যাক্সেসিবল নাম দেওয়ার জন্য সেটিতে aria-label অ্যাট্রিবিউট এবং আইকনে aria-hidden অ্যাট্রিবিউট ব্যবহার করুন। 

<button aria-label="Menu">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80" width="16" height="16">
    <rect width="100" height="20" />
    <rect y="30" width="100" height="20"/>
    <rect y="60" width="100" height="20"/>
  </svg>
</button>

স্টাইলিং আইকন

যদি আপনি আপনার SVG আইকনগুলো সরাসরি HTML-এ যুক্ত করেন, তাহলে আপনি আপনার পেজের অন্য যেকোনো এলিমেন্টের মতোই সেগুলোর অংশবিশেষকে স্টাইল করতে পারবেন। কিন্তু আইকনগুলো দেখানোর জন্য img এলিমেন্ট ব্যবহার করলে আপনি তা করতে পারবেন না।

নিচের উদাহরণে, বাটনের টেক্সটের স্টাইলের সাথে মেলানোর জন্য SVG-এর ভেতরের rect এলিমেন্টগুলোর fill ভ্যালু blue দেওয়া হয়েছে। 

button {
 color: blue;
}
button rect {
  fill: blue;
}

আপনি hover এবং focus স্টাইলও প্রয়োগ করতে পারেন। 

button:hover,
button:focus {
  color: red;
}
button:hover rect,
button:focus rect {
  fill: red;
}

সম্পদ

আইকনগুলো আপনার সাইটের ব্র্যান্ডিংয়ের একটি গুরুত্বপূর্ণ অংশ। এরপর আপনি জানতে পারবেন, থিমিংয়ের শক্তির মাধ্যমে কীভাবে আপনার ব্র্যান্ডিংয়ের অন্যান্য দিকগুলোকেও রেসপন্সিভ করে তোলা যায়।

আপনার বোধগম্যতা যাচাই করুন

আইকন সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন

SVG একটিমাত্র ফাইল বা <svg> কোড ব্লকের মাধ্যমে যেকোনো পিক্সেল ঘনত্ব পরিচালনা করতে পারে।

সত্য
SVG-তে যেকোনো পিক্সেল ঘনত্ব, স্কেল বা জুমে আকৃতি এবং রেখা আঁকার পদ্ধতি অন্তর্ভুক্ত রয়েছে।
মিথ্যা
.png বা .jpg এর মতো নয়, SVG-তে srcset বা <picture> এলিমেন্টের প্রয়োজন হয় না।

সরাসরি HTML-এ থাকা SVG কোডের কী কী সুবিধা রয়েছে?

CSS থেকে স্টাইলযোগ্য
SVG আইকনের আকৃতিগুলোকে বাটন এবং ব্র্যান্ডের রঙের সাথে মেলান।
ডাউনলোড করার প্রয়োজন নেই।
সমস্ত নির্দেশনা দেওয়া আছে।
ডিফল্টরূপে লেজি লোড হয়।
ডাউনলোড করার ব্যাপারে আলসেমি করার কোনো সুযোগ নেই।
সিপিইউ-এর ব্যবহার কম।
এটা আমি বানিয়েছি।
নতুন কোনো অ্যাসেট ছাড়াই হালকা বা গাঢ় থিম।
মিডিয়া কোয়েরি ইনলাইন SVG স্টাইল পরিবর্তন করতে পারে!
পূর্ববর্তী
ছবির উপাদান
পরবর্তী
থিমিং