AlexanderTsymbal
@AlexanderTsymbal
tsymbal.su

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

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

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

6144b25ef1839627293808.png
  • Вопрос задан
  • 106 просмотров
Решения вопроса 1
AlexanderTsymbal
@AlexanderTsymbal Автор вопроса
tsymbal.su
Долго гуглил на эту тему, в том числе и на английском. Информации, почему-то, нет.
Полез смотреть, как реализованы 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'а.

И проблема решена! Надеюсь, кому-то еще пригодится.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@imko
object-fit? Плюс имей в виду сафари непропорционально масштабирует картинки, так что если указываешь одно измерение ставь второе как авто
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы