एसवीजी में क्रॉस ब्राउज़र

एसवीजी के बारे में विषयों की एक श्रृंखला जारी रखना। वेक्टर एसवीजी तत्वों को आधुनिक ब्राउज़रों में सही ढंग से प्रदर्शित किया गया है, लेकिन पुराने संस्करणों में समर्थन कैसे लागू किया जाए? आइए क्रॉस-ब्राउज़र वेक्टर ग्राफिक्स से निपटें।



SVG के बारे में पिछले विषय:

• एसवीजी ग्राफिक्स का परिचय
• स्टाइलिंग एसवीजी ग्राफिक्स
• एसवीजी में पाठ

वस्तु तत्व का उपयोग करना

यदि ग्राफिक्स .svg फ़ाइल में संग्रहीत हैं, तो आप पृष्ठ पर ऑब्जेक्ट तत्व का उपयोग कर सकते हैं:

<object data='images/apple.svg'></object> 

निम्नलिखित निर्माण का उपयोग करते हुए, एसवीजी का समर्थन करने वाले ब्राउज़र वेक्टर तत्वों को सही ढंग से प्रदर्शित करेंगे, जबकि अन्य एक .png फ़ाइल ( डेमो ) प्रदर्शित करेंगे:

 <object data='images/apple.svg'> <img src='images/apple.png'/> </object> 

इस पद्धति का मुख्य नुकसान पीएनजी छवियों की गैर-मापनीयता है।

Modernizr

यह विधि जावास्क्रिप्ट पुस्तकालयों Modernizr.js और राफेल.जेएस का उपयोग करती है । सबसे पहले, आपको एसवीजी फ़ाइलों को राफेल द्वारा समर्थित प्रारूप में बदलने की आवश्यकता है। ReadySetRaphael.js टूल हमें इसमें मदद करेगा। हम Modernizr.js कनेक्ट करते हैं:

 <script type="text/javascript" src="scripts/modernizr.js"></script> 

फिर, एक गैर-सहायक ब्राउज़र के मामले में, आपको राफेल.जेएस, साथ ही svg.js - रूपांतरण के बाद प्राप्त फ़ाइल को कनेक्ट करने की आवश्यकता है।

 if (!Modernizr.inlinesvg) { document.write( '<script type="text/javascript" src="scripts/raphael.js"><\/script>', '<script type="text/javascript" src="scripts/svg.js"><\/script>' ); } 

