SVG से CSS - ऐसा background-image जो वाक़ई चलता है
SVG को स्टाइलशीट में चिपकाना दो ख़ास तरीक़ों से नाकाम होता है, और दोनों चुपचाप। एस्केपिंग ग़लत हुई तो किसी भराई के रंग में बिना बदला हैश URL काट देता है, इसलिए नियम बिना गड़बड़ी के पढ़ा जाता है और छवि बस कभी दिखती ही नहीं। कलाकृति में currentColor इस्तेमाल किया तो वह उसी क्षण रंग बदलना बंद कर देता है जब वह data: URI बन जाती है, क्योंकि URI एक अलग दस्तावेज़ है जिसके पास विरासत में लेने को कुछ नहीं। यह टूल पहला काम आपके लिए कर देता है और दूसरे के बारे में चेता देता है, और आपको ऐसी background-image घोषणा देता है जिसे आप जस का तस चिपका सकते हैं। यह base64 के बजाय URL-एन्कोडेड रूप इस्तेमाल करता है, जो SVG के लिए छोटा भी है और बेहतर दबता भी है। सब कुछ आपके डिवाइस पर चलता है, और कुछ भी बनने से पहले फ़ाइल साफ़ की जाती है।
इस टूल का उपयोग कैसे करें
अपनी SVG छोड़ें
ऊपर वाले बक्से पर फ़ाइल खींचकर छोड़ें या चुनने के लिए क्लिक करें। स्क्रिप्ट, इवेंट हैंडलर और दस्तावेज़ के बाहर के संदर्भ कुछ भी बनने से पहले हटा दिए जाते हैं, और पैनल बता देता है कि उसने क्या निकाला।
background-image नियम कॉपी करें
पहला स्निपेट पूरी घोषणा है जिसमें data: URI पहले से बची और उद्धृत है - उसे सीधे किसी नियम में चिपका दीजिए। उसके नीचे उन पाइपलाइनों के लिए base64 वाला रूप है जो उसी पर अड़ी हों, दोनों की बाइट गिनती के साथ।
currentColor की चेतावनी देखें
अगर आपकी कलाकृति currentColor इस्तेमाल करती है तो एक सूचना आती है जो बताती है कि वह काली क्यों दिखेगी और बदले में mask-image वाला स्निपेट देती है। वह स्निपेट आकृति को तत्व के अपने टेक्स्ट रंग से भरता है, जो सबसे नज़दीकी चलने वाला विकल्प है।
आकार वाले गुण जोड़ें
अकेला background-image कलाकृति के अपने आकार पर दोहराता रहता है। इसे नियंत्रित करने के लिए background-size और background-repeat: no-repeat जोड़िए, या mask वाला स्निपेट लीजिए जिसमें दोनों पहले से हैं।
अक्सर पूछे जाने वाले प्रश्न
कौन-से अक्षर बचाने पड़ते हैं?
पाँच, और साथ में पंक्ति विराम। प्रतिशत चिह्न सबसे पहले जाना चाहिए वरना वह ख़ुद बचावों को ही बचा देता। फिर हैश, जो वरना URL का टुकड़ा शुरू कर देता है और आपके पहले हेक्स रंग के बाद सब काट देता है। फिर कोण कोष्ठक, जो HTML गुण तोड़ देते हैं, और मान लपेटने वाला दोहरा उद्धरण चिह्न।
मेरा background-image दिख ही नहीं रहा। क्यों?
लगभग हमेशा कोई बिना बचाया हुआ हैश। बिना बचाई data: URI के भीतर #c33 की भराई URL को हैश पर ही ख़त्म कर देती है, इसलिए ब्राउज़र कटा हुआ दस्तावेज़ माँगता है, काम लायक कुछ नहीं पाता और कुछ नहीं दिखाता - बिना किसी कंसोल त्रुटि के, क्योंकि CSS के हिसाब से नियम पूरी तरह वैध था।
data: URI में currentColor काम करना क्यों बंद कर देता है?
क्योंकि data: URI एक अलग दस्तावेज़ है। currentColor उस तत्व की गणना की गई color संपत्ति से हल होता है जिसमें SVG है, और छवि के रूप में लदी SVG के पास ऐसा कोई तत्व है ही नहीं - वह आपके पेज के वृक्ष का हिस्सा नहीं है। वह अपने शुरुआती मान पर गिर जाता है, और वह काला है।
mask-image वाला उपाय क्या है?
आप SVG को छवि के बजाय साँचे की तरह इस्तेमाल करते हैं। background-color को currentColor कर दीजिए ताकि तत्व विरासत में मिले टेक्स्ट रंग से रंगे, फिर अपनी data: URI के साथ mask-image लगाइए ताकि सिर्फ़ कलाकृति की आकृति दिखे। Safari के लिए साथ में -webkit-mask-image भी रखिए।
क्या CSS में base64 इस्तेमाल करना चाहिए?
बहुत कम। base64 उसी छवि को स्टाइलशीट के भीतर लगभग पाँचवाँ हिस्सा बड़ा कर देता है और कहीं बुरा दबता है, क्योंकि gzip को वह शोर जैसा लगता है। इसे तभी उठाइए जब कोई बिल्ड टूल या CMS प्रतिशत-एन्कोडेड रूप ठुकरा दे, और इसीलिए यह पन्ना दोनों देता है।
क्या url() मान के चारों ओर इकहरे उद्धरण लगा सकता हूँ?
इस आउटपुट के साथ नहीं, और यह जान-बूझकर है। SVG के भीतर गुणों के सीमांकक अपोस्ट्रॉफ़ी बना दिए जाते हैं ताकि उन्हें बचाना न पड़े, और आकार की ज़्यादातर बचत वहीं से आती है। इससे दोहरा उद्धरण ही इकलौता सुरक्षित आवरण बचता है - अपोस्ट्रॉफ़ी मान को समय से पहले ख़त्म कर देगा।
क्या यह CSS कस्टम प्रॉपर्टी में चलता है?
हाँ। पूरे url("…") मान को किसी कस्टम प्रॉपर्टी में रख दीजिए और जहाँ चाहिए वहाँ बुला लीजिए, यह लंबी data: URI को नियम के बीच से हटाने का सुथरा तरीक़ा है। कस्टम प्रॉपर्टी मान को टोकन शृंखला की तरह लेती हैं, इसलिए यहाँ की एस्केपिंग पहले से ही सही है।
स्टाइलशीट के लिए कितना बड़ा ज़्यादा हो जाता है?
लगभग 4 KB SVG स्रोत, जहाँ पैनल चेताता है। CSS में पड़ी data: URI हर उस आगंतुक तक उतरती है जो वह स्टाइलशीट लोड करता है, चाहे वह नियम कभी लगे या नहीं, और वह अलग से कैश नहीं होती। उस सीमा से नीचे यह आम तौर पर एक अतिरिक्त अनुरोध से बेहतर है; ऊपर आम तौर पर नहीं।
क्या पूरा चित्र स्टाइलशीट में डाल सकता हूँ?
डाल तो सकते हैं, पर शायद नहीं डालना चाहिए। चित्र दसियों किलोबाइट के होते हैं, और उनका हर बाइट हर उस व्यक्ति तक उतरता है जो स्टाइलशीट लोड करता है, चाहे नियम कभी लागू हो या न हो। आइकन और छोटी सजावटी आकृतियाँ ही वह चीज़ हैं जिनके लिए data: URI बनी हैं; असली बारीकी वाली किसी भी चीज़ की अपनी फ़ाइल होनी चाहिए।
क्या ब्राउज़र इनलाइन छवि को कैश करेगा?
सिर्फ़ उस स्टाइलशीट के हिस्से के रूप में जिसमें वह है, और यही सौदा है। न अलग कैश प्रविष्टि, न अलग अनुरोध, इसलिए पहली बार आना तेज़ रहता है, और स्टाइलशीट में बाद का कोई भी बदलाव छवि को उसके साथ दोबारा उतार लाता है। हर पन्ने पर इस्तेमाल होने वाले आइकन के लिए यह आम तौर पर अच्छा सौदा है।
क्या कुछ सर्वर पर भेजा जाता है?
नहीं। एस्केपिंग आपके ब्राउज़र में चलती है, इसलिए फ़ाइल कभी आपके डिवाइस से बाहर नहीं जाती, कभी संग्रहीत नहीं होती और हम उसे कभी नहीं देखते। इसका मतलब यह भी है कि इंतज़ार करने को कुछ नहीं - फ़ाइल पढ़ते ही स्निपेट सामने आ जाते हैं।
आपको इनकी भी ज़रूरत हो सकती है
कुछ काम नहीं कर रहा? बग रिपोर्ट करें