Blurry SVG images in chrome for Android
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!
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.
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:
Good luck, my advise check if there is a class that might be affecting the drawing of the element.