আইকন

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

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

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

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

PNGs (এবং JPGs, 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">

XML একটি SVG ফাইলে নির্দেশাবলী লিখতে ব্যবহৃত হয়। এটি একটি মার্কআপ ভাষা, যেমন 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;
}

সম্পদ

• আপনি যদি আপনার CSS-এ ব্যাকগ্রাউন্ড ইমেজ হয় এমন SVG-কে স্টাইল করতে চান, তাহলে SVG ব্যাকগ্রাউন্ডকে রঙিন করার বিষয়ে Una-এর নিবন্ধটি পড়ুন।
• Sara Soueidan অ্যাক্সেসযোগ্য আইকন বোতাম সম্পর্কে লিখেছেন।
• স্কট ও'হারা প্রাসঙ্গিকভাবে অ্যাক্সেসযোগ্য ছবি এবং SVGs চিহ্নিত করার বিষয়ে লিখেছেন।
• আপনি যদি SVG রপ্তানি করার জন্য একটি গ্রাফিক ডিজাইন টুল ব্যবহার করেন, তাহলে আউটপুট অপ্টিমাইজ করতে SVGOMG ব্যবহার করুন।

আইকন আপনার সাইটের ব্র্যান্ডিং একটি গুরুত্বপূর্ণ অংশ. এরপরে আপনি থিমিংয়ের শক্তির মাধ্যমে আপনার ব্র্যান্ডিংয়ের অন্যান্য দিকগুলিকে প্রতিক্রিয়াশীল করার উপায় খুঁজে পাবেন৷

আপনার উপলব্ধি পরীক্ষা করুন

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