Menu
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
background-image and a normal urlbackground-image and a data uri image elementThe 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?
655
Solution. It seems the solution is to set the desired size of your SVG in your editing program and then make certain all of your pixels align to the grid. This will still allow your SVG to scale up but will also allow it to render at the smaller size.
Android Studio includes a tool called Vector Asset Studio that helps you add material icons and import Scalable Vector Graphic (SVG) and Adobe Photoshop Document (PSD) files into your project as vector drawable resources.
Displaying SVG in web browsers like Chrome, Firefox and Internet Explorer can be done in several ways: Point the browser to the URL of the SVG file. Embed SVG inside an HTML page.
SVG is quite well-supported in mobile browsers. This means that you can link to a SVG file on your page in most mobile browsers and it just works. But… there is one big problem: Android versions under 3 don't have any kind of support for SVG in the stock browser.
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!
55
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.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
