आइकॉन

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

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

फ़ोटोग्राफ़िक इमेज के लिए, इमेज फ़ॉर्मैट के कई विकल्प उपलब्ध हैं: JPG, WebP, और AVIF. फ़ोटो के अलावा अन्य इमेज के लिए, आपके पास पोर्टेबल नेटवर्क ग्राफ़िक्स (PNG) फ़ॉर्मैट और स्केलेबल वेक्टर ग्राफ़िक्स (SVG) फ़ॉर्मैट में से किसी एक को चुनने का विकल्प होता है.

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

PNG (और JPG, WebP, और AVIF) बिटमैप इमेज होती हैं. बिटमैप इमेज में जानकारी को पिक्सल के तौर पर सेव किया जाता है. एसवीजी में, जानकारी को ड्रॉइंग के निर्देशों के तौर पर सेव किया जाता है. जब ब्राउज़र 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 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, आइकॉन के लिए सबसे सही फ़ॉर्मैट है.

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

आइकॉन को स्टाइल करना

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

सही
एसवीजी में, किसी भी पिक्सल डेंसिटी, स्केल या ज़ूम पर शेप और लाइनें बनाने का तरीका शामिल होता है.
गलत
.png या .jpg के उलट, SVG के लिए srcset या <picture> एलिमेंट की ज़रूरत नहीं होती.

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

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