SVG को CSS बैकग्राउंड में बदलें

इमेज फ़ाइल की जगह CSS बैकग्राउंड में SVG क्यों इस्तेमाल करें?

SVG को data URI के रूप में सीधे स्टाइलशीट में एनकोड करने से अलग इमेज फ़ाइल लोड करने के लिए एक अतिरिक्त HTTP रिक्वेस्ट नहीं करनी पड़ती, जिससे छोटे आइकन थोड़ा तेज़ दिख सकते हैं। यह स्वतंत्र कॉम्पोनेंट के लिए भी सुविधाजनक है (एक ही CSS फ़ाइल में उसका आइकन पहले से मौजूद होता है)।

SVG को base64 की जगह URL एनकोडिंग में क्यों बदला जाता है?

URL एनकोडिंग (#, < और > जैसे कुछ वर्णों को एस्केप करके) आम तौर पर SVG जैसे टेक्स्ट के लिए base64 से छोटा और ज़्यादा पठनीय data URI बनाती है, जिससे CSS का अंतिम आकार थोड़ा कम होता है।

क्या CSS बैकग्राउंड में जोड़ने के बाद आइकन का रंग बदला जा सकता है?

नहीं, background-image में एनकोड होने के बाद SVG का रंग data URI में तय हो जाता है। रंग बदलने के लिए CSS दोबारा बनाने से पहले स्रोत SVG में रंग बदलें (उदाहरण के लिए हमारे SVG रंग बदलने वाले टूल से)।

100% लोकल प्रोसेसिंग: एनकोडिंग पूरी तरह आपके ब्राउज़र में होती है, आपका SVG कभी किसी सर्वर पर नहीं भेजा जाता।