Почему в Safari обрезаются svg иконки?

Question

[Александр Цымбал]

Добрый вечер хабровчане.
Стал замечать, что svg-иконки в Safari имеют "привычку" обрезаться справа и снизу. В то время как на Android и в Windows (в том числе на экранах с повышенным DPI) в браузерах Chrome (и других из семейства) и Firefox всё выглядит корректно.
Причём это происходит не каждый раз (имею в виду, что если разместить рядом 2 одинаковые картинки, то обрезаться может только одна из них). Да, иконки имеют viewbox 512x512px, но выводятся в маленьком масштабе (20x20px). Но проблема только в Safari.
Возможно, кто-то из вас сталкивался с ситуацией и победил её. Прошу поделиться идеями.

(если на картинке не сразу заметно, то откройте её в отдельной вкладке в 100% масштабе)

Comments

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

Живых примеров бы

Answer 1

[Александр Цымбал]

Долго гуглил на эту тему, в том числе и на английском. Информации, почему-то, нет.
Полез смотреть, как реализованы svg-иконки на крупных сайтах. И на абсолютно всех крупных сайтах иконки задизайнены так, что имеют небольшой зазор относительно краёв viewBox. Так же задизайнены и вот эти иконки, например https://heroicons.com/ .
Что касается решения моей проблемы, я не стал перерисовывать все иконки, а просто поправил viewbox. Иконки у меня в проекте разношерстные и пиксельперфект не так важен. Принцип заключается в следующем: viewbox, как мы знаем, описывает координаты левой верхней и правой нижней точки обрезки. Всего 4 числа, вроде: "0 0 512 512". Увеличим область просмотра на 5-10% (или на половину толщины линий в иконке). Например, у иконки с viewbox="0 0 100 100" устанавливаем viewbox="-10 -10 120 120" (т.е. добавили с каждого края по 10 единиц). Этим мы как бы уменьшим масштаб иконки в рамках viewbox'а, отодвинув края рисунка от краёв viewbox'а.

И проблема решена! Надеюсь, кому-то еще пригодится.

Answer 2

[imko]

object-fit? Плюс имей в виду сафари непропорционально масштабирует картинки, так что если указываешь одно измерение ставь второе как авто

Comments

[Александр Цымбал]

Иконки не как <img> выведены, они подключаются из спрайта конструкцией <svg><use ...></use></svg>. Да, у меня всегда указываются оба размера. Конечно, бывает, что указываются в rem, а не px. Возможно, конечно, из-за этого. Но итоговые размеры всегда кратные - 12px, 14px, 16px, 20px и т.д. Не бывает значений типа 14.5875px.

[imko]

Александр Цымбал, если я все правильно понял то сафари как всегда инвалид и не понимает все из корректных синтаксисов свг. Вот что я нашел по этому поводу https://github.com/Modernizr/Modernizr/issues/213#...

[Михаил]

Александр Цымбал, а какой dispaly у svg? Попробуйте block (кажется недавно у меня похожая проблема была)

[Александр Цымбал]

Михаил, Михаил, интересная идея. Похоже, у меня там везде inline-flex или inline-block. Надо будет проверить. Позже вернусь с ответом.

[Александр Цымбал]

Михаил, это не помогло. Решение описал в вопросе