ज़्यादातर इमेज आपके कॉन्टेंट का हिस्सा होती हैं. हालांकि, आइकॉन आपके यूज़र इंटरफ़ेस का हिस्सा होते हैं. उन्हें उसी तरह स्केल करना चाहिए और अपनाना चाहिए, जिस तरह आपके यूज़र इंटरफ़ेस (यूआई) का टेक्स्ट स्केल और एडैप्ट करता है.
स्केलेबल वेक्टर ग्राफ़िक
जब फ़ोटोग्राफ़िक इमेजरी की बात आती है, तो इमेज फ़ॉर्मैट के लिए कई विकल्प होते हैं: 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 फ़ाइल में निर्देश लिखने के लिए किया जाता है. यह 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>
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;
}
संसाधन
- अगर आपको अपने सीएसएस में बैकग्राउंड की इमेज वाले SVGs को स्टाइल करना है, तो SVG बैकग्राउंड को कलर करने के बारे में Una का लेख पढ़ें.
- सारा सोइडन ने सुलभता वाले आइकॉन बटन के बारे में लिखा है.
- स्कॉट ओ'हारा ने संदर्भ के हिसाब से ऐक्सेस की जा सकने वाली इमेज और SVG को मार्कअप करने के बारे में लिखा है.
- अगर SVG फ़ाइल एक्सपोर्ट करने के लिए, किसी ग्राफ़िक डिज़ाइन टूल का इस्तेमाल किया जा रहा है, तो आउटपुट को ऑप्टिमाइज़ करने के लिए SVGOMG का इस्तेमाल करें.
आइकॉन, आपकी साइट की ब्रैंडिंग का एक अहम हिस्सा होते हैं. इसके बाद आप थीम की मदद से अपने ब्रैंडिंग के दूसरे पहलुओं को रिस्पॉन्सिव बनाने का तरीका जानेंगे.
देखें कि आपको कितना समझ आया है
आइकॉन के बारे में अपनी जानकारी को परखें
SVG फ़ाइल में किसी भी पिक्सल डेंसिटी को, एक फ़ाइल या <svg> कोड ब्लॉक के साथ मैनेज किया जा सकता है.
.png या .jpg के उलट, SVG के लिए srcset या <picture> एलिमेंट की कोई ज़रूरत नहीं है.सीधे एचटीएमएल में मौजूद SVG कोड के क्या फ़ायदे हैं?