यह कैसे काम करता है
यह किसी SVG के कोड को CSS में उपयोग के लिए तैयार Data URI में बदल देता है, ताकि आप आइकन को किसी अलग फ़ाइल या अतिरिक्त HTTP अनुरोध के बिना सीधे स्टाइलशीट में एम्बेड कर सकें।
यह दो एन्कोडिंग प्रदान करता है: URL-encoded (परसेंट-एन्कोडिंग), जो छोटा और अधिक पठनीय है, SVG के लिए अनुशंसित; और Base64, जो कुछ लंबा है पर सार्वभौमिक रूप से संगत है।
परिणाम को background-image, mask-image (CSS से आइकन को रंगने के लिए) या पुन: प्रयोज्य CSS वेरिएबल के रूप में उत्पन्न किया जा सकता है। पहले SVG को मिनिफ़ाई करने से आकार और भी कम हो जाता है।
उदाहरण
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">…</svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'…%3C/svg%3E");URL एन्कोडिंग SVG को लगभग पठनीय बनाए रखती है और आमतौर पर Base64 से छोटी होती है।-webkit-mask-image: url("data:image/svg+xml,…");
mask-image: url("data:image/svg+xml,…");mask-image के रूप में, आइकन का रंग तत्व की background-color प्रॉपर्टी से नियंत्रित होता है।उपयोग के मामले
- पेज पर HTTP अनुरोध जोड़े बिना SVG आइकनों को background-image के रूप में एम्बेड करना।
- किसी SVG को मास्क (mask-image) के रूप में उपयोग करना ताकि थीम या स्थिति के अनुसार उसे CSS से पुनः रंगा जा सके।
- किसी आइकन को CSS वेरिएबल में संग्रहीत करना और उसे कई सेलेक्टर में पुन: उपयोग करना।
- एम्बेड करने से पहले SVG को मिनिफ़ाई करके इनलाइन आइकनों का वज़न कम करना।
अक्सर पूछे जाने वाले प्रश्न
URL-encoded बेहतर है या Base64?
SVG के लिए URL-encoded आमतौर पर सबसे अच्छा विकल्प है: चूँकि SVG टेक्स्ट है, यह छोटा और अधिक पठनीय Data URI बनाता है। Base64 अधिकतम संगतता देता है, पर आकार में लगभग 33% जोड़ देता है।
background-image के बजाय mask-image क्यों उपयोग करें?
background-image के साथ आइकन अपने मूल रंग बनाए रखता है। mask-image के साथ SVG केवल आकार परिभाषित करता है और रंग CSS देता है, जो थीम के साथ बदलने वाले एकवर्णी आइकनों के लिए आदर्श है।
मिनिफ़ाई विकल्प क्या करता है?
यह एन्कोड करने से पहले SVG की टिप्पणियाँ हटाता है और श्वेत स्थान को संक्षिप्त करता है, जिससे अंतिम Data URI चित्र बदले बिना छोटा हो जाता है।
क्या मेरा SVG किसी सर्वर पर अपलोड होता है?
नहीं। रूपांतरण पूरी तरह आपके ब्राउज़र में होता है; SVG कभी आपके कंप्यूटर से बाहर नहीं जाता।