Hỗ trợ thẻ <img> đáng tin cậy cho SVG

Question

Tôi hiện đang thực hiện một số thiết kế lại trang web, về cơ bản chỉ cần nâng cấp lên một cái nhìn mới hơn và cố gắng làm cho độ phân giải độc lập nhất có thể và tên độ phân giải độc lập Tôi đã tìm cách sử dụng hình ảnh SVG trong thiết kế nơi trình duyệt hỗ trợ hình ảnh SVG trong các thẻ <img>. Lý do tôi muốn chỉ sử dụng SVG trong các thẻ <img> thay vì sử dụng một số giải pháp đầy tham vọng hơn là AFAIK Chrome, Opera và Safari đều hỗ trợ nó và FF4 có vẻ như kết hợp với thực tế là toàn bộ trang web được xây dựng trên một CMS tùy chỉnh mà sẽ phải được viết lại một phần để bắt đầu thay đổi HTML đầu ra (hiện tại nó hỗ trợ các hình ảnh thiết kế tùy chỉnh, CSS tùy chỉnh và JS tùy chỉnh bao gồm cho mỗi chủ đề).

Bây giờ, tôi đã xem xét xung quanh mạng một chút bản thân mình đang cố gắng tìm ra cách tốt nhất để thực hiện điều này và vì một lý do nào đó mà mọi giải pháp được đề xuất mà tôi tìm thấy đã hoạt động kém (một phát hiện FF3.x là hỗ trợ SVG trong các thẻ <img> để chúng không hiển thị chính xác ở đó, một số khác không bao giờ cố gắng cả, một số khác lại quá phức tạp "thay thế tất cả hình ảnh có SVG nếu có hỗ trợ cho nó" chức năng cũng sẽ không hoạt động tốt.

Điều tôi đang tìm kiếm thực sự là một đoạn mã nhỏ có thể được gọi như thế này (btw, tôi đang sử dụng JQuery với chủ đề mới này cho trang web):

if(SVGSupported()) { 
    $('#header img#logo').attr('src','themes/newTheme/logo.svg'); 
    /* More specified image replacements for CSS and HTML here */ 
} 

Có ai thực sự có giải pháp làm việc cho điều này không cung cấp đầu ra không chính xác không? Nếu vậy tôi sẽ rất biết ơn.

Answer 1

Đây có vẻ là câu trả lời cuối cùng: Javascript: How can I delay returning a value for img.complete. Trừ khi ai đó đưa ra một cái gì đó mang lại kết quả chính xác ngay lập tức.

Answer 2

Sử dụng <object>Thẻ để hiển thị SVG. Xem http://caniuse.com/svg-img và http://www.w3schools.com/svg/svg_inhtml.asp

Firefox 3.x cũng có thể hiển thị hình ảnh SVG, không có SVG được nhúng. Tôi cũng không chắc chắn về những thứ đó trên các trình duyệt khác. FF4 cũng sẽ cho phép nhúng SVG.

Với <object> -Tag bạn cũng có thể bao gồm hiển thị PNG thay thế hình ảnh, trong trường hợp trình duyệt không hỗ trợ hiển thị SVG.

Answer 3

Đối với các trình duyệt cũ, bạn có thể sử dụng thẻ <object> hoặc , nhưng đó không phải là giải pháp tốt đẹp. Firefox và IE9 (không biết về các trình duyệt khác) đã thực hiện inline svg bây giờ, mà có thể dễ dàng được phát hiện:

// From the Modernizr source 
var inlineSVG = (function() { 
    var div = document.createElement('div'); 
    div.innerHTML = '<svg/>'; 
    return (div.firstChild && div.firstChild.namespaceURI) == 'http://www.w3.org/2000/svg'; 
})(); 

if(inlineSVG){ 
    alert('inline SVG supported'); 
} 

Vì vậy, bạn có thể thay thế tất cả các hình ảnh bằng thẻ svg rồi. Và tôi hy vọng, nhưng tôi phải google trên đó, rằng mọi trình duyệt hỗ trợ svg nội tuyến sẽ hỗ trợ svg làm nguồn hình ảnh.

Answer 4

tôi đã có nghĩa là để viết một bài đăng blog về vấn đề này, nhưng đây là một đoạn mã mà nên làm việc:

function SVGSupported() { 
    var testImg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzUiIGhlaWdodD0iMjc1Ij48L3N2Zz4%3D'; 
    var img = document.createElement('img') 
    img.setAttribute('src',testImg); 

    return img.complete; 
} 

Dựa trên một kịch bản bởi Alexis "Fyrd" Deveria, được đăng trên blog Opera của mình.

Tôi đang sử dụng một cái gì đó tương tự trên blog của tôi, mà bạn có thể nhìn thấy trong hành động ở đây: http://blog.echo-flow.com/2010/10/16/masters-thesis-update-1/

Nó sẽ sử dụng <img> nếu được hỗ trợ; nếu không, và chúng tôi không có trên IE, nó sẽ sử dụng thẻ đối tượng thông thường; nếu không, nó sẽ sử dụng một thẻ đối tượng được tạo riêng cho svg-web. fakesmil được sử dụng cho hoạt ảnh gradient. Nó dường như làm việc ở khắp mọi nơi tôi đã thử nghiệm nó.Tập lệnh thực hiện công việc cho ví dụ này có thể được tìm thấy tại đây: http://blog.echo-flow.com/media/js/svgreplace.js

Answer 5

Một tốt thảo luận/so sánh các phương pháp là ở đây: http://www.voormedia.nl/blog/2012/10/displaying-and-detecting-support-for-svg-images

Dựa trên trang đó, tôi vết thương bằng cách sử dụng này:

svgsupport = document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")