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

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.

a

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!