SVG Preserve Aspect Ratio in Android

Question

I am having issues of SVG Scaling on Android Phones.

Couple of parts of my website are based on having both width and height dimensions for SVGs embeded via <img> tag. All the browsers except Android 4.1.2 Native Browser(NOT CHROME),scale SVGs Properly and perfectly without distorting Aspect Ratio.

Here is screenshot of how it appears on Firefox(and all the browsers)

Here is screenshot of how it appears on the Android 4.1.2 Native Browser.

Testing URL http://prashantsani.com/demos/svgIssue/

I tried all below solutions but none of them worked.

1. Setting width, height and view-box does not work. Also, preserveAspectRatio does not work either. <svg width="443.5" height="100" viewBox="0 0 443.5 100" preserveAspectRatio="xMidYMid meet">

2. Wrapping up inside another SVG did not do the trick (Also, i don't want to center the image, rather need a way scale the image propotionately). Programmatically centering svg path

3. I Tried this : SVG Resize Image out of aspect ratio but it does not work either. The width and height is already set in integers and not % or px.

Please read following before Answering:

1. Since the layout demands both width and height at some places, I have to keep both at some places.
2. This issue ONLY happens in NATIVE BROWSER APP on Android 4.1.2{"Browser" App} . It works brilliantly, as expected in Chrome and all other browsers on Android 4.1.2.
3. A fiddle or codepen will be helpful if you find a solution.
4. Not planning to use any image format other than SVG.
5. Width and height and mentioned in % via css....and SVG has to scale accordingly.

Thanks.

Answer 1

As per This Article, max-height: 100%; and/or max-width: 100% within a style attribute seem to be potential fixes.

In my own case however, I had only specified width="32" with a viewBox="0 0 32 32", once I added height="32" I no longer had any issues. I was too used to the majority of browsers that compensate for such things.