У меня возникают проблемы с google chrome, не отображающим svg с тегом img. Это происходит при обновлении страницы и начальной загрузки страницы. Я могу получить изображение, отображаемое "Проверка элемента", а затем щелкнуть правой кнопкой мыши файл svg и открыть файл svg на новой вкладке. Изображение svg будет отображаться на исходной странице.
<img src="../images/Aged-Brass.svg">
Полностью при потере здесь, что касается проблемы. Изображение svg отлично видно в IE9 и FF, а не в Chrome или Safari.
У меня также установлены мои типы MIME. (Изображение/SVG + XML)
EDIT: Вот простая html-страница, которую я создал, чтобы помочь проиллюстрировать мою проблему.
<!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>
Как вы можете видеть, я пытаюсь использовать файл svg как в теге img, так и в css в качестве фонового изображения. Ни одна из них не работает с начальной загрузкой страницы в хром или сафари. Когда я проверяю элемент, щелкните правой кнопкой мыши svg или щелкните ссылку на svg load в другом окне, файл svg отобразит на исходной вкладке.