Geek Answers Handbook

Aspect ratio of SVG to save in Android

I'm having problems with SVG Scaling on Android phones.

Several parts of my site are based on the fact that both the width and the height are used for the SVG placed in the <img> tag. All browsers except Android 4.1.2 Native Browser (NOT CHROME) scale SVG. Right and perfect without distorting the aspect ratio.

Here's a screenshot of how it displays in Firefox (and all browsers) enter image description here

Here is a screenshot of how it is displayed in Android 4.1.2 Native Browser. enter image description here

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

I tried all of the solutions below, but none of them worked.

  • Adjusting the width, height and viewing area does not work. In addition, preserveAspectRatio does not work either. <svg width="443.5" height="100" viewBox="0 0 443.5 100" preserveAspectRatio="xMidYMid meet">

  • Finishing inside another SVG didn't do the trick (Also, I don't want to center the image, rather, I need to scale the image). Software Centering Path svg

  • I tried this: SVG Resize image from aspect ratio , but it doesn't work either. Width and height are already given by integers, not% or px.

Please read the following answers before answering:

  • Since in some places the layout requires both width and height, I have to keep both in some places.
  • This problem ONLY occurs in the NATIVE BROWSER APP application on Android 4.1.2 {Browser application}. It works brilliantly, as expected in Chrome and all other browsers on Android 4.1.2.
  • A violin or code will be useful if you find a solution.
  • Do not plan to use any image format other than SVG.
  • Width and height are both indicated in% through css .... and SVG should scale accordingly.

Thanks.

+7
android html responsive-design svg
source share
2 answers

According to this article , max-height: 100%; and / or max-width: 100% in the style attribute seems to be potential fixes.

In my case, however, I only specified width="32" with viewBox="0 0 32 32" , as soon as I added height="32" I had no more problems. I'm too used to most browsers that make up for such things.

+1
source share

In the question that you provided , there were some problems at startup, so I modified the standard html attributes and worked. Tested on 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 -->

If you want to run it directly on your device, I made a fiddle .

0
source share

More articles:


All Articles