SVG से HTML

SVG को ऑनलाइन HTML में कन्वर्ट करें

SVG फ़ाइल चुनें या उसका मार्कअप पेस्ट करें, और HTML पेज के लिए इनलाइन SVG पाएँ। नतीजे का प्रीव्यू देखें, ऑप्टिमाइज़ेशन की सेटिंग बदलें और कोड कॉपी करें। पार्सिंग, ऑप्टिमाइज़ेशन और कन्वर्ज़न, सब कुछ आपके ब्राउज़र में ही होता है, आपका SVG किसी सर्वर पर नहीं भेजा जाता।

रिस्पॉन्सिव इनलाइन SVG तैयार करें

SVG का कोऑर्डिनेट सिस्टम बनाए रखने के लिए viewBox रखें। अगर SVG में इस्तेमाल लायक viewBox है, तो तय चौड़ाई और ऊँचाई हटाएँ और फिर अपनी CSS में उसका साइज़ तय करें।

SVG का साइज़ और बचत समझें

“मूल साइज़” आपके इनपुट SVG का साइज़ है। “ऑप्टिमाइज़ किए गए SVG का साइज़” वह साइज़ है, जो आपके चुने गए विकल्पों से प्रोसेस होने के बाद रहता है, जैसे कमेंट हटाना, कोऑर्डिनेट राउंड करना और कोड मिनिफ़ाई करना। साइज़ kB में दिखाए जाते हैं, जहाँ 1 kB बराबर 1,000 बाइट है। “बचत” प्रतिशत में हुई कमी है: 10 kB से 7 kB होने पर 30% की बचत होती है। अगर आउटपुट बड़ा हो, जैसे पढ़ने में आसान फ़ॉर्मैटिंग की वजह से, तो उसकी जगह “साइज़ में बढ़ोतरी” दिखाई जाती है। ये आँकड़े SVG मार्कअप की तुलना करते हैं, JSX, React, CSS Data URI या Base64 एक्सपोर्ट के साइज़ की नहीं।

दशमलव सटीकता और इंडेंटेशन

“दशमलव सटीकता” तय करती है कि कोऑर्डिनेट और संख्या वाले एट्रिब्यूट में दशमलव बिंदु के बाद कितने अंक रखे जाएँ। सटीकता 2 होने पर 12.34567, 12.35 बन जाता है। कम दशमलव स्थानों से फ़ाइल का साइज़ घट सकता है, लेकिन बारीक विवरण बदल सकते हैं; डिफ़ॉल्ट 3 सिर्फ़ शुरुआत के लिए है, इसलिए प्रीव्यू जाँच लें। इंडेंटेशन में 2 स्पेस, 4 स्पेस या टैब का इस्तेमाल होता है, ताकि इमेज बदले बिना HTML और JSX कोड पढ़ना आसान हो। “SVG मिनिफ़ाई करें” आउटपुट को छोटा करने के लिए फ़ॉर्मैटिंग की ग़ैर-ज़रूरी खाली जगह हटा देता है, इसलिए मिनिफ़िकेशन चालू रहने पर इंडेंटेशन बंद रहता है।

HTML, JSX, React और SVG Data URI

HTML आउटपुट इनलाइन SVG मार्कअप है और SVG फ़ाइल के रूप में डाउनलोड होता है। JSX, React के लिए एट्रिब्यूट के नाम और इनलाइन स्टाइल बदल देता है। “React कॉम्पोनेंट” इसे एक TypeScript फ़ंक्शन में लपेटता है, जो सामान्य SVG props स्वीकार करता है। CSS Data URI एक background-image डिक्लेरेशन बनाता है; Base64 एक एन्कोड की गई SVG इमेज URI बनाता है। साइज़ के आँकड़े ऑप्टिमाइज़ किए गए SVG के हैं, बड़े एन्कोड किए गए फ़ॉर्मैट के नहीं। एक ही पेज पर कई इनलाइन कॉपी इस्तेमाल करने से पहले ID जाँच लें।

स्टैटिक और लोकल SVG वर्कफ़्लो

प्रीव्यू एक अलग इमेज के रूप में दिखता है, पेज पर चलने वाले मार्कअप के रूप में नहीं। स्क्रिप्ट, एम्बेड किया गया HTML, एनिमेशन, बाहरी इमेज और स्टाइल शीट हटा दिए जाते हैं। समर्थित इनलाइन प्रेज़ेंटेशन स्टाइल और लोकल फ़्रैगमेंट रेफ़रेंस बने रहते हैं। यह टूल स्टैटिक आर्टवर्क के लिए है; असमर्थित फ़ीचर से उसका रूप बदल सकता है। currentColor ठोस फ़िल और स्ट्रोक बदलता है और इनलाइन इस्तेमाल होने पर अपना रंग आसपास से लेता है; इमेज प्रीव्यू का अपना कलर कॉन्टेक्स्ट होता है।