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