css - Blurry SVG images in chrome for Android

Question

---

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

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!