@rqfqf

Баг с рендером SVG в html/css — Как исправить?

  • SVG в figma:

631788d683aab495684152.png
Открываю svg картинку через браузер, ПКМ - исследовать элемент, копирую код и вставляю в вёрстку.

  • На сайте вижу это (черные полосы на лице)

63178937c927c888857822.png

Собственно, откуда они появляются?
(ответ снизу)

P.s. в фигме заметил, что черные полосы лежат именно на стыке слоёв (они находятся друг к другу вплотную, ни капли не залезая друг на друга)
6317898830c70384589067.png

Можно пофиксить баг, убрав стыки, но есть картинки, где таких слоёв очень много:
631789a49132f221563261.png

та самая svg:

РЕШЕНО: черные линии видны из-за черного фона свг картинки (он под всеми слоями) и отсутствия стыков в html. Слои располагаются стык в стык только в фигме, но не в html. Добавляем на фон каждого слоя область с его цветом или ещё проще: прикидываем средний цвет СВГ, на фон всех слоёв ставим область с этим цветом. Пример - https://imgur.com/a/8TNNSfw
  • Вопрос задан
  • 259 просмотров
Пригласить эксперта
Ответы на вопрос 2
Adamos
@Adamos
SVG сделан через задницу, конечно - вместо единой фигуры с радиальным градиентом, которую можно нарисовать по стандарту, насобачены тысячи точек.
mTU.svg
Ответ написан
Figma-designer
@Figma-designer
Удалите весь этого треш (КТО И ПОЧЕМУ это сделал) и залейте в Figma нормальным градиентом, как здесь уже советовали. Не надо ничего конвертировать, этому кошмару не место в верстке, с таким количеством слоев это лишняя нагрузка при отвратном качестве.

Пойду помою глаза с мылом :(
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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