SVG प्लेसहोल्डर जनरेटर

डेटा URI एक नेटवर्क अनुरोध नहीं है

प्लेसहोल्डर सेवाएँ तब तक सुविधाजनक होती हैं जब तक कि अचानक ऐसा न हो जाए: डोमेन आपकी दर सीमित कर देता है, ऑफ़िस प्रॉक्सी उसे रोक देता है, आप किसी विमान में डेमो देते हैं, या सेवा चुपचाप अपना आउटपुट बदल देती है और आपके आधे मॉकअप खिसक जाते हैं। इनमें से हर विफलता का कारण एक ही चीज़ है - प्लेसहोल्डर किसी और के सर्वर पर रहता है।

एक SVG डेटा URI में ऐसी कोई निर्भरता नहीं होती। पूरी छवि आपके मार्कअप में पड़ी एक स्ट्रिंग है, इसलिए यह ऑफ़लाइन, किसी ईमेल क्लाइंट के अंदर, किसी स्थिर निर्यात में और तीन साल बाद ली गई किसी स्क्रीनशॉट में समान रूप से प्रस्तुत होती है। इसमें लेटेंसी की भी कोई लागत नहीं है: कोई DNS लुकअप नहीं, कोई कनेक्शन नहीं, कोई राउंड ट्रिप नहीं। विकास के दौरान बीस प्लेसहोल्डर वाले पृष्ठ के लिए, यह अंतर बहुत स्पष्ट होता है।

base64 के बजाय URL-एन्कोडेड रखें

इस उपकरण द्वारा उत्सर्जित डेटा URI प्रतिशत-एन्कोडेड है, base64 नहीं। दोनों वैध हैं, लेकिन SVG के लिए प्रतिशत-एन्कोडिंग बेहतर डिफ़ॉल्ट है, इसके दो कारण हैं।

पहला आकार है। Base64 पेलोड को लगभग एक तिहाई तक फूला देता है, जबकि प्रतिशत-एन्कोडिंग केवल उन हाथों-गिने वर्णों का विस्तार करती है जिन्हें वास्तव में एस्केप करने की आवश्यकता होती है, इसलिए SVG - जो अधिकांश रूप से सादा ASCII है - के लिए यह आम तौर पर छोटा रहता है। दूसरा पठनीयता है: आप अपनी स्टाइलशीट में प्रतिशत-एन्कोडेड SVG को देखकर यह पहचान सकते हैं कि वह क्या है, कोई रंग बदल सकते हैं, या कोई टाइपो देख सकते हैं। base64 ब्लॉब का अर्थ समझने से पहले उसे डिकोड करना पड़ता है।

प्रतिशत-एन्कोडिंग को जिस एक चीज़ की सावधानी चाहिए वह सिंगल कोट है, जिसी यहीं स्पष्ट रूप से एस्केप किया गया है: CSS url() मान आम तौर पर सिंगल कोट्स में लिपटे होते हैं, और SVG के अंदर कोई बिना एस्केप वाला एपॉस्ट्रॉफ मान को जल्दी समाप्त कर देगा।

आकार, स्केलिंग और viewBox

उत्पन्न SVG में स्पष्ट चौड़ाई और ऊँचाई विशेषताएँ और एक मेल खाता viewBox दोनों होते हैं। यह संयोजन जानबूझकर है। चौड़ाई और ऊँचाई ब्राउज़र को एक आंतरिक आकार देते हैं ताकि छवि रखे जाने से पहले लेआउट न कूदे, और viewBox वही छवि CSS में आपके द्वारा निर्धारित किसी भी आकार तक स्वच्छ रूप से स्केल करने देता है।

चूँकि यह वेक्टर है, लेबल किसी भी स्केल पर तेज़ रहता है - उच्च-DPI डिस्प्ले पर कोई धुंधला टेक्स्ट नहीं, कोई अलग 2x संपत्ति नहीं। यदि आप चाहते हैं कि प्लेसहोल्डर अपने कंटेनर को भर ले, तो CSS में width: 100%; height: auto सेट करें और viewBox आपके लिए आस्पेक्ट अनुपात बनाए रखेगा। यदि आप आस्पेक्ट अनुपात की परवाह किए बिना एक निश्चित बॉक्स चाहते हैं, तो विशेषताओं को जैसा उत्पन्न किया गया है वैसा ही रखें और ब्राउज़र उन्हें मान लेगा।