उपयोग कैसे करें
- कोई .svg फ़ाइल ड्रॉप एरिया पर खींचकर छोड़ें, चुनने के लिए क्लिक करें, या कोई इमेज पेस्ट करें।
- SVG मार्कअप को ही एनकोड करने के लिए “मूल फ़ॉर्मैट रखें” चुनें, या उसे पिक्सेल में बदलने के लिए PNG, JPEG या WebP चुनें।
- अगर आप उसे रास्टराइज़ करते हैं, तो पिक्सेल आकार नियंत्रित करने के लिए “अधिकतम चौड़ाई” सेट करें।
- स्टाइलशीट के लिए CSS बैकग्राउंड इमेज वाला आउटपुट कॉपी करें, या data URI, रॉ Base64, img टैग या Markdown वर्ज़न लें।
data URI के रूप में SVG
SVG (Scalable Vector Graphics, MIME टाइप image/svg+xml) आकृतियों को XML टेक्स्ट के रूप में बताता है, इसलिए यह हर आकार में साफ़ दिखता है। इसका Base64 आमतौर पर PHN2Zy (एनकोड किया गया <svg) से शुरू होता है, या PD94bWw से, जब फ़ाइल XML डिक्लेरेशन से शुरू होती है।
जब SVG को इमेज के रूप में इस्तेमाल किया जाता है, तो रूट एलिमेंट पर xmlns="http://www.w3.org/2000/svg" होना ज़रूरी है। HTML से कॉपी किए गए कई इनलाइन स्निपेट में यह नहीं होता, और तब data URI कुछ भी नहीं दिखाता। इमेज मोड में बाहरी संसाधन भी ब्लॉक रहते हैं, इसलिए SVG के अंदर के वेब फ़ॉन्ट और लिंक की गई इमेज लोड नहीं होंगी; पहले टेक्स्ट को पाथ में बदलें या उन संसाधनों को एम्बेड करें।
Base64 या URL-एनकोडिंग?
चूँकि SVG पहले से ही टेक्स्ट है, data URI मार्कअप को सीधे ले जा सकता है, जिसमें केवल कुछ अक्षर परसेंट-एनकोड करने पड़ते हैं (<, >, #, % और कोट)। CSS में किसी सामान्य आइकन के लिए यह Base64 से छोटा होता है और gzip से बेहतर कंप्रेस होता है। जब स्ट्रिंग ऐसे सिस्टम से गुज़रती हो जो कोट या विशेष अक्षरों को बिगाड़ देते हैं, या जब कोई API Base64 की अपेक्षा करता हो, तब Base64 ज़्यादा सुरक्षित विकल्प है।
/* Base64 */
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
/* परसेंट-एनकोडेड */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...");परसेंट-एनकोडेड रूप बनाने के लिए Data URI जनरेटर का उपयोग करें और “परसेंट-एनकोडिंग” चुनें।
अविश्वसनीय SVG को सैनिटाइज़ करें
SVG में <script> एलिमेंट, onload जैसे इवेंट हैंडलर एट्रिब्यूट और दूसरे दस्तावेज़ों के लिंक हो सकते हैं। <img> या CSS बैकग्राउंड के ज़रिए दिखाए गए SVG में ब्राउज़र स्क्रिप्ट नहीं चलाते, लेकिन वही फ़ाइल HTML में इनलाइन करने पर या अलग से खोलने पर उन्हें चला सकती है। अगर उपयोगकर्ता आपके एप्लिकेशन में SVG फ़ाइलें अपलोड कर सकते हैं, तो उन्हें सहेजने या एम्बेड करने से पहले सैनिटाइज़ करें, उदाहरण के लिए DOMPurify से। Base64 मार्कअप को केवल सरसरी नज़र से छिपाता है; यह उसे सुरक्षित नहीं बनाता।
अक्सर पूछे जाने वाले प्रश्न
SVG के लिए Base64 बेहतर है या URL-एनकोडिंग?
CSS में SVG के लिए URL-एनकोडिंग आमतौर पर छोटी होती है और पढ़ने योग्य रहती है। जब स्ट्रिंग दूसरे सिस्टम से गुज़रती हो या कोई API Base64 माँगता हो, तब Base64 ज़्यादा भरोसेमंद है।
मेरा SVG data URI दिखाई क्यों नहीं देता?
xmlns एट्रिब्यूट का न होना, परसेंट-एनकोड किए गए URI में बिना एस्केप किया गया #, और ऐसे फ़ॉन्ट या इमेज जिन्हें SVG दूसरी फ़ाइलों से लोड करता है।क्या SVG को PNG Base64 स्ट्रिंग में बदला जा सकता है?
हाँ। “इसमें बदलें” में PNG चुनें। ब्राउज़र SVG को पिक्सेल में रेंडर करता है, और “अधिकतम चौड़ाई” विकल्प से आप परिणाम को छोटा कर सकते हैं।