Phương pháp phát hiện hỗ trợ SVG nào là tốt nhất?

Question

Ai đó đã có asked my question about detecting SVG support in browsers nhưng có ba giải pháp hàng đầu và không có nhiều thảo luận về giá trị của mỗi giải pháp.

Vì vậy: điều nào, nếu có, là tốt nhất? Xét về tính di động và chính xác, đó là. Sai âm (tức là "không có svg") là không mong muốn, nhưng chấp nhận được; sai tích cực là không.

lục A:

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

var img = document.createElement('img') 

img.setAttribute('src',testImg); 

return img.complete; 

Phụ lục B:

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

Phụ lục C:

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

Answer 1

tôi có lẽ sẽ sử dụng modernizr.

Answer 2

Hiện tại, Modernizr sử dụng phương pháp B để phát hiện hỗ trợ cho SVG trong các thẻ <img> và tiếp cận C để phát hiện hỗ trợ cho SVG trong các thẻ <embed> và <object>. Dường như nó được sử dụng để sử dụng một cách tiếp cận giống như A để phát hiện hỗ trợ "SVG as img", nhưng điều đó đã bị loại bỏ theo B (để biết thêm chi tiết, xem this post về CSS-tricks).

Do đó, có vẻ như tại thời điểm này, B hoặc C sẽ là phương pháp tốt nhất, tùy thuộc vào chính xác những gì bạn muốn thử nghiệm.

Answer 3

Không cần bao gồm toàn bộ thư viện Modernizr cho việc này. Dưới đây là một kiểm tra đơn giản mà tôi đã tôi đã sử dụng trong quá khứ:

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

này khá đơn giản kiểm tra hỗ trợ của đối tượng SVGRect được định nghĩa trong SVG Specification. Trong Chrome typeof SVGRect là "function" và trong IE9 là "object", nhưng trong các trình duyệt không hỗ trợ SVG (ví dụ IE8), giá trị này trả về "undefined".

Với đoạn mã trên, bạn có thể chỉ đơn giản là:

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