Android用ChromeのぼやけたSVG画像

Question

---

携帯電話でさまざまなピクセル密度の地獄から逃れるために、私はCSSの背景画像としてSVGファイルを使用しています。

Android向けChromeがうまくインラインSVGをレンダリングするようだが、SVG

• がbackground-imageとCSSで使用され、通常のURL
• がbackground-imageとCSSとデータのURIで使用されている場合失敗
• はimage要素

うまくアンドロイド4つの作品の株式のブラウザで使用されています。 （と私が試した他のすべての携帯電話も）

this fiddleを訪問してチェックアウトすることができます。違いを見るにはズームインしてください。

クロムがここでプレレンダリングされたビットマップを使用する理由は誰でも知っていますか？

Answer 1

SVGファイルを挿入している場合、そのファイルは事前にレンダリングされたウィキペディアなどのホストに依存します。したがって、読み込み時には、与えられたサイズの画像がレンダリングされます。インラインSVG（ページに直接コード化された）は、ページのサイズを変更するとサイズを変更します。しかし、モバイルブラウザでは、ページの要素のサイズを変更しないので、わかりません。

基本的には、SVGをキャンバスにペイントすることですキャンバスをズームします。インライン直接SVGを持っています...ので、より良い....

Answer 2

SVGは、画像（または背景画像）として表示されたとき、これは、それが最初になって、CSSの画素密度にレンダリングされた既知の問題https://code.google.com/p/chromium/issues/detail?id=161982

あります1つのCSS px！= 1デバイスpx（ほとんどのハイエンドのAndroid搭載端末を含む）ではぼやけています。

その問題は、しかし、画像はあなたがビューポートをズームとして再びぼやけになる、クロム25（執筆時点での最新バージョン）で修正されました。

この問題は、Chromeで26（現在はクロームのベータ版を固定され、利用可能プレイストアで）、SVGイメージと背景がシャープなままです。

Answer 3

この問題と他の同様の問題で他の回答が指摘されているように、SVGのレンダリングはクロームとネイティブのアンドロイドウェブブラウザで問題になります。これはクロム/ネイティブブラウザの既知の問題です。

数日にわたって多くのソリューションを調べた後、私は偶然この回避策を見つけました。このトリックは、SVGファイル内にテキストを埋め込むことです。これは単一の透明な文字にすることができます。

たとえば、これをSVGファイルに追加します。実際のクロム源またはプロセスを調査することなく

<text transform="matrix(1 0 0 1 7.1079 13.5215)" opacity="0" font-family="'MyriadPro-Regular'" font-size="12">a</text> 

Iは、テキストのみを埋め込むことにより、高解像度のデバイスのためのスケールアップで再レンダリングされるSVGを強制されると仮定することができます。

このソリューション（Android/Chromeでテストできたブラウザ）は、背景画像要素の使用、回転、固定位置などに関係なく機能します。そして、ズームの下ではっきりしているように見えます。

お楽しみください！私にとって

Answer 4

、解決策は発見するために非常に長いを取ったながら、私の要素のCSSた：これは私の問題を修正し

border-radius: 4px; 

、しかし私は私が持っているサイトに比べてそれを上に再現することができませんでした要素の描画に影響を与えるかもしれないクラスがある場合

http://jsfiddle.net/rc8Hh/31/

幸運、私の助言チェック：ここで働いたがされて、私は携帯電話上で問題を再現しようとしていたバイオリンです。