Tengo problemas con google chrome que no representa svg con una etiqueta img. Esto sucede cuando se actualiza la página y se carga la página inicial. Puedo hacer que la imagen se muestre "Inspeccionando elemento", luego haciendo clic derecho en el archivo svg y abriendo el archivo svg en una nueva pestaña. La imagen svg luego se renderizará en la página original.
<img src="../images/Aged-Brass.svg">
Totalmente perdido aquí en cuanto a cuál es el problema. La imagen svg se reproduce bien en IE9 y FF, pero no en Chrome o Safari.
También tengo configurados mis tipos MIME. (imagen / svg + xml)
EDITAR: Aquí hay una página html simple que construí para ayudar a ilustrar mi problema.
<!DOCTYPE html>
<html>
<head>
<title>SVG Test</title>
<style>
#BackgroundImage{
background: url('../images/Aged-Brass.svg') no-repeat scroll left top;
width: 400px;
height: 600px;
}
#ImageTag{
width: 400px;
height: 600px;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="ImageTag">
<img src="../images/Aged-Brass.svg">
</div>
<div id="BackgroundImage"></div>
</body>
</html>
Como puede ver, estoy tratando de usar un archivo svg tanto en una etiqueta img como en css como imagen de fondo. Tampoco funciona en la carga de la página inicial en Chrome o Safari. Cuando inspecciono el elemento, hago clic derecho en svg o hago clic en el enlace para cargar svg en otra ventana, el archivo svg se mostrará en la pestaña original.
