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

Question

[Kovalsky]

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

Вот эта самая SVG на codepen.

Comments

[Роман]

Не уверен что прав, но вроде как в svg есть какойто механизм управления способом отрисовки путей, но это не точно. Завтра попробую найти источник, в котором как мне кажеться я об этом читал.

[Роман]

Чтото похожее на color-interpolation или color-interpolation-filters, но точно не помню

[Kovalsky]

Роман, да, есть shape-rendering который и регулирует резкость отрисовки, но ни одно из его значений не привело к антиалиазингу)

[Роман]

Kovalsky, к сожалению других идей кроме озвученных в этом вопросе нет и у меня.

Answer 1

[Athanor]

Добрый день.

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

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

Было:


Стало:


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

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

Pavel Palenin
Head of design in Athanor

Comments

[Kovalsky]

Спасибо за ответ!

Хорошо, попробую сделать линии потолще.

На самом деле я думал перевести всё в растр и надеяться что итоговая картинка будет смотреться нормально, но конкретно с PNG пока вышло так же как и SVG.

[Athanor]

Kovalsky, это мы тоже пробовали) отсюда и вывод, что дело все же в алгоритмах рендеринга. Отметьте решением, если помогло