UTILS.
100% ब्राउज़र में
🖼️

SVG से CSS / Data-URI एनकोडर

SVG मार्कअप को URL-एनकोडेड या base64 data URI के रूप में एनकोड करें, पेस्ट के लिए तैयार CSS background-image और <img> लाइनों के साथ। वैकल्पिक मिनिफ़ाई।

— आउटपुट यहाँ दिखेगा —
— आउटपुट यहाँ दिखेगा —
— आउटपुट यहाँ दिखेगा —

इस टूल के बारे में

कच्चा SVG मार्कअप पेस्ट करें और एक data URI पाएं जिसे आप सीधे CSS या HTML में डाल सकते हैं। यह दो एनकोडिंग बनाता है और सब कुछ आपके ब्राउज़र में जेनरेट होता है, इसलिए कुछ भी अपलोड नहीं होता।

URL-एनकोडेड आउटपुट डबल कोट्स को सिंगल कोट्स से बदलता है, encodeURIComponent चलाता है, फिर कुछ सुरक्षित कैरेक्टर (स्पेस, कोलन, स्लैश, इक्वल्स) को बहाल करता है ताकि इसे संक्षिप्त और मानव-पठनीय रखा जा सके। base64 आउटपुट SVG को UTF-8 एनकोड करता है और इसे btoa के माध्यम से चलाता है, जिससे data:image/svg+xml;base64,… मिलता है। एक बाइट तुलना दिखाती है कि कौन सी एनकोडिंग छोटी है; अधिकांश आइकन के लिए URL-एनकोडेड रूप जीतता है।

एनकोड करने से पहले टिप्पणियाँ हटाने और टैग के बीच व्हाइटस्पेस को संक्षिप्त करने के लिए मिनिफ़ाई सक्षम करें। CSS के लिए background-image लाइन या HTML के लिए <img src> लाइन कॉपी करें। ध्यान दें कि SVG के अंदर के कोट्स सिंगल कोट्स में सामान्यीकृत किए जाते हैं ताकि data URI को डबल कोट्स में सुरक्षित रूप से लपेटा जा सके।

अक्सर पूछे जाने वाले प्रश्न

URL-एनकोडेड या base64 — मुझे कौन सा उपयोग करना चाहिए?
URL-एनकोडेड आमतौर पर छोटा होता है और पठनीय रहता है, जो डिबगिंग में मदद करता है। Base64 अधिक अपारदर्शी है पर सार्वभौमिक रूप से स्वीकृत है; साइज़ तुलना आपको बताती है कि यहाँ कौन सा छोटा है।
मेरे डबल कोट्स को सिंगल कोट्स में क्यों बदला गया?
एट्रिब्यूट कोट्स को सिंगल कोट्स में बदला जाता है ताकि पूरा data URI बिना एस्केप किए एक डबल-कोटेड url("…") या src="…" के अंदर बैठ सके। दोनों SVG में मान्य हैं।
क्या मिनिफ़ाई SVG के दिखने के तरीके को बदलता है?
नहीं। यह केवल टिप्पणियाँ हटाता है और टैग के बीच और अंदर व्हाइटस्पेस को संक्षिप्त करता है; रेंडर किया गया वेक्टर समान है, बस छोटा।
क्या मेरा SVG कहीं अपलोड होता है?
नहीं। एनकोडिंग पूरी तरह आपके ब्राउज़र में encodeURIComponent और btoa के साथ चलती है; मार्कअप कभी आपके डिवाइस से बाहर नहीं जाता।

और टूल