आइकॉन

ज़्यादातर इमेज आपके कॉन्टेंट का हिस्सा होती हैं, लेकिन आइकॉन आपके यूज़र इंटरफ़ेस का हिस्सा होते हैं. इन्हें उसी तरह स्केल और एडजस्ट किया जाना चाहिए जिस तरह आपके यूज़र इंटरफ़ेस (यूआई) के टेक्स्ट को स्केल किया जाता है और बदला जाता है.

स्केलेबल वेक्टर ग्राफ़िक

जब फ़ोटोग्राफ़िक तस्वीरों के संग्रह की बात आती है, तो इमेज फ़ॉर्मैट के लिए कई विकल्प होते हैं: 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 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>

मुस्कुराता हुआ चेहरा.

यहां तक कि आप 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 एम्बेड किया जाता है, तो यह एक कम अनुरोध होगा. यह अनुरोध ब्राउज़र को करना होता है. इमेज के डाउनलोड होने का इंतज़ार नहीं करना होगा, क्योंकि यह एचटीएमएल में ... एचटीएमएल में उपलब्ध है. साथ ही, आपको जल्द ही पता चलेगा कि SVG को इस तरह एम्बेड करने से, उन्हें स्टाइल करने पर भी ज़्यादा कंट्रोल मिलता है.

आइकॉन और टेक्स्ट

आइकॉन इमेज में अक्सर पारदर्शी बैकग्राउंड पर आसान आकार होते हैं. SVG, आइकॉन के लिए सबसे सही तरीका है.

अगर आपके पास कोई बटन या लिंक है, जिसमें टेक्स्ट और आइकॉन है, तो आइकॉन प्रज़ेंटेशन के तौर पर दिखेगा. टेक्स्ट ही मायने रखता है. img एलिमेंट का इस्तेमाल करते समय, खाली alt एट्रिब्यूट से पता चलता है कि इमेज प्रज़ेंटेशन के लिए है.

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

सीएसएस, प्रज़ेंटेशन के लिए है. इसलिए, आइकॉन को अपने सीएसएस में बैकग्राउंड की इमेज के तौर पर इस्तेमाल किया जा सकता है.

<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;
}

अगर 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>

स्टैंडअलोन आइकॉन

अगर आपको बटन और लिंक का मकसद साफ़ तौर पर बताना है, तो उनमें टेक्स्ट का इस्तेमाल करें. बिना टेक्स्ट के आइकॉन का इस्तेमाल किया जा सकता है. हालांकि, ऐसा न करें कि हर व्यक्ति उस आइकॉन का मतलब समझ पाता है. किसी भी तरह का संदेह होने पर, असली उपयोगकर्ताओं से टेस्ट कराएं.

अगर आपको आइकॉन का इस्तेमाल किए बिना टेक्स्ट का इस्तेमाल करना है, तो वह आइकॉन नहीं दिखेगा. सीएसएस में बैकग्राउंड की इमेज दिखाना, आइकॉन दिखाने का सही तरीका नहीं है. आइकॉन को एचटीएमएल में ऐक्सेस किया जा सकने वाला कोई नाम दिया जाना चाहिए.

अगर 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>

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 आइकॉन को सीधे अपने एचटीएमएल में एम्बेड करते हैं, तो आप उनके हिस्सों को अपने पेज के किसी भी दूसरे एलिमेंट की तरह स्टाइल कर सकते हैं. अगर 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> एलिमेंट की कोई ज़रूरत नहीं होती.

सीधे एचटीएमएल में मौजूद SVG कोड के क्या फ़ायदे हैं?

सीएसएस की मदद से स्टाइल किया जा सकता है
SVG आइकॉन के आकार को बटन और ब्रैंड के रंगों के हिसाब से मैच करें.
डाउनलोड करने की ज़रूरत नहीं है.
इसमें सभी निर्देश मौजूद हैं.
डिफ़ॉल्ट रूप से लेज़ी लोड होता है.
ज़्यादा डाउनलोड करने की ज़रूरत नहीं है.
सीपीयू का कम इस्तेमाल.
मैंने इसे बनाया है.
हल्की या गहरे रंग वाली थीम, लेकिन इसमें नई एसेट नहीं जोड़ी गई है.
मीडिया क्वेरी की मदद से, इनलाइन SVG स्टाइल में बदलाव किए जा सकते हैं!