असमर्थित ब्राउज़र में स्केलेबल वेक्टर ग्राफिक्स (SVG) जोड़ना
इस श्रृंखला की एक पुरानी पोस्ट में, हमने पुराने ब्राउज़रों के साथ एसवीजी के नुकसान के बारे में थोड़ा सा उल्लेख किया है और एक वैकल्पिक समाधान के रूप में ग्राफिक की सेवा करने के लिए राफेल.जेएस का उपयोग किया है। इस पोस्ट में हम इस मामले पर एक नज़र डालेंगे.
यह विचार सरल है, हम अभी भी एसवीजी तत्वों को अपने वेबपेज पर ग्राफिक्स देने के लिए प्राथमिक तरीके के रूप में उपयोग कर रहे हैं, लेकिन साथ ही हम एक फॉलबैक फ़ंक्शन भी प्रदान करेंगे ताकि यह अभी भी असमर्थित ब्राउज़रों में प्रदान किया जा सके.
ज़रूर, ऐसे कई रास्ते हैं जिन्हें हम ले सकते हैं, लेकिन हम केवल दो समाधानों पर ध्यान देंगे जो मुझे लगता है कि एक बेहतर सामान्य समाधान है। तो, आइए देखें कि हम इसे कैसे कर सकते हैं.
ऑब्जेक्ट एलिमेंट का उपयोग करना
इसे सीधे एक HTML दस्तावेज़ में डालने के अलावा, SVG को एम्बेड करने के कई तरीके हैं। उदाहरण के लिए, यदि हम ग्राफिक को स्टोर करते हैं .svg फ़ाइल, हम उपयोग कर सकते हैं तत्त्व.
प्रदर्शन उद्देश्य के लिए, हमने अपने वेबपृष्ठ में SVG के साथ एक Apple लोगो जोड़ा है। हालाँकि, असमर्थित ब्राउज़र खाली रहेंगे। समस्या को हल करने के लिए, हम एक बिटमैप ग्राफिक की सेवा कर सकते हैं, निम्नानुसार;
इस तरह, समर्थित ब्राउज़र अभी भी ले जाएगा .svg, जबकि असमर्थित ब्राउज़र बिटमैप ग्राफ़िक को ले जाएगा. हमने जोड़ा है “png” यह पता लगाने के लिए कि कौन सा ग्राफ़िक वितरित किया जा रहा है, Apple लोगो के नीचे निशान.
हालांकि, जैसा कि हमने अन्य पोस्ट में उल्लेख किया है, बिटमैप ग्राफिक्स SVG की तरह लचीले और स्केलेबल नहीं हैं. तो, आइए एक और उपाय देखें.
मॉडर्निज़्र का उपयोग करना
एक अन्य विधि जिसका हम उपयोग कर सकते हैं वह है Modernizr. आप में से जो इस जावास्क्रिप्ट लाइब्रेरी से परिचित नहीं हैं, चिंता न करें कि हमारे पास इसके बारे में कवर करने के लिए एक समर्पित पोस्ट होगी। अभी के लिए, बस हमारे साथ बने रहें.
सबसे पहले, आइए कुछ आवश्यक जावास्क्रिप्ट लाइब्रेरी तैयार करें, मॉडर्निज़्र.जेएस और राफेल.जेएस. फिर, हमें अपने को परिवर्तित करने की भी आवश्यकता है .svg इस उपकरण के साथ एक राफेल-समर्थित प्रारूप में फ़ाइल करें, ReadySetRaphael.js, और आउटपुट को अलग से सहेजें .js फ़ाइल; नाम बताइए svg.js.
HTML दस्तावेज़ में Modernzr.js शामिल करें, जैसे:
और अन्य दो फाइलों के लिए, Raphael.js तथा svg.js, हम इसे सशर्त रूप से लोड करेंगे, केवल जब यह असमर्थित ब्राउज़रों में देखा जाता है.
Modernizr के साथ हम ब्राउज़र की क्षमता का पता लगा सकते हैं, इस मामले में हम यह पता लगाएंगे कि क्या ब्राउज़र SVG को रेंडर करने में सक्षम है, और अगर यह नहीं है तो हम स्क्रिप्ट की सेवा करेंगे:
if (! Modernizr.inlinesvg) document.write (''
