J'ai des problèmes avec google chrome qui ne rend pas les svg avec un img
élément. Cela se produit lors de l'actualisation de la page et lors du chargement initial de la page. Je peux faire apparaître l'image en "inspectant l'élément" puis en faisant un clic droit sur le fichier svg et en ouvrant le fichier svg dans un nouvel onglet. L'image svg sera alors affichée sur la page d'origine.
<img src="../images/Aged-Brass.svg">
Je ne comprends pas du tout ce qui se passe. L'image svg s'affiche correctement dans IE9 et FF, mais pas dans Chrome ou Safari.
J'ai également défini mes types MIME. (image/svg+xml)
EDITAR: Voici une page html simple que j'ai construite pour illustrer mon problème.
<!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;
}
#image_element {
width: 400px;
height: 600px;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="image_element">
<img src="../images/Aged-Brass.svg">
</div>
<div id="BackgroundImage"></div>
</body>
</html>
Comme vous pouvez le voir, j'essaie d'utiliser un fichier svg à la fois dans un fichier img
et dans css en tant qu'image d'arrière-plan. Ni l'un ni l'autre ne fonctionne lors du chargement initial de la page dans chrome ou safari. Lorsque j'inspecte l'élément, je fais un clic droit sur le svg ou je clique sur le lien pour charger le svg dans une autre fenêtre, le fichier svg s'affiche dans l'onglet d'origine.