SVG Preserve la relación de aspecto en Android

Tengo problemas de escalado SVG en teléfonos Android.

Un par de partes de mi sitio web se basan en tener ambas dimensiones de ancho y alto para SVG embeded vía etiqueta <img> . Todos los navegadores, excepto Android 4.1.2 Navegador nativo (NO CHROME), escala SVGs correctamente y perfectamente sin distorsionar Aspect Ratio.

Aquí hay una captura de pantalla de cómo aparece en Firefox (y todos los navegadores) Introduzca aquí la descripción de la imagen

Aquí hay una captura de pantalla de cómo aparece en Android 4.1.2 Native Browser. Introduzca aquí la descripción de la imagen

URL de prueba http://prashantsani.com/demos/svgIssue/

He intentado todas las soluciones a continuación, pero ninguno de ellos funcionó.

El ajuste de anchura, altura y cuadro de vista no funciona. Además, preserveAspectRatio tampoco funciona. <svg width="443.5" height="100" viewBox="0 0 443.5 100" preserveAspectRatio="xMidYMid meet">
Embalaje dentro de otro SVG no hacer el truco (También, no quiero centrar la imagen, más bien una forma de escala de la imagen propotionately). Programáticamente centrando svg path
He probado esto: SVG Redimensionar la imagen fuera de la relación de aspecto, pero no funciona bien. El ancho y la altura ya están establecidos en enteros y no% o px.

Por favor, lea lo siguiente antes de contestar:

Dado que el diseño exige anchura y altura en algunos lugares, tengo que mantener ambos en algunos lugares.
Este problema sólo ocurre en NATIVE BROWSER APP en Android 4.1.2 {"Browser" App}. Funciona brillantemente, como se esperaba en Chrome y todos los demás navegadores de Android 4.1.2.
Un violín o un códig será útil si encuentra una solución.
No está planeando usar ningún formato de imagen que no sea SVG.
Anchura y altura y se menciona en% a través de css …. y SVG tiene que escalar en consecuencia.

Gracias.

Según este artículo , max-height: 100%; Y / o max-width: 100% dentro de un atributo de estilo parecen ser posibles correcciones.

En mi propio caso, sin embargo, sólo había especificado width="32" con una viewBox="0 0 32 32" , una vez que agregué height="32" ya no tenía ningún problema. Yo estaba demasiado acostumbrado a la mayoría de los navegadores que compensan esas cosas.

La pregunta que usted proporcionó tenía algunos problemas al funcionar así que modifiqué con los atributos estándares del HTML y trabajado. Probado en una tableta Inco Sphere.

 <image width="100%" height="100%" src="http://upload.wikimedia.org/wikipedia/commons/e/e5/Tux_chico.svg" preserveAspectRatio="xMidYMid meet"> <image width="100" height="100" src="http://upload.wikimedia.org/wikipedia/commons/e/e5/Tux_chico.svg" preserveAspectRatio="xMidYMid meet" /> <!-- Image By Gonzalo Rivero (Own work) [GFDL (http://www.gnu.org/copyleft/fdl.html) or CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons -->