У мене проблеми з Google Chrome, які не відображають svg з тегом img. Це трапляється під час оновлення сторінки та початкового завантаження сторінки. Я можу отримати зображення, щоб показати його, "Перевіряючи елемент", клацнувши правою кнопкою миші файл svg та відкривши файл svg у новій вкладці. Потім зображення svg буде відтворено на вихідній сторінці.
<img src="../images/Aged-Brass.svg">
Тут повністю втрачено те, в чому проблема. Зображення svg чудово відображається в IE9 та FF, тільки не в Chrome або Safari.
У мене також встановлені типи MIME. (image / 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 в іншому вікні, файл svg відобразиться у вихідній вкладці.