SVG के लिए URL-एनकोडर
सांकेतिक शब्दों में बदलना एसवीजी का उपयोग सीएसएस के साथ किया जाना है
परिणाम
यह टूल रॉ SVG कोड को URL-एनकोडेड Data URI में बदलता है, जिसे आप सीधे CSS के `background-image` या HTML के `<img src>` में पेस्ट कर सकते हैं, अलग इमेज फ़ाइल या होस्टिंग की ज़रूरत नहीं। यह छोटे आइकन और इलस्ट्रेशन को सीधे अपनी स्टाइलशीट या मार्कअप में इनलाइन करने का तेज़ तरीक़ा है।
ऐसा SVG कोड पेस्ट करें और तैयार Data URI पाएं:
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><circle cx="5" cy="5" r="4"/></svg>
→
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' ...%3E
फ़ाइल को लिंक करने के बजाय SVG को क्यों एनकोड करें?
इनलाइन Data URI एक अलग HTTP रिक्वेस्ट बचाता है, जो छोटे आइकन के लिए फ़ायदेमंद है जो वरना पेज में अतिरिक्त राउंड-ट्रिप जोड़ देते।
क्या एनकोडिंग से SVG का लुक बदल जाता है?
नहीं, एनकोडिंग सिर्फ़ SVG को टेक्स्ट के रूप में दिखाने का तरीक़ा बदलती है। रेंडर हुई इमेज मूल फ़ाइल जैसी ही रहती है।
क्या मैं आउटपुट सीधे CSS में इस्तेमाल कर सकता हूं?
हां, एनकोड किया स्ट्रिंग CSS के `background-image` या `content` प्रॉपर्टी में `()url` के अंदर पेस्ट करने के लिए तैयार है।
क्या एनकोडिंग की कोई साइज़ सीमा है?
बहुत बड़े SVG भी काम करते हैं लेकिन लंबा Data URI बनाते हैं, इसलिए यह तरीक़ा छोटे आइकन के लिए ही बेहतर है, जटिल इलस्ट्रेशन के लिए नहीं।