CODEWITHSUNDEEP
androidhtmlsvgresponsive-design
Prashant Sani
Prashant Sani

Reputation: 456

SVG Preserve Aspect Ratio in Android

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) enter image description here

Here is screenshot of how it appears on the Android 4.1.2 Native Browser. enter image description here

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.

Upvotes: 7

Views: 3450

Answers (2)

Danny Mahoney
Danny Mahoney

Reputation: 1255

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.

Upvotes: 1

Ruslan L&#243;pez
Ruslan L&#243;pez

Reputation: 4477

The question you provided had some troubles when running so I modified with standard html attributes and worked. Tested on an Inco Sphere tablet.

<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 -->

In case you want to run it directly in your device i made a fiddle too.

Upvotes: 0

Related Questions