श्रेणी: डेवलपर टूल
SVG से CSS बैकग्राउंड
इनलाइन SVG मार्कअप को background-image डेटा URI में बदलें
SVG मार्कअप पेस्ट करें और CSS background-image डेटा URI पाएँ, साथ में background-repeat, background-size और background-position लाइनें, और कॉपी करने से पहले जाँचने के लिए लाइव पूर्वावलोकन।
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='2'%3E %3Ccircle cx='12' cy='12' r='9' /%3E %3Cpath d='M8 12h8M12 8v8' /%3E %3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center;SVG कभी ब्राउज़र से बाहर नहीं जाता; उसे सीधे CSS मान में एन्कोड कर दिया जाता है।
इस पेज पर सब कुछ आपके ब्राउज़र में संसाधित होता है। कुछ भी अपलोड नहीं होता।
यह टूल क्या करता है
छोटा SVG आइकन या पैटर्न अक्सर अलग इमेज रिक्वेस्ट के बजाय इनलाइन CSS डेटा URI के रूप में हल्का पड़ता है, लेकिन मार्कअप को हाथ से इस तरह एन्कोड करना कि वह url(...) मान के अंदर बचा रहे, गलती करने में आसान है: कोट्स, एंगल ब्रैकेट और लाइन ब्रेक सबको सावधानी से एस्केप करना पड़ता है। यह टूल वह एन्कोडिंग आपके लिए करता है, नतीजे को बेस64 पर जाने के बजाय छोटा और पढ़ने लायक रखता है, और आपकी चुनी दोहराव व आकार सेटिंग पर लाइव बैकग्राउंड पूर्वावलोकन दिखाता है।
इस्तेमाल कैसे करें
- जो SVG मार्कअप बैकग्राउंड के रूप में इस्तेमाल करना है उसे पेस्ट करें।
- चुनें कि वह कैसे दोहराए और स्केल हो।
- CSS घोषणा कॉपी करें और इसे अपनी स्टाइलशीट में पेस्ट करें।
निजता
यह टूल पूरी तरह आपके ब्राउज़र में चलता है। आपका डेटा कभी अपलोड, सेव या साझा नहीं होता — टैब बंद करते ही वह हट जाता है।
अक्सर पूछे जाने वाले सवाल
- क्या यह SVG को बेस64-एन्कोड करने जैसा ही है?
- नहीं। यह केवल उन गिने-चुने कैरेक्टर को एस्केप करता है जो CSS मान को तोड़ सकते हैं, जिससे डेटा URI बेस64 ब्लॉक के मुक़ाबले काफ़ी छोटा और फिर भी इंसानों के पढ़ने लायक बना रहता है।
- क्या SVG अपलोड होता है?
- नहीं। एन्कोडिंग आपके ब्राउज़र टैब में साधारण स्ट्रिंग रिप्लेसमेंट से होती है; आपका पेस्ट किया मार्कअप पेज से बाहर कभी नहीं जाता।
- क्या मैं SVG के अंदर currentColor या CSS वेरिएबल इस्तेमाल कर सकता हूँ?
- currentColor काम करता है क्योंकि इसे ब्राउज़र पेंट के समय हल करता है, लेकिन SVG के अपने एट्रिब्यूट के अंदर रेफ़र किए CSS कस्टम प्रॉपर्टी काम नहीं करतीं, क्योंकि background-image डेटा URI स्थिर मार्कअप है, जीवंत स्टाइलशीट नहीं।