SVG пикселизация в хром

Question

Это очень странно.Я использую изображения SVG из-за небольшого размера файла, четкого рендеринга и масштабируемости (объекты оживляют совсем немного).Он отлично работает в FF, т.е. 9, Safari и iPad, но в Chrome некоторые изображения SVG воспроизводятся очень плохо.

Есть идеи, почемуэто может происходить?Сами файлы SVG очень малы.

Вот несколько примеров SVG

http://c975805.r5.cf2.rackcdn.com/rs-grails-r4/passion/social.svg

http://c975805.r5.cf2.rackcdn.com/rs-grails-r4/passion/social.svg

Answer 1

Так или иначе, это законная ошибка Chrome. И есть исправление, сделайте svg «большими», файлы svg, которые внутренне сообщают, что они слишком малы, вызывают эту ошибку.

Answer 2

После многих исследований я наконец нашел исправление:
экспортируйте svg в два раза больше необходимых измерений (поэтому я назвал его filename@2x.svg)
затем в css добавьте transform: scale(0.5)

Результат в Chrome будет выглядеть так же, как в Firefox.

Answer 3

Я тоже столкнулся с этой ошибкой с элементом с фоном SVG. Обходной путь должен был уменьшить непрозрачность на 0,01, то есть:

.thing {
    background: url('my-image.svg');
    opacity: 0.99;
}