अब HTML के मार्कअप को जोड़ना बाकी है। नीचे दिए गए कोड में, राफेल कार्यों को सुनिश्चित करने के लिए SVG फाइल को सीधे पेज के HTML कोड में शामिल किया गया है:

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="280px" viewBox="0 0 500 280" enable-background="new 0 0 500 280" xml:space="preserve"> <path fill="#333333" d="M296.908,120.622c-8.77,6.201-13.158,13.676-13.158,22.41c0,10.458,5.425,18.479,16.262,24.076 c-2.908,8.435-7.122,15.764-12.65,22.009c-5.516,6.243-10.553,9.368-15.11,9.368c-2.147,0-5.075-0.718-8.794-2.133l-1.782-0.687 c-3.646-1.416-6.854-2.133-9.656-2.133c-2.641,0-5.535,0.555-8.679,1.665l-2.237,0.807l-2.818,1.154 c-2.218,0.884-4.468,1.326-6.725,1.326c-5.328,0-11.208-4.387-17.642-13.161c-9.273-12.567-13.905-26.264-13.905-41.085 c0-10.538,2.886-19.02,8.678-25.46c5.78-6.432,13.446-9.658,22.979-9.658c3.566,0,6.897,0.653,10,1.958l2.129,0.865l2.238,0.92 c1.992,0.84,3.601,1.264,4.825,1.264c1.569,0,3.316-0.364,5.231-1.094l2.929-1.151l2.19-0.804c3.483-1.262,7.34-1.896,11.555-1.896 C282.777,109.183,290.814,112.996,296.908,120.622z M273.238,82.575c0.108,1.344,0.167,2.378,0.167,3.102 c0,6.628-2.412,12.442-7.237,17.443c-4.823,5-10.438,7.494-16.837,7.494c-0.189-1.493-0.29-2.563-0.29-3.212 c0-5.635,2.239-10.924,6.726-15.864c4.482-4.939,9.671-7.838,15.575-8.678C271.754,82.787,272.395,82.696,273.238,82.575z"/> </svg> <div id="applelogo"></div> 1.782-.687 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="280px" viewBox="0 0 500 280" enable-background="new 0 0 500 280" xml:space="preserve"> <path fill="#333333" d="M296.908,120.622c-8.77,6.201-13.158,13.676-13.158,22.41c0,10.458,5.425,18.479,16.262,24.076 c-2.908,8.435-7.122,15.764-12.65,22.009c-5.516,6.243-10.553,9.368-15.11,9.368c-2.147,0-5.075-0.718-8.794-2.133l-1.782-0.687 c-3.646-1.416-6.854-2.133-9.656-2.133c-2.641,0-5.535,0.555-8.679,1.665l-2.237,0.807l-2.818,1.154 c-2.218,0.884-4.468,1.326-6.725,1.326c-5.328,0-11.208-4.387-17.642-13.161c-9.273-12.567-13.905-26.264-13.905-41.085 c0-10.538,2.886-19.02,8.678-25.46c5.78-6.432,13.446-9.658,22.979-9.658c3.566,0,6.897,0.653,10,1.958l2.129,0.865l2.238,0.92 c1.992,0.84,3.601,1.264,4.825,1.264c1.569,0,3.316-0.364,5.231-1.094l2.929-1.151l2.19-0.804c3.483-1.262,7.34-1.896,11.555-1.896 C282.777,109.183,290.814,112.996,296.908,120.622z M273.238,82.575c0.108,1.344,0.167,2.378,0.167,3.102 c0,6.628-2.412,12.442-7.237,17.443c-4.823,5-10.438,7.494-16.837,7.494c-0.189-1.493-0.29-2.563-0.29-3.212 c0-5.635,2.239-10.924,6.726-15.864c4.482-4.939,9.671-7.838,15.575-8.678C271.754,82.787,272.395,82.696,273.238,82.575z"/> </svg> <div id="applelogo"></div> 2.818,1.154 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="280px" viewBox="0 0 500 280" enable-background="new 0 0 500 280" xml:space="preserve"> <path fill="#333333" d="M296.908,120.622c-8.77,6.201-13.158,13.676-13.158,22.41c0,10.458,5.425,18.479,16.262,24.076 c-2.908,8.435-7.122,15.764-12.65,22.009c-5.516,6.243-10.553,9.368-15.11,9.368c-2.147,0-5.075-0.718-8.794-2.133l-1.782-0.687 c-3.646-1.416-6.854-2.133-9.656-2.133c-2.641,0-5.535,0.555-8.679,1.665l-2.237,0.807l-2.818,1.154 c-2.218,0.884-4.468,1.326-6.725,1.326c-5.328,0-11.208-4.387-17.642-13.161c-9.273-12.567-13.905-26.264-13.905-41.085 c0-10.538,2.886-19.02,8.678-25.46c5.78-6.432,13.446-9.658,22.979-9.658c3.566,0,6.897,0.653,10,1.958l2.129,0.865l2.238,0.92 c1.992,0.84,3.601,1.264,4.825,1.264c1.569,0,3.316-0.364,5.231-1.094l2.929-1.151l2.19-0.804c3.483-1.262,7.34-1.896,11.555-1.896 C282.777,109.183,290.814,112.996,296.908,120.622z M273.238,82.575c0.108,1.344,0.167,2.378,0.167,3.102 c0,6.628-2.412,12.442-7.237,17.443c-4.823,5-10.438,7.494-16.837,7.494c-0.189-1.493-0.29-2.563-0.29-3.212 c0-5.635,2.239-10.924,6.726-15.864c4.482-4.939,9.671-7.838,15.575-8.678C271.754,82.787,272.395,82.696,273.238,82.575z"/> </svg> <div id="applelogo"></div> 

पिछले लेख को याद करते हुए, SVG फ़ाइल में टेक्स्ट जोड़ें:

 <text x="210" y="250">This is SVG</text> 

यहाँ क्या हुआ ( डेमो ):

SVGWeb

पुराने ब्राउज़रों के लिए एसवीजी समर्थन को लागू करने का एक और उपकरण एसवीजीबब जावास्क्रिप्ट लाइब्रेरी है। इसे पृष्ठ से जोड़ने के बाद, आप SVG तत्वों को इस तरह रख सकते हैं:

 <script type="image/svg+xml"> <svg ...>...</svg> </script> 

XHTML में, आपको CDATA का उपयोग करना चाहिए:

 <script type="image/svg+xml"><![CDATA[ <svg ...>...</svg> ]]></script> 

निष्कर्ष

क्रॉस-ब्राउज़र एसवीजी ग्राफिक्स के वर्णित उदाहरण आदर्श नहीं हैं, लेकिन वे पुराने ब्राउज़रों में वेक्टर ग्राफिक्स के सही प्रदर्शन के साथ अधिकांश समस्याओं के समाधान के रूप में उपयुक्त हैं।

प्रयुक्त सामग्री:

• फ्लेक्सिबल, स्केलेबल और फन बैकग्राउंड के लिए एसवीजी का उपयोग करना, भाग II
• असमर्थित ब्राउज़र में स्केलेबल वेक्टर ग्राफिक्स (SVG) जोड़ना