the Blurry SVG images in chrome for Android



what is the current html standard (4)


To escape the hell of different pixel densities in mobile phones, I use SVG-files as background images in my css.

Chrome for android seems to render inline-svg just fine, but fails if the svg

  • is used in css with background-image and a normal url
  • is used in css with background-image and a data uri
  • is used with an image element

The stock browser of android 4 works just fine. (and all other mobile phones I tried, too)

You can visit this fiddle and check it out. Zoom in to see the difference.

Anyone knows why chrome uses some pre-rendered bitmaps here?


Answer #1

If you are inserting a SVG file, the file will be (depending on the host, Wikipedia for example) pre-rendered. So therefore on load, the image will render for the size given. Inline SVG (Directly Coded into page) will re-size when the page re-sizes. But, I'm not sure about mobile browsers as they don't resize the elements in the page, they just "zoom"

So basically what you're doing is painting an SVG onto a Canvas (pun!) then zooming a canvas. Inline has the direct SVG... so better....


Answer #2

This is a known issue https://code.google.com/p/chromium/issues/detail?id=161982

When SVG was rendered as a image (or background image) it was originally rendered to CSS pixel density, making it blurry on devices where 1 CSS px != 1 device px, which includes most high-end Android phones.

That issue was fixed in Chrome 25 (current version at time of writing), however the images become blurry again as you zoom the viewport in.

This issue is fixed in Chrome 26 (currently Chrome Beta, available in the play store), SVG images and backgrounds remain sharp.


Answer #3

As other answers have pointed out in this issue and other similar issues SVG's rendering is problematic in chrome and the native android web browser. It's a known chrome / native browser issue.

After looking at many solutions over a number of days I stumbled on this workaround by chance. The trick is to embed text inside the SVG file, this can be single transparent character.

For Example, add this (or similar) to your SVG files.

<text transform="matrix(1 0 0 1 7.1079 13.5215)" opacity="0" font-family="'MyriadPro-Regular'" font-size="12">a</text>

Without investigating the actual chrome source or processes I can only assume that by embedding text it is forcing the SVG to be re-rendered on scale-up for the high dpi devices.

This solution (on the browsers I've been able to test on Android/Chrome) works no matter how the background-image element is used, rotations, fixed position etc. And even seems to be clear under zoom.

Enjoy!


Answer #4

For me, the solution whilst it took a very long to discover was my elements css:

border-radius: 4px;

This fixed my issues, however I have not been able to recreate it over than on the site I have been working on but here is the fiddle that I was trying to recreate the problem on mobile:

http://jsfiddle.net/rc8Hh/31/

Good luck, my advise check if there is a class that might be affecting the drawing of the element.





svg