Как исправить размытое отображение svg-иконок в различных браузерах?

Question

[monochromer]

Всем привет!

Есть пример svg-иконки.
Она нормально отображается только в Chrome. В FF и IE она размывается и обрезается.

Как исправить отображение? Что можете подсказать?

Answer 1

[Lynn «Кофеман»]

jsfiddle.net/qbshau80/4
Добавить transform: translateZ(0); в .link svg

В IE не проверял, но в FF помогает.

Насколько я понимаю, в FF при отрисовке SVG учитываются все родительские отступы, причём если они не в точности не попападают в пиксели, то в самих блоках это незаметно, но алгоритм сглаживания SVG это замечает. Например если у родителя отступ не ровно 5px, а, допустим 4.95px, то вы этого никогда не заметите, но SVG уже не будет чётко попадать в пиксели и будет «размытым».

transform форсирует округление границы картинки до пикселей и всё встаёт на свои места.

Comments

[monochromer]

Отметил решением, но некоторых иконках такой способ, наоборот, сильнее размывает изображение, так что придется метод применять выборочно.

[Finesse]

monochromer: В OS X помогло

[Lynn «Кофеман»]

monochromer: Скорее всего эти иконки в принципе не попадают в пиксели. Можно пример?

[monochromer]

Алексей Тен: пример нельзя, так как дизайнеры скорее всего будут против (я взял только одну для теста). Так я тоже склоняюсь к пиксельной подгонке каждой иконки. Да и вообще не стоит делать иконки такими маленькими. Не зря же в Material Design они идут минимум 24px.

Finesse: спасибо.

Answer 2

[Александр Таратин]

https://jsfiddle.net/qbshau80/3/
https://developer.mozilla.org/ru/docs/Web/SVG/Attr...

Comments

[Finesse]

Не очень удачно получилось: https://habrastorage.org/files/cab/8c2/22f/cab8c22...

[Finesse]

(FF42, OS X)

[Александр Таратин]

Finesse: Тогда не знаю, у меня (win10) crispEdges везде исправляет.

[monochromer]

Александр Таратин: спасибо за shape-rendering: crispEdges. Finesse: а как иконка отображается без shape-rendering: crispEdges?

[Finesse]

monochromer: также размыто