Почему когда svg уменьшаешь она блюрится?

Question

[lavezzi1]

Здравствуйте. Нарисовал в иллюстраторе очень простую иконку, выровнял по пикселям и т.д. Вставляю через background-image. Изначально рисовал размером 40х40, ставлю размер фона такой же. Все шикарно. Но если нужно сделать больше или меньше - блюрится. Можно как то избежать? Или я что то не правильно делаю?

Answer 1

[teslor]

При изменении размеров изображения может стать невозможно разместить его пиксель в пиксель. Браузер использует для таких случаев антиалиасинг, что проявляется в размытии границ. Можно попробовать задать для SVG свойство shape-rendering: crispEdges, которое выключает антиалиасинг. Или перерисовать иконку чтобы она нормально выглядела хотя бы при каких-то стандартных размерах.

Comments

[lavezzi1]

Перересовать под минимальный маленький размер, имеете ввиду?

[teslor]

Не обязательно. Вот здесь можете подробнее почитать: graphicdesign.stackexchange.com/questions/32100/qu...

[Лучник *range attack +10*]

А если сделать svg-спрайт?