Base64 से SVG डिकोडर

Base64 के अंदर SVG पहचानना

दूसरे इमेज फ़ॉर्मैट के विपरीत, SVG सादा XML टेक्स्ट है। <svg से शुरू होने वाली फ़ाइल का Base64 PHN2Zy से शुरू होता है, और XML डिक्लेरेशन (<?xml) से शुरू होने वाली फ़ाइल का PD94bWwg से। Base64 SVG अक्सर CSS बैकग्राउंड इमेज, आइकन सेट, डिज़ाइन टूल के एक्सपोर्ट और ईमेल टेम्पलेट में मिलते हैं। MIME टाइप image/svg+xml है।

कई SVG data URI असल में Base64 होते ही नहीं, बल्कि परसेंट-एनकोड किया गया टेक्स्ट होते हैं, जैसे data:image/svg+xml,%3Csvg...। यह टूल Base64 की अपेक्षा करता है, इसलिए ऐसे URI को Data URI जनरेटर से पार्स करें।

SVG कोड पढ़ना

पूर्वावलोकन दिखाता है कि ग्राफ़िक कैसा रेंडर होता है, लेकिन अक्सर दिलचस्प हिस्सा मार्कअप होता है: पाथ डेटा, रंग, viewBox या एम्बेड किए गए फ़ॉन्ट। फ़ाइल को “मूल फ़ाइल” या SVG के रूप में डाउनलोड करके किसी भी टेक्स्ट एडिटर में खोलें, या XML को तुरंत टेक्स्ट के रूप में देखने के लिए वही Base64 Base64 डिकोड में पेस्ट करें।

रास्टर से SVG केवल रैपर है, वेक्टराइज़ेशन नहीं

अगर Base64 डेटा PNG, JPEG या कोई अन्य बिटमैप है, तो SVG चुनने पर ऐसी SVG फ़ाइल बनती है जिसमें मूल पिक्सेल एक <image> एलिमेंट के अंदर होते हैं। यह तब काम आता है जब कोई टूल केवल SVG फ़ाइलें स्वीकार करता है, लेकिन यह तस्वीर को ट्रेस करके आकृतियों में नहीं बदलता: बड़ा करने पर इमेज अब भी धुंधली होती है, और फ़ाइल बिटमैप से बड़ी होती है, क्योंकि पिक्सेल उसके अंदर Base64 के रूप में रखे जाते हैं। असली वेक्टर पाथ के लिए Potrace या Inkscape के Trace Bitmap फ़ीचर जैसे ट्रेसिंग सॉफ़्टवेयर का उपयोग करें।

अविश्वसनीय SVG को संभालना

SVG में <script> एलिमेंट, इवेंट हैंडलर एट्रिब्यूट और बाहरी संसाधनों के लिंक हो सकते हैं। जब SVG को इमेज के रूप में, यानी <img> टैग या CSS बैकग्राउंड से दिखाया जाता है, तो ब्राउज़र इन सबको ब्लॉक कर देते हैं। लेकिन जब फ़ाइल सीधे ब्राउज़र टैब में खोली जाती है या उसका मार्कअप किसी पेज में इनलाइन पेस्ट किया जाता है, तो स्क्रिप्ट चल सकती हैं और बाहरी संसाधन लोड हो सकते हैं। अनजान स्रोतों से आए SVG को इस तरह इस्तेमाल करने से पहले उसकी समीक्षा करें या उसे सैनिटाइज़ करें।