Ich habe Probleme mit Google Chrome, das SVG nicht mit einem IMG-Tag rendert. Dies geschieht beim Aktualisieren der Seite und beim ersten Laden der Seite. Ich kann das Bild anzeigen lassen, indem ich "Element überprüfen", dann mit der rechten Maustaste auf die SVG-Datei klicke und die SVG-Datei in einem neuen Tab öffne. Das SVG-Bild wird dann auf der Originalseite gerendert.
<img src="../images/Aged-Brass.svg">
Völlig ratlos, was das Problem ist. Das SVG-Bild wird in IE9 und FF gut wiedergegeben, nur nicht in Chrome oder Safari.
Ich habe auch meine MIME-Typen eingestellt. (image / svg + xml)
BEARBEITEN: Hier ist eine einfache HTML-Seite, die ich erstellt habe, um mein Problem zu veranschaulichen.
<!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>
Wie Sie sehen können, versuche ich, eine SVG-Datei sowohl in einem IMG-Tag als auch in CSS als Hintergrundbild zu verwenden. Weder arbeiten beim ersten Laden der Seite in Chrome noch in Safari. Wenn ich das Element inspiziere, klicken Sie mit der rechten Maustaste auf svg oder klicken Sie auf den Link, um svg in ein anderes Fenster zu laden. Die svg-Datei wird auf der ursprünglichen Registerkarte gerendert.