Rilevamento affidabile del supporto per i tag <img> per SVG

Question

Attualmente sto eseguendo una riprogettazione di un sito Web, fondamentalmente semplicemente aggiornandolo a un aspetto più aggiornato e cercando di renderlo il più possibile indipendente dalla risoluzione e nel nome di Indipendenza dalla risoluzione Ho pensato di provare a utilizzare le immagini SVG nella progettazione in cui il browser supporta le immagini SVG nei tag <img>. Il motivo per cui voglio attenermi semplicemente all'utilizzo di SVG nei tag <img> piuttosto che utilizzare una soluzione più ambiziosa è che AFAIK Chrome, Opera e Safari supportano tutto e FF4 sembra che alla fine possa essere combinato con il fatto che l'intero sito è costruito su un CMS personalizzato che dovrebbe essere parzialmente riscritto per iniziare a modificare l'output HTML (attualmente supporta immagini di design personalizzate, CSS personalizzati e JS personalizzati per ogni tema).

Ora, ho cercato un po 'la rete cercando di capire il modo migliore per farlo e per qualche ragione praticamente ogni soluzione suggerita che ho trovato ha funzionato male (uno rileva FF3.x come supporto SVG nei tag <img> in modo che non fossero visualizzati correttamente lì, un altro non è mai stato provato, molti erano troppo complessi "sostituiscono tutte le immagini con SVG se c'è il supporto per" funzioni che non funzioneranno troppo bene

Quello che sto cercando è davvero un piccolo frammento che può essere chiamato così (btw, sto usando JQuery con questo nuovo tema per il sito):

Qualcuno ha effettivamente una soluzione funzionante per questo che non fornisce un output impreciso? Se così fosse, sarei molto grato.

Answer 1

Questa sembra essere la risposta definitiva: Javascript: How can I delay returning a value for img.complete. A meno che qualcuno non arrivi a qualcosa che produce immediatamente i risultati corretti.

Answer 2

Utilizzare <object> -Tag per visualizzare SVG. Vedi http://caniuse.com/svg-img e

Firefox 3.x può anche visualizzare immagini SVG, solo senza SVG incorporati. Non sono nemmeno sicuro di quelli degli altri browser. FF4 consentirà anche SVG incorporati.

Con il numero <object> -Tag è inoltre possibile includere la visualizzazione PNG alternativa delle immagini, nel caso in cui il browser non supporti la visualizzazione di SVG.

Answer 3

Per i vecchi browser è possibile utilizzare il tag <object> o , ma questa non è una soluzione piacevole. Firefox e IE9 (non so su altri browser) hanno attuato in linea svg ora, che può essere facilmente rilevato:

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

Quindi, è possibile sostituire tutte le immagini SVG tag allora. E spero, ma devo google su quello, che ogni browser che supporta inline svg supporterà svg come sorgente di immagini.

Answer 4

ho intenzione di scrivere un post sul blog su questo, ma qui è un frammento che dovrebbe funzionare:

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

    return img.complete; 
} 

Basato su una sceneggiatura di Alexis "fyrd" Deveria, pubblicato sul suo blog Opera.

sto usando qualcosa di simile sul mio blog, che potete vedere in azione qui: http://blog.echo-flow.com/2010/10/16/masters-thesis-update-1/

Userà <img> se supportato; in caso contrario, e non siamo su IE, userà il normale tag di un oggetto; altrimenti, utilizzerà un tag oggetto appositamente creato per svg-web. fakesmil è usato per l'animazione del gradiente. Sembra funzionare ovunque l'ho provato.Lo script che esegue il lavoro per questo esempio può essere trovato qui: http://blog.echo-flow.com/media/js/svgreplace.js

Answer 5

Una buona discussione/confronto dei metodi è qui: http://www.voormedia.nl/blog/2012/10/displaying-and-detecting-support-for-svg-images

Sulla base di quella pagina, finii per usare questo:

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