7

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.

Community
  • 1
  • 1
Prashant
  • 446
  • 1
  • 4
  • 15
  • 1
    It's completely counter-intuitive, but I believe you specify the SVG's (and its internal elements') `width` and `height` attributes in pure pixels, then scale the object up or down with CSS from there. Something about px being arbitrary orienting points within SVG's rendering model. – Tigt Sep 25 '14 at 23:16
  • I used width and height in px, did not make any difference. also i have used viewBox and preserveAspectRatio. did not work either. – Prashant Jan 23 '15 at 04:33
  • It may, unfortunately, be a browser bug. [Android has notoriously poor SVG rendering](http://thatemil.com/blog/2014/04/06/intrinsic-sizing-of-svg-in-responsive-web-design/). – Tigt Jan 24 '15 at 00:24

2 Answers2

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.

Danny Mahoney
  • 1,255
  • 2
  • 13
  • 24
0

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.

Community
  • 1
  • 1
Ruslan López
  • 4,433
  • 2
  • 26
  • 37