Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

css - Blurry SVG images in chrome for Android


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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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!


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...