Как решить проблему с SVG?

Question

[Test Test]

Добрый день!

У нас на сайте все иконки сделаны в SVG формате, и задаются через CSS стили. Иконки везде отображаются более менее нормально, а вот в Mozila Firefox они сдвигаются на 7-8 пикселей вниз. Не подскажите, как исправить данный недочёт?

https://yadi.sk/i/U0VSaENtfeV2j - отображение в браузерах Chrome, Opera и проч.
https://yadi.sk/i/eWMVHVj-feVH4 - отображение в браузере Mozilla Firefox.
8b.kz/fr8v - сайт

Comments

[Nikolay Talanov]

А ссылочку на сайт можно? А то у меня нет диплома медиума.

[Евгений Петров]

Картинки нам без надобности

[Test Test]

Nikolay Talanov: @Petroveg: 8b.kz/fr8v пожалуйста.

[Test Test]

Евгений Петров: 8b.kz/fr8v пожалуйста.

[Nikolay Talanov]

stackoverflow.com/questions/24517865/svg-sprite-ic... нашел вот такое, попробуйте добавить указанный в ответе атрибут к svg если это возможно.

[Test Test]

Nikolay Talanov: спасибо!

[Test Test]

Nikolay Talanov: попробовал, не получилось. И в хроме вообще исказились очень сильно, при добавлении этого тега...

Answer 1

[Nikolay Talanov]

По ходу нашел решение на основе этого stackoverflow.com/questions/19076655/svg-sprite-ba...
В общем в background-size: необходимо указывать не только x но и y величину. На основе того, что у вашего оригинального svg спрайта (gamma.antikvarus.ru/themes/frontend_v2/images/svg/...) значения 960/560 (основываясь на viewBox), а на сайте у вас background-size: 424px; то в итоге получил такое значение
background-size: 424px 247px;
Как только его поставил, позиция svg стала одинаковой в хроме и фф, а если точнее, то стала как в ff, то есть смещенная вверх.
Тестировал на основе иконки логина (Вход), у которой по умолчанию было background-position: -65px -28px;
Вот так с измененными значениями (-22px вместо -28) выглядит в хроме

а так в FF


Так что просто добавляете y значение для background-size и увеличиваете y значение background-position на 6px.

Comments

[Test Test]

Спасибо вам, добрый человек! Вечером попробую сделать!

[Test Test]

Да, всё работает!

Answer 2

[Ilya Korablev]

Вообще, ненавижу когда на сайтах ставят SVG икноки. Например, когда я захожу на Тостер через мою Люмию (а в ней IE?), то иконки просто напросто не отображаются. Вообще, во всех браузерах на WinPhone не отображаются.

ЗЫ: простите за реплику, а не за ответ.