कौन सा एसवीजी समर्थन पहचान विधि सबसे अच्छा है?

Question

किसी के पास पहले से ही asked my question about detecting SVG support in browsers है लेकिन तीन प्रमुख समाधान हैं और प्रत्येक की योग्यता के बारे में बहुत सी चर्चा नहीं है।

तो: कौन सा, यदि कोई है, तो सबसे अच्छा है? पोर्टेबिलिटी और शुद्धता के मामले में, वह है। झूठी नकारात्मक (यानी "कोई svg") अवांछित, लेकिन स्वीकार्य हैं; झूठी सकारात्मक नहीं हैं।

प्रदर्शनी एक:

var testImg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzUiIGhlaWdodD0iMjc1Ij48L3N2Zz4%3D'; 

var img = document.createElement('img') 

img.setAttribute('src',testImg); 

return img.complete; 

प्रदर्शनी बी: ​​

return document.implementation.hasFeature(
    "http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1"); 

प्रदर्शनी सी:

return !! document.createElementNS && 
     !! document.createElementNS (
      'http://www.w3.org/2000/svg', 
      "svg") 
     .createSVGRect; 

Answer 1

मैं शायद modernizr का प्रयोग करेंगे।

Answer 2

वर्तमान में, Modernizr <img> टैग में SVGs के लिए समर्थन के लिए पता लगाने के लिए दृष्टिकोण बी का उपयोग करता है, और दृष्टिकोण सी <embed> और <object> टैग में SVGs के लिए समर्थन के लिए पता लगाने के लिए। ऐसा लगता है कि यह एक ऐसे दृष्टिकोण का उपयोग करने के लिए प्रयोग किया जाता था जो "एसवीजी के रूप में आईजीजी" समर्थन का पता लगाने के लिए ए की तरह था, लेकिन इसे बी के पक्ष में गिरा दिया गया था (अधिक जानकारी के लिए, this post सीएसएस-चाल पर देखें)।

नतीजतन, ऐसा लगता है कि फिलहाल, बी या सी सबसे अच्छा तरीका होगा, जिस पर आप वास्तव में परीक्षण करना चाहते हैं।

Answer 3

इसके लिए संपूर्ण Modernizr लाइब्रेरी को शामिल करने की आवश्यकता नहीं है।

typeof SVGRect !== "undefined"; // true if supported, false if not 

यह काफी बस SVGRect वस्तु जो SVG Specification में परिभाषित किया गया है के समर्थन के लिए जाँच करता है: यहाँ एक सरल जाँच लें कि मुझे लगता है मैं पहले उपयोग किए गए नहीं हुआ है। क्रोम typeof SVGRect"function" है और आईई 9 में यह "object" है, लेकिन ब्राउज़र में जो एसवीजी (आईई 8, उदाहरण के लिए) का समर्थन नहीं करते हैं, यह "undefined" देता है।

ऊपर कोड के साथ, आप बस कर सकते हैं

:

if (typeof SVGRect !== "undefined") { ... /* If the browser does support SVG. */ } 
else { ... /* If the browser does not support SVG. */ }