SVG en proporciones de elemento img no respetadas en ie9

CSS:

img{ max-height:30px; } 

HTML:

  

Estoy buscando esta imagen svg para escalar proporcionalmente a una altura máxima de 30 píxeles de alto. Las dimensiones naturales de svg son 200px por 200px. Funciona muy bien en FF y Chrome (30×30) pero en IE9 la imagen es 30×200. Ahora aquí está el pateador. Solo ocurre con ciertos archivos SVG, otros svgs escalan correctamente.

Parece que la diferencia es que uno está hecho de polígonos, y el otro está hecho de caminos.

no escala correctamente:

http://www.radiantinteractive.com/rs/images/allies/other/crocs.svg

escala correctamente:

http://www.radiantinteractive.com/rs/images/allies/technologyLogos/groovy.svg

¿Alguna idea sobre por qué sucede esto o cómo puedo obtener la primera para escalar proporcionalmente en ie9?

Para obtener una escala más uniforme en todos los navegadores, asegúrese siempre de especificar un viewBox pero deje de lado los atributos de width y height en su elemento svg . Creé una página de prueba para comparar el efecto de especificar los diferentes atributos de SVG en combinación con los anchos y alturas especificados en CSS. Compárelo uno al lado del otro en diferentes navegadores y verá muchas diferencias en el manejo.

Para arreglarlo en ie9 y no para quedarse con esto. No sé por qué, pero debe establecer el ancho: 100% a través de css-rule, pero no en img-tag. La relación de aspecto funcionará por arte de magia)) Me ayudó, espero que esta publicación ayude a otros.

También puede ver aquí: https://gist.github.com/larrybotha/7881691 : esta es la continuación de esta “historia”.


Corregir SVG en tags no se escalan en IE9, IE10, IE11

IE9, IE10 e IE11 no escalan correctamente los archivos SVG agregados con tags img cuando se especifican los atributos viewBox , width y height . Ver este codepen en los diferentes navegadores.

Las alturas de las imágenes no se escalarán cuando las imágenes estén dentro de contenedores más angostos que los anchos de las imágenes. Esto se puede resolver de 2 maneras.

Use sed in bash para eliminar atributos de ancho y alto en archivos SVG

Según esta respuesta en Stackoverflow , el problema se puede resolver eliminando solo los atributos de width y height .

Este pequeño script buscará de forma recursiva su directorio de trabajo actual para los archivos SVG y eliminará los atributos de compatibilidad con los navegadores cruzados:

 find ./ -name '*.svg' -print0 | xargs -0 sed -i "" -e 's/width="[0-9]*\.*\[0-9]*" //' -e 's/height="[0-9]*\.*\[0-9]*" //' 

Advertencias

La eliminación de los atributos de ancho y alto obligará a la imagen a ocupar todo el ancho de su contenedor en buscadores que no sean IE.

IE10 (otros navegadores requieren pruebas) escalará las imágenes a un tamaño arbitrario, lo que significa que necesitará agregar width: 100% a su CSS para que esas imágenes se ajusten a sus contenedores.

Target IE con CSS

Dado que la solución anterior requiere CSS de todos modos, también podríamos usar un truco para hacer que IE se comporte, y no preocuparnos por tener que administrar cada archivo SVG individual.

El siguiente objective serán todas las tags img contengan un archivo SVG, en IE6 + (solo archivos SVG compatibles con IE9 +).

 /* * Let's target IE to respect aspect ratios and sizes for img tags containing SVG files * * [1] IE9 * [2] IE10+ */ /* 1 */ .ie9 img[src*=".svg"] { width: 100%; } /* 2 */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { img[src*=".svg"] { width: 100%; } } 

Advertencias

Esto se dirige a cada etiqueta img contenga “.svg” en IE9, IE10 e IE11: si no desea este comportamiento en una imagen en particular, deberá agregar una clase para anular este comportamiento para esa imagen.

Pasé semanas probando todo tipo de soluciones para poder usar SVG en un sitio web adaptable al tamaño que funciona para los principales navegadores modernos.

Los SVG deben escalarse utilizando porcentajes de CSS e incluir imágenes embebidas en mapas de bits.

La única solución que he encontrado para el cambio de tamaño porcentual en IE es incrustar SVG externos en una etiqueta .

Existen varias soluciones para cambiar el tamaño de los SVG en IE a tamaños de píxeles estrictos, pero ninguno de ellos funciona para el cambio de tamaño porcentual.

He creado un conjunto de pruebas no exhaustivo aquí .

De alguna manera este scss arregló mi problema.

 ul { li { list-style: none; margin: 0; padding: 0; display: inline; img { height: 20px; margin: 0 10px; display: inline-block; } } } 

En realidad estaba haciendo una lista centrada de logotipos para mi pie de página y estaba teniendo problemas de ancho. Normalmente creo un bloque en línea con un elemento de bloque dentro de él. Crear un elemento en línea con un elemento de bloque en línea funcionó para mí. Esta es una implementación específica en la que apareció el error y realmente no resuelve cada error, pero espero que ayude a alguien a leer esto.