SVG से Base64 - और आपको शायद दूसरा वाला चाहिए
यह टूल आपको वही base64 देता है जिसके लिए आप आए थे, और फिर वह चीज़ दिखाता है जो लगभग हर कन्वर्टर छोड़ देता है: SVG के लिए base64 छवि जोड़ने के दो तरीक़ों में से बुरा वाला है। base64 इसलिए बना था कि बाइनरी डेटा को टेक्स्ट रास्तों से सही-सलामत ले जाया जा सके। SVG पहले से ही टेक्स्ट है, इसलिए उसे एन्कोड करना आपसे उसके आकार का एक-तिहाई वसूलता है, एक ऐसी समस्या के लिए जो कभी थी ही नहीं। प्रतिशत-एन्कोडिंग वही काम उन गिने-चुने अक्षरों को बचाकर करती है जो URL तोड़ देते, और बाक़ी फ़ाइल को वैसा ही रहने देती है - तार पर हल्की, और तब भी दबने लायक, जो base64 काफ़ी हद तक नहीं है। यहाँ दोनों रूप जीवित बाइट गिनती के साथ बनते हैं, ताकि आप हमारी बात मानने के बजाय अपनी ही फ़ाइल पर फ़र्क़ देख सकें। सब कुछ आपके ब्राउज़र में चलता है, और कुछ भी निकलने से पहले SVG साफ़ की जाती है।
इस टूल का उपयोग कैसे करें
अपनी SVG छोड़ें
ऊपर वाले बक्से पर फ़ाइल खींचकर छोड़ें या चुनने के लिए क्लिक करें। वह एक्सटेंशन से नहीं, सामग्री से जाँची जाती है, और कोई भी स्क्रिप्ट, इवेंट हैंडलर या दूरस्थ संदर्भ एन्कोड करने से पहले हटा दिया जाता है - यह आउटपुट आपके पेज में जा रहा है, इसलिए पहले साफ़ होता है।
दोनों एन्कोडिंग की तुलना करें
पैनल स्रोत आकार, base64 data: URI का आकार और URL-एन्कोडेड data: URI का आकार एक साथ दिखाता है, प्रतिशत अंतर के साथ। जिन आइकनों पर हमने परखा, उनमें URL-एन्कोडेड रूप 14 से 18 प्रतिशत छोटा रहा।
जो रूप चाहिए वह कॉपी करें
पाँच स्निपेट, हर एक के अपने कॉपी बटन के साथ: कच्चा base64, दोनों data: URI, तैयार <img> टैग और एक CSS background-image घोषणा। जो आपके बिल्ड चरण या CMS फ़ील्ड को चाहिए वही उठा लीजिए।
आकार की चेतावनी पर ध्यान दें
लगभग 4 KB के बाद पैनल चेतावनी देता है। इनलाइन मार्कअप को उस पेज से अलग कैश नहीं किया जा सकता जो उसे ढो रहा है, इसलिए बड़ी data: URI हर उस पेज पर दोबारा उतरती है जो उसे शामिल करता है - उस आकार पर लिंक की गई फ़ाइल लगभग हमेशा बेहतर है।
अक्सर पूछे जाने वाले प्रश्न
base64 मूल SVG से कितना बड़ा होता है?
हमने जो चार फ़ाइलें मापीं उनमें लगभग 36% से 43% तक। 290 बाइट का आइकन 414 बाइट की base64 data: URI बना; URL-एन्कोडेड रूप 339 बाइट का रहा। base64 डिज़ाइन से ही हर तीन बाइट के लिए चार अक्षर लेता है, इसलिए उस बढ़त का एक-तिहाई ढाँचागत है और बाक़ी data: URI का उपसर्ग।
SVG के लिए URL-एन्कोडिंग छोटी क्यों पड़ती है?
क्योंकि गिने-चुने अक्षर ही बचाने पड़ते हैं। प्रतिशत-एन्कोडिंग %, #, कोण कोष्ठक और नई पंक्ति के लिए तीन-तीन बाइट देती है और बाक़ी सब वैसा ही छोड़ देती है। base64 फ़ाइल के हर बाइट पर तयशुदा 33% वसूलता है, चाहे वह जो भी हो। टेक्स्ट के लिए बचाने का कर तयशुदा कर से कहीं कम है।
क्या URL-एन्कोडेड रूप हर जगह चलता है?
हाँ, हर चालू ब्राउज़र में। base64 चिह्न के बिना data: URI सादा प्रतिशत-एन्कोडेड टेक्स्ट ही है, जो दोनों रूपों में पुराना और बेहतर समर्थित है। base64 सचमुच सिर्फ़ वहीं ज़रूरी है जहाँ कोई पाइपलाइन उसे मान बैठी हो, जैसे कुछ CMS फ़ील्ड और पुराने बिल्ड प्लगइन।
मेरे दोहरे उद्धरण चिह्न अपोस्ट्रॉफ़ी में क्यों बदल गए?
ताकि उन्हें बचाना न पड़े। SVG ज़्यादातर गुणों से ही बनी होती है, और हर सीमांकक को %22 के रूप में लिखना दो-दो बाइट लेता है। गुणों के सीमांकक अपोस्ट्रॉफ़ी बन जाते हैं और CSS मान दोहरे उद्धरण में लपेटा जाता है, इसलिए किसी को भी बचाने की ज़रूरत नहीं रहती। जिन मानों में पहले से अपोस्ट्रॉफ़ी है वे छुए नहीं जाते।
मुझे इनलाइन करना चाहिए या फ़ाइल लिंक करनी चाहिए?
छोटे और बार-बार इस्तेमाल होने वाले आइकन इनलाइन कीजिए; उससे बड़ा कुछ भी लिंक कीजिए। इनलाइन करने से एक अनुरोध बचता है, पर वे बाइट फिर हर उस पेज या स्टाइलशीट में बस जाते हैं जो आइकन इस्तेमाल करती है, और अलग से कैश नहीं हो पाते। 4 KB के आसपास गणित पलट जाता है, इसीलिए पैनल वहीं चेताता है।
क्या gzip से जवाब बदल जाता है?
वह फ़ासला घटाने के बजाय बढ़ा देता है। प्रतिशत-एन्कोडेड SVG अब भी पहचानने लायक टेक्स्ट है जिसमें टैग और गुणों के नाम दोहराते हैं, इसलिए कंप्रेसर को काम करने लायक बहुत कुछ मिलता है। base64 आउटपुट कंप्रेसर की नज़र में लगभग बेतरतीब लगता है और मुश्किल से सिकुड़ता है।
क्या एन्कोड करने से पहले मेरी SVG साफ़ की जाती है?
हाँ, और यहाँ यह पिक्सेल देने वाले कन्वर्टर से ज़्यादा मायने रखता है। स्क्रिप्ट, on* इवेंट हैंडलर, दूरस्थ छवि संदर्भ और बाहरी स्टाइलशीट आयात हटा दिए जाते हैं, और पैनल बताता है कि क्या मिला। इनलाइन चिपकाई गई बिना-साफ़ SVG वह सब चला देती है जो उसमें है।
क्या data: URI को फ़ेविकॉन या ईमेल में इस्तेमाल कर सकता हूँ?
फ़ेविकॉन के रूप में नहीं - ब्राउज़र वहाँ असली URL चाहते हैं। ईमेल में भी नहीं: सभी बड़े क्लाइंट SVG को पूरी तरह रोक देते हैं, data: URI हो या न हो। data: URI आपके अपने वेब पेज और स्टाइलशीट के लिए हैं। ईमेल के लिए पहले SVG को PNG में बदलिए और उसे संलग्न या होस्ट कीजिए।
इनलाइन करने के बाद मेरा आइकन काला क्यों दिख रहा है?
क्योंकि उसमें currentColor था। data: URI अलग दस्तावेज़ है जो उसे बुलाने वाले तत्व का रंग नहीं ले सकता, इसलिए currentColor अपने शुरुआती मान पर गिर जाता है। हमारा SVG-से-CSS टूल इसे पकड़ लेता है और आपको mask-image वाला स्निपेट देता है, जो आकृति को तत्व के अपने टेक्स्ट रंग से भरता है।
data: URI है तो <img> टैग किसलिए?
सुविधा, और alt गुण। स्निपेट में alt="" पहले से लगा आता है, जो सजावटी आइकन के लिए सही मान है और वही जो लोग भूल जाते हैं - जिस छवि में alt गुण है ही नहीं उसे स्क्रीन रीडर उसके फ़ाइल नाम से पुकारते हैं, और data: URI में वह अक्षरों की दीवार होती है।
क्या मेरी फ़ाइलें कहीं अपलोड होती हैं?
नहीं। एन्कोडिंग कुछ पंक्तियों का गणित है जो आपके ब्राउज़र में चलता है, इसलिए आपकी फ़ाइल कभी सर्वर पर नहीं जाती, कभी संग्रहीत नहीं होती और हम उसे कभी नहीं देखते। इसका मतलब यह भी है कि कोई कतार नहीं और आपके डिवाइस की स्मृति के अलावा कोई आकार सीमा नहीं।
आपको इनकी भी ज़रूरत हो सकती है
कुछ काम नहीं कर रहा? बग रिपोर्ट करें