SVG को CSS Data URI में बदलें
रॉ SVG मार्कअप पेस्ट करें और एक URL-एन्कोडेड डेटा URI पाएं जिसे आप सीधे CSS background-image में डाल सकते हैं, साथ ही रेंडर किए गए SVG का लाइव प्रीव्यू भी।
लाइव पूर्वावलोकन
आपका SVG पूर्वावलोकन यहाँ दिखाई देगा
डेटा URI
CSS स्निपेट
अक्सर पूछे जाने वाले प्रश्न
एक्सटर्नल SVG फ़ाइल की बजाय डेटा URI का उपयोग क्यों करें?
एक डेटा URI SVG को सीधे आपके CSS या HTML के अंदर एम्बेड करता है, जिससे एक अतिरिक्त HTTP रिक्वेस्ट बचती है। यह उन छोटे आइकनों के लिए खासतौर पर काम का है जो सिर्फ़ background-image के रूप में इस्तेमाल होते हैं, जहां सब कुछ एक स्टाइलशीट में रखना अलग एसेट फ़ाइल मैनेज करने से आसान है।
यह base64 की बजाय URL-एन्कोडेड क्यों है?
URL-एन्कोडेड SVG डेटा URI आमतौर पर base64 के बराबर से छोटे होते हैं और पढ़ने योग्य बने रहते हैं, जिससे उन्हें सीधे आपके CSS में रिव्यू या ट्वीक करना आसान हो जाता है। ब्राउज़र दोनों को सपोर्ट करते हैं, यह टूल ज़्यादा कॉम्पैक्ट, पढ़ने योग्य विकल्प इस्तेमाल करता है।
क्या अविश्वसनीय सोर्स से SVG पेस्ट करना सुरक्षित है?
प्रीव्यू आपके SVG को '<img>' के रूप में रेंडर करता है, लाइव HTML के रूप में इंजेक्ट नहीं करता, इसलिए किसी मैलिशियस SVG के अंदर एम्बेडेड स्क्रिप्ट प्रीव्यू में एक्ज़िक्यूट नहीं होंगी। फिर भी, SVG फ़ाइलों को किसी भी अन्य फ़ाइल की तरह मानें, और केवल वही मार्कअप पेस्ट करें जिस पर आप भरोसा करते हैं।