Perché questo SVG funziona visualizzato in modo raw nel browser ma non in una pagina Web?

This SVG può essere visualizzato correttamente nella finestra del mio browser.Perché questo SVG funziona visualizzato in modo raw nel browser ma non in una pagina Web?

Tuttavia quando cerco di usare come immagine in una pagina web (provato questo sul mio sito dal vivo e in JSFiddle), che non si presenta:

<img src="http://54.186.131.77/Style/Resources/SVG/logo.svg"/>

Ogni tempo, il mio server afferma che il file è stato servito con successo, ma non lo rende.

Qual è il problema?

Nel caso in cui si pensa il mio problema potrebbe coinvolgere i miei tipi metodo/MIME che servono, I've created a Gist with my Node.js custom server implementation. mi trattano come .svgtext/xml in base a qualsiasi schema che ho usato durante lo sviluppo di questo server qualche tempo fa.

fonte

2015-07-31 Anonymous

Hai provato a impostare i tipi MIME e cosa è in esecuzione sul lato server? http://stackoverflow.com/questions/27338648/svg-wont-display Istruzioni Apache - http://planetsvg.com/tools/mime.php#apache – Mousey

@Mousey Ti mostrerò come il MIME del mio server gestisce tipi. –

@Mousey è troppo codice per ingombrare questa domanda con, dal momento che non so quale parte potrebbe essere problematica per '... [snip] ...', quindi eccolo in un Gist: https: // gist .github.com/anonymous/a39603f3ee74694e8186 –

L'intestazione di risposta Content-type quando carico che svg dal server è attualmente Content-Type:text/xml, che è un tipo MIME corretto per SVG. Prova a modificare l'intestazione Content-type su image/svg+xml.

Dal succo hai postato il tuo commento, sembra che si sarà in grado di fare questo modificando la linea 15 da:

'.svg' : 'text/xml',

'.svg' : 'image/svg+xml',

mi sento di raccomandare contro solo cambiando il markup, perché è solo una correzione a breve termine per le intestazioni HTTP errate.

fonte

2015-07-31 22:26:58

Ho effettivamente cambiato il tipo di contenuto come hai detto e ricaricato il server, ricaricato la pagina con cache disabilitata - il problema non è stato risolto -, ma per sicurezza, è possibile controllare il tipo di contenuto che viene servito tramite javascript, così posso sapere di sicuro il tipo MIME è pubblicato correttamente? –

@JonathanTodd Ho controllato di nuovo e sembra che il tuo tipo di contenuto sia ora 'text/svg-xml' - ancora non corretto. Per verificare il tipo di contenuto, vai su [web-sniffer.net] (http://web-sniffer.net/) e inserisci l'URL SVG, lasciando tutto il resto predefinito. Quindi controlla la sezione "Intestazione di risposta HTTP" per un 'Content-Type' di' image/svg + xml'. –

Ah, capisco. Sciocco errore. –

Ecco come l'ho fatto, usando il semplice vecchio HTML. Ho usato la risposta mostrata nel link SO here per capirlo.

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title>Test page</title> 
</head> 
<body> 
    <object data="http://54.186.131.77/Style/Resources/SVG/logo.svg" type="image/svg+xml"> 
     <img src="http://54.186.131.77/Style/Resources/SVG/logo.svg" /> 
    </object> 
</body> 
</html>

fonte

2015-07-31 22:26:30

Perché questo SVG funziona visualizzato in modo raw nel browser ma non in una pagina Web?

risposta

Problemi correlati