Chrome não renderizando o SVG referenciado pela tag <img>
Estou tendo problemas com o Google Chrome não renderizando svg com uma tag img. Isso acontece ao atualizar a página e o carregamento inicial da página. Eu posso fazer com que a imagem apareça em "Inspecting Element", clicando com o botão direito no arquivo svg e abrindo o arquivo svg em uma nova aba. A imagem svg será então renderizada na página original.
<img src="../images/Aged-Brass.svg">
Totalmente com prejuízo aqui sobre qual é o problema. A imagem svg processa bem no IE9 e FF apenas não no Chrome ou Safari.
Eu tenho meus tipos MIME definidos também. (image / svg + xml)
EDITAR: Aqui está uma página html simples que criei para ajudar a ilustrar o meu 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 você pode ver, estou tentando usar um arquivo svg em uma tag img e em css como uma imagem de plano de fundo. Nem trabalho no carregamento de página inicial em chrome ou safari. Quando eu inspecionar o elemento, clique com o botão direito do mouse em svg ou clique no link para carregar o svg em outra janela. O arquivo svg será renderizado na guia original.