html - subir - SVG como fuente en la etiqueta<img> no se muestra en Internet Explorer 11

svg web

Question

Estoy tratando de mostrar un archivo SVG como la fuente de una etiqueta <img> (que, según caniuse.com/svg-img , debería poder hacer en todos los navegadores recientes). El archivo se muestra en Chrome y Firefox, pero Internet Explorer solo muestra una caja negra con una x, como se muestra a continuación:

Al abrir el archivo directamente en IE, la imagen se muestra perfectamente, por lo que no debería haber ningún problema con el archivo SVG real. No hay errores ni advertencias en la consola de IE, y estoy usando la versión más reciente del navegador.

HTML:

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

Hoja de estilo:

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

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

¿Cuáles son algunas posibles razones para la aparición de la x?

Edición: El SVG es un gran archivo generado automáticamente, un ejemplo del cual puede verse here . El código que se está utilizando para generarlo es antiguo, ¿podría ser algo que ver con el DOCTYPE en la parte superior? Intenté cambiarlo pero no pude mostrar nada todavía.

Edición 2: Lo tengo funcionando ... más o menos. Cuando presiono F12 y voy a la pestaña "emulación", por alguna razón, muestra que IE está mostrando la página en el Modo de documento 7, es decir. usando el modo de compatibilidad para IE7, que no es compatible con SVG. Puedo hacer clic manualmente en cualquiera de las versiones superiores y se muestra bien. Mi siguiente pregunta es: ¿por qué? ¿Por qué se está ejecutando la visualización de la página en modo 7 y cómo detengo este comportamiento?

Answer 1

Descubrí que tener un estilo de "ancho" en el img (para reducirlo) funciona en Edge y Chrome, pero lo hace desaparecer en IE11. Más bien, la configuración de "max-width" y "max-height" parece funcionar en los tres navegadores.

Answer 2

Esto también puede ser causado enviando el svg como texto plano y no como una image/svg+xml . En Apache puedes arreglar esto agregando a tu archivo .htaccess -

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

Answer 3

He encontrado el problema. Estaba viendo la página a través de la intranet, y no estoy seguro de por qué, pero la configuración predeterminada de IE es "mostrar los sitios de la intranet en la Vista de compatibilidad". Solo tuve que desmarcar esa casilla en la configuración de vista de compatibilidad. SVG no funciona en absoluto en IE7, por eso no estaba obteniendo ninguna imagen.

Answer 4

Puede encontrar que desactivar este modo hace que su sitio web funcione, sin embargo, todavía hay navegadores que no admiten imágenes .svg . Esos navegadores mostrarán el resultado como lo viste con esta casilla sin marcar.

Usar SVG como <img> Si guardo el SVG en un archivo, puedo usarlo directamente en una etiqueta <img> .

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

En Illustrator, nuestra mesa de trabajo era 612px ✕ 502px.

Eso es exactamente cuán grande será la imagen en la página, dejada sola. Puede cambiar el tamaño de la misma sin embargo, simplemente seleccionando el img y cambiando su ancho o alto, de nuevo como si fuera un PNG o JPG.

Soporte del navegador

Usarlo de esta manera tiene su propio conjunto de soporte de navegador específico. Esencialmente: funciona en todas partes excepto en IE 8 y down, y Android 2.3 y down.

Si desea usar SVG, pero también necesita ser compatible con estos navegadores que no admiten el uso de SVG de esta manera, tiene opciones.

Una forma es probar la compatibilidad con Modernizr y cambiar el src de la imagen:

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

David Bushell tiene una alternativa muy simple, si está de acuerdo con JavaScript en el marcado:

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

Esto se ha extraído de CSS Tricks, haga clic para leer el artículo completo.