lazalu68
@lazalu68
Salmon

Как сгладить контуры SVG?

Собственно даже и добавить нечего. Есть логотип в формате SVG, у которого при нужной ширине сильно рваные края, то есть они прямо сочатся пикселями. С компа можно и не заметить, но с мобильника это очень хорошо видно. Существует какой-нибудь способ накатить на него антиалиазинг? Или может быть проще в другой формат перевести, и если да, то в какой?

Вот эта самая SVG на codepen.
  • Вопрос задан
  • 904 просмотра
Пригласить эксперта
Ответы на вопрос 1
Athanor
@Athanor
Лайк + Решение: не жмись, нажми
Добрый день.

Поколдовали с вашей svg-шкой и со стороны дизайна и на фронте, вывод: видимо дело в том, что браузеры рендерят векторные изображения таким образом, что получаются такие "лесенки", хотя на самом деле в самом файле все хорошо. У вас была проблема с тем, что пропорции исходного изображения не соответствуют пропорциям контейнера, в котором оно используется, думали, что из за этого проблема — тоже не помогло.

Предлагаем тогда, чтобы сгладить этот эффект, немного изменить само изображение и "утолщить" тонкие элементы, это не решит проблему, но сделает её менее заметной.

Было:
5e3d5a1152258521154092.png

Стало:
5e3d5a2e71f32230995787.png

Исправленный файл
https://mab.to/sG4WI9YUe

Вообще алгоритмы рендеринга векторов бывают разные, можно посмотреть эту статью и попробовать поискать ещё решение: https://habr.com/ru/post/318880/

Pavel Palenin
Head of design in Athanor
Ответ написан
Ваш ответ на вопрос

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

Похожие вопросы