web-dev-qa-db-fra.com

SVG comme source dans la balise <img> ne s'affiche pas dans Internet Explorer 11

J'essaie d'afficher un fichier SVG comme le src d'un <img></code> tag (qui selon caniuse.com/svg-img je devrais pouvoir le faire dans tous les navigateurs récents). Le fichier est affiché dans Chrome et Firefox mais Internet Explorer affiche simplement une boîte noire avec un x, comme indiqué ci-dessous:

enter image description here

À l'ouverture du fichier directement dans IE, l'image est parfaitement affichée, donc il ne devrait pas y avoir de problème avec le fichier SVG réel. Il n'y a aucune erreur ou avertissement dans la console IE, et j'utilise la version la plus récente du navigateur.

HTML:

<div id="plot">
  <img id="svg" src="plot1.svg" height="100%" width="100%"/>
</div>

Feuille de style:

#plot {
    float: right;
    width: 650px;
    height: 550px;
    background: #ffffff;
}

#plot svg {
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
}

Quelles sont les raisons possibles de l'apparition du x?

Edit: Le SVG est un gros fichier généré automatiquement, dont un exemple peut être vu ici . Le code qui est utilisé pour le générer est ancien, pourrait-il être lié au DOCTYPE en haut? J'ai essayé de le changer mais je n'ai rien pu afficher encore.

Edit 2: Je l'ai fait fonctionner ... en quelque sorte. Lorsque j'appuie sur F12 et que je vais dans l'onglet "émulation", pour une raison quelconque, cela montre que IE affiche la page en mode Document 7, c'est-à-dire en utilisant le mode de compatibilité pour IE7, qui ne fonctionne pas prend en charge SVG. Je peux cliquer manuellement sur l'une des versions supérieures et cela s'affiche correctement. Ma question suivante est: pourquoi? pourquoi exécute-t-il l'affichage de la page en mode 7, et comment puis-je arrêter ce comportement?

htmlimageinternet-explorersvg
20
Matt Harris

J'ai trouvé le problème. Je consultais la page sur l'intranet, et je ne sais pas pourquoi, mais le paramètre par défaut d'IE consiste à "afficher les sites intranet en mode de compatibilité". Il suffit de décocher cette case dans les paramètres d'affichage de compatibilité. SVG ne fonctionne pas du tout dans IE7, c'est pourquoi je n'obtenais aucune image.

17
Matt Harris

J'ai trouvé que le fait d'avoir un style de "largeur" ​​sur l'img (pour le réduire) fonctionne dans Edge et Chrome, mais le fait disparaître dans IE11. Plutôt définir "max-width" et "max-height" semble fonctionner dans ces trois navigateurs.

14
bradw2k

Cela peut également être dû à l'envoi du svg en texte brut et non en tant que image/svg+xml. Dans Apache, vous pouvez résoudre ce problème en ajoutant à votre .htaccess fichier -

AddType image/svg+xml svg svgz
AddEncoding gzip svgz
9
Ryan

Vous pouvez trouver que la désactivation de ce mode fait fonctionner votre site Web, mais il existe toujours des navigateurs qui ne prennent pas en charge .svg images. Ces navigateurs afficheront le résultat comme vous l'avez vu avec cette case décochée.

Utilisation de SVG comme <img> Si j'enregistre le SVG dans un fichier, je peux l'utiliser directement dans un <img> tag.

<img src="kiwi.svg" alt="Kiwi standing on oval">

Dans Illustrator, notre plan de travail mesurait 612 pixels × 502 pixels.

C'est exactement la taille de l'image sur la page, laissée à elle-même. Vous pouvez en changer la taille en sélectionnant simplement l'img et en modifiant sa largeur ou sa hauteur, comme vous le feriez pour un PNG ou un JPG.

Prise en charge du navigateur

L'utiliser de cette façon a son propre ensemble de prise en charge de navigateur spécifique. Essentiellement: cela fonctionne partout sauf IE 8 et inférieur et Android 2.3 et inférieur).

Si vous souhaitez utiliser SVG, mais devez également prendre en charge ces navigateurs qui ne prennent pas en charge l'utilisation de SVG de cette manière, vous avez des options.

Une façon consiste à tester la prise en charge avec Modernizr et à échanger le src de l'image:

if (!Modernizr.svg) {
  $(".logo img").attr("src", "images/logo.png");
}

David Bushell a une alternative vraiment simple, si vous êtes d'accord avec JavaScript dans le balisage:

<img src="image.svg" onerror="this.onerror=null; this.src='image.png'">

Cela a été tiré de Astuces CSS, cliquez pour lire l'article complet.

5
Graeme Wilkinson