SVG से CSS कनवर्टर

यह मुफ्त ऑनलाइन SVG to CSS कनवर्टर SVG कोड को URL encoding या Base64 encoding का उपयोग करके CSS-तैयार data URIs में बदलता है। यह तीन आउटपुट फॉर्मेट्स — CSS background-image, CSS custom property, और HTML img tag — को लाइव प्रीव्यू और encoding मोड्स के बीच फ़ाइल साइज़ की तुलना के साथ सपोर्ट करता है। किसी साइनअप की आवश्यकता नहीं है, यह पूरी तरह से आपके ब्राउज़र में चलता है और कोई फ़ाइल अपलोड नहीं करता है।

सभी डेवलपर टूल ब्राउज़ करें

उपयोग कैसे करें

अपना SVG कोड एडिटर में पेस्ट करें या एक उदाहरण देखने के लिए Load Sample पर क्लिक करें। URL Encoded या Base64 encoding मोड चुनें और अपना आउटपुट फॉर्मेट चुनें: सीधे property उपयोग के लिए CSS background-image, design system variables के लिए CSS Custom Property, या markup embedding के लिए HTML img tag। जैसे ही आप टाइप करते हैं, आउटपुट लाइव अपडेट होता है। अपने stylesheet में उपयोग के लिए CSS या data URI को अपने क्लिपबोर्ड पर कॉपी करने के लिए Copy output पर क्लिक करें।

सामान्य उपयोग के मामले

• •Front-end developers जो SVG आइकनों को CSS background images के रूप में stylesheets में एम्बेड करते हैं, वे इस टूल का उपयोग icon SVGs को data URIs में बदलने और HTTP requests को खत्म करने के लिए कर सकते हैं, जिससे icon-heavy interfaces के लिए पेज लोड प्रदर्शन में सुधार होता है।
• •Component libraries बनाने वाले Design system engineers icon SVGs को CSS custom properties में बदल सकते हैं, जिससे markup बदले बिना या अतिरिक्त image assets आयात किए बिना CSS variables के माध्यम से theme-level icon swapping सक्षम होती है।
• •Email template developers जिन्हें एम्बेडेड छवियों के साथ self-contained HTML की आवश्यकता होती है, वे HTML img tag आउटपुट का उपयोग SVG लोगो और आइकनों को सीधे email markup में इनलाइन करने के लिए कर सकते हैं, जिससे email clients में बाहरी छवि लोडिंग को ब्लॉक होने से रोका जा सकता है।
• •Performance-conscious developers यह मूल्यांकन करने के लिए size comparison feature का उपयोग कर सकते हैं कि किसी विशिष्ट SVG के लिए URL encoding या Base64 एक छोटा data URI उत्पन्न करता है या नहीं, अपने उपयोग के मामले के लिए सबसे bandwidth-efficient encoding का चयन करते हुए।
• •ऐसे वातावरण में काम करने वाले Developers जहाँ SVG फ़ाइलों को static assets के रूप में नहीं परोसा जा सकता है, वे सभी SVG आइकनों को CSS data URIs के रूप में इनलाइन कर सकते हैं ताकि फ़ाइल निर्भरता को खत्म किया जा सके और deployment को सरल बनाया जा सके।

ब्रेक लें और मुफ़्त ब्राउज़र गेम्स खेलें