Размытые изображения SVG в хром для Android

Чтобы избежать адской плотности пикселей в мобильных телефонах, я использую SVG файлы в качестве фоновых изображений в моем CSS.

Chrome для android кажется рендерингом inline-svg просто отлично, но сбой, если svg

  • используется в css с background-image и нормальным URL
  • используется в css с background-image и данными uri
  • используется с элементом image

Брошюра обозревателя Android 4 отлично работает. (и все другие мобильные телефоны, которые я тоже пробовал)

Вы можете посетить эту скрипку и проверить это. Увеличьте масштаб, чтобы увидеть разницу.

Кто-нибудь знает, почему chrome использует некоторые предварительно обработанные растровые изображения здесь?

ОТВЕТЫ

Ответ 1

Как указывали другие ответы в этом выпуске и других подобных проблемах, 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>

Не исследуя фактический источник или процессы хром, я могу только предположить, что путем вложения текста он принудительно перенаправляет SVG на масштабирование для устройств с высоким разрешением.

Это решение (в браузерах, которые я смог протестировать на Android/Chrome) работает независимо от того, как используется элемент фонового изображения, вращения, фиксированная позиция и т.д. И даже кажется очевидным при масштабировании.

Наслаждайтесь!

Ответ 2

Это известная проблема https://code.google.com/p/chromium/issues/detail?id=161982

Когда SVG отображался как изображение (или фоновое изображение), он был первоначально отображен на плотность пикселей CSS, что делало его размытым на устройствах, где 1 CSS px!= 1 device px, в том числе большинство телефонов Android высшего класса.

Эта проблема была исправлена ​​в Chrome 25 (текущая версия на момент написания), однако изображения становятся размытыми, когда вы увеличиваете область просмотра.

Эта проблема исправлена ​​в Chrome 26 (в настоящее время Chrome Beta, доступной в магазине воспроизведения), изображения SVG и фоны остаются острыми.

Ответ 3

Если вы вставляете SVG файл, файл будет (в зависимости от хоста, например, Википедии) предварительно визуализирован. Поэтому при загрузке изображение будет отображаться для указанного размера. Встроенный SVG (прямое кодирование на странице) будет изменяться при изменении размера страницы. Но я не уверен в мобильных браузерах, поскольку они не изменяют размер элементов на странице, они просто "увеличивают"

Итак, в основном то, что вы делаете, рисует SVG на холсте (каламбур!), а затем масштабирует холст. Inline имеет прямой SVG... так лучше....

Ответ 4

Для меня решение, пока потребовалось очень много времени, чтобы обнаружить, были мои элементы css:

border-radius: 4px;

Это устранило мои проблемы, однако я не смог их воссоздать, чем на сайте, над которым я работал, но вот сценарий, который я пытался воссоздать на мобильном устройстве:

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

Удачи, советую проверить, есть ли класс, который может повлиять на рисование элемента.