Niezawodnie wykrywa obsługę znaczników <img> dla SVG

Question

Obecnie dokonuję przeprojektowania strony internetowej, zasadniczo po prostu uaktualniając ją do bardziej aktualnego wyglądu i starając się, aby była jak najbardziej niezależna od rozdzielczości, oraz w imieniu niezależność rozdzielczości Pomyślałem, że spróbuję użyć obrazów SVG w projekcie, w którym przeglądarka obsługuje obrazy SVG w znacznikach <img>. Powodem, dla którego chcę pozostać przy użyciu tagów SVG w tagach <img>, a nie przy użyciu bardziej ambitnego rozwiązania, jest to, że AFAIK Chrome, Opera i Safari obsługują to wszystko, a FF4 wydaje się, że w końcu może go uzyskać w połączeniu z faktem, że cała witryna jest zbudowany na niestandardowym CMS, który musiałby zostać częściowo przepisany, aby rozpocząć zmianę wyjściowego HTML (obecnie obsługuje niestandardowe obrazy projektów, niestandardowe CSS i niestandardowe JS obejmuje dla każdego motywu).

Teraz trochę rozejrzałem się po sieci, próbując znaleźć najlepszy sposób na zrobienie tego i z jakiegoś powodu prawie każde sugerowane rozwiązanie, które znalazłem, działało słabo (jeden wykrywa FF3.x jako wsparcie SVG w tagach <img>, więc nie wyświetlały się tam poprawnie, inne nigdy nie próbowały, kilka było zbyt skomplikowanymi "zastąp wszystkie obrazy SVG, jeśli istnieje wsparcie", które również nie będą działały zbyt dobrze

To, czego szukam, to naprawdę mały fragment, który można nazwać tak (przy okazji, używam JQuery z nowym motywem na stronie internetowej):

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

Czy ktoś faktycznie ma działające rozwiązanie, które nie daje niedokładnych danych wyjściowych? Jeśli tak, byłbym bardzo wdzięczny.

Answer 1

Ta odpowiedź wydaje się być ostateczna: Javascript: How can I delay returning a value for img.complete. Chyba, że ​​ktoś wymyśli coś, co natychmiast przyniesie właściwe wyniki.

Answer 2

Użyj <object> -Tagi do wyświetlania SVG. Zobacz http://caniuse.com/svg-img i http://www.w3schools.com/svg/svg_inhtml.asp

Firefox 3.x może również wyświetlać obrazy SVG, nie ma osadzonych SVG. Nie jestem też pewien co do tych w innych przeglądarkach. FF4 umożliwi także osadzanie SVG.

Wraz z <object> -Tag możesz również dołączyć alternatywne wyświetlanie obrazów PNG na wypadek, gdyby przeglądarka nie obsługiwała wyświetlania SVG.

Answer 3

Dla starych przeglądarek można użyć znacznika <object> lub , ale to nie jest dobre rozwiązanie. Firefox i IE9 (nie wiem o innych przeglądarek) wdrożyły inline SVG teraz, które mogą być łatwo wykryte:

// 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'); 
} 

Tak, można wymienić wszystkie obrazy tagów svg wtedy. Mam nadzieję, że muszę, ale muszę to potwierdzić, że każda przeglądarka obsługująca wbudowane svg będzie obsługiwała svg jako źródło obrazu.

Answer 4

byłem zamiar napisać na blogu na ten temat, ale tutaj jest to fragment, który powinien działać:

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

    return img.complete; 
} 

podstawie scenariusza „Alexis” Fyrd Deveria, pisał na swoim blogu Opery.

Używam coś podobnego na moim blogu, który można zobaczyć w akcji tutaj: http://blog.echo-flow.com/2010/10/16/masters-thesis-update-1/

Wykorzysta <img> jeśli jest obsługiwane; jeśli nie, a my nie jesteśmy na IE, użyje zwykłego tagu object; w przeciwnym razie użyje znacznika obiektu specjalnie stworzonego dla svg-web. fakesmil służy do animacji gradientowej. Wydaje się działać wszędzie, gdzie go testowałem.Skrypt, który wykonuje pracę dla tego przykładu, można znaleźć tutaj: http://blog.echo-flow.com/media/js/svgreplace.js

Answer 5

Dobrym dyskusja/Porównanie metod jest tutaj: http://www.voormedia.nl/blog/2012/10/displaying-and-detecting-support-for-svg-images

Bazując na tej stronie, ja likwidacji za pomocą tego:

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