In Chrome wird SVG nicht gerendert, auf das über das <img> -Tag verwiesen wird

Question

May 24, 2012, 02:04 PM

In Chrome wird SVG nicht gerendert, auf das über das <img> -Tag verwiesen wird

Ich habe Probleme mit Google Chrome, das SVG nicht mit einem IMG-Tag rendert. Dies geschieht beim Aktualisieren der Seite und beim Laden der ersten Seite. Ich kann das Bild anzeigen lassen, indem ich "Element inspiziere" und 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 hier, was das Problem ist. Das SVG-Bild wird in IE9 und FF einwandfrei 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, versuche ich, eine SVG-Datei sowohl in einem IMG-Tag als auch in CSS als Hintergrundbild zu verwenden. Weder funktioniert das Laden der ersten Seite in Chrome noch in Safari. Wenn ich das Element inspiziere, klicke ich mit der rechten Maustaste auf Svg oder klicke auf den Link, um Svg in ein anderes Fenster zu laden. Die Svg-Datei wird in der ursprünglichen Registerkarte gerendert.