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

Question

[rqfqf]

• SVG в figma:
  

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

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

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

(ответ снизу)

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


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


та самая svg:

spoiler

SVG: https://cloud.mail.ru/public/ayi4/3rCCvbPdr
Virus total: https://www.virustotal.com/gui/file/221325447a5e93...

РЕШЕНО: черные линии видны из-за черного фона свг картинки (он под всеми слоями) и отсутствия стыков в html. Слои располагаются стык в стык только в фигме, но не в html. Добавляем на фон каждого слоя область с его цветом или ещё проще: прикидываем средний цвет СВГ, на фон всех слоёв ставим область с этим цветом. Пример - https://imgur.com/a/8TNNSfw

Comments

[Young11]

Попробуйте скачивать не вектор картинки с фигмы , а сам фрейм

[Ankhena]

Ваша картинка из облака, артефактов не видно.

spoiler

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

Какая-то сложная многоходовка. SVG прямо кодом достается из фигмы за 1,5 клика.

так

[rqfqf]

Ankhena, извиняюсь, была не та ссылка, сейчас прикрепил с черными линиями. Спасибо за лайфхак.

[rqfqf]

Young11, это я и делал

[rqfqf]

РЕШЕНО: черные линии видны из-за черного фона свг картинки (он под всеми слоями) и отсутствия стыков в html. Слои располагаются стык в стык только в фигме, но не в html. Добавляем на фон каждого слоя область с его цветом или ещё проще: прикидываем средний цвет СВГ, на фон всех слоёв ставим область с этим цветом. Пример - https://imgur.com/a/8TNNSfw

Answer 1

[Adamos]

SVG сделан через задницу, конечно - вместо единой фигуры с радиальным градиентом, которую можно нарисовать по стандарту, насобачены тысячи точек.

Comments

[rqfqf]

JPG 848х881 конвертировал в SVG на https://png2svg.com/, лучшее, что нашёл из конвертеров, не считая черных линий.

[Antony Bark]

хорошо бы пометить ответ решением, отвечено объёмно и качественно. Спасибо!

p.s. установите Inkscape \ Illustrator \ Corel и исправляйте подобные вещи руками. Локально. Это самый грамотный вариант, никакая автоматика такие косяки не исправит.

[Adamos]

Antony Bark, для грамотности - лучше вычеркните Corel из списка.

[Antony Bark]

Adamos, чем руководствуетесь давая этот совет? Дополню: опыт работы с вектором у вас большой?

[Adamos]

Antony Bark, глубокой неприязнью к результатам работы этого продукта по опыту вынужденной работы с ними.

[Antony Bark]

Adamos, "глубокой неприязнью" это понятно )
Есть какие-то технические замечания, например:
- какие задачи не может выполнить этот инструмент
- есть задачи, выполняемые, но неправильно
- ошибки в решениях
Т.е. отриньте эмоции, рассуждаем по делу. Спасибо

[Antony Bark]

Пока вы отвечаете, хочу заметить, что в Corel интегрирован один из лучших трассеров в отрасли. По соотношению удобство\качество я ставлю его на первое место. Трассировка одна из основных операций при работе с SVG. Превратить растровое лого в векторное, с минимумом примитивов и точек в них, плюс соответствие формы\цвета, за разумное время.. - Назовите хотя бы три инструмента для этой операции?

пример: www.turbopro.ru/index.php/coreldraw/6418-coreldraw...

простите за Дзэн, вот пример скорости\качества операции трассировки в Corel: https://dzen.ru/media/id/5d6f922f0ce57b00ac5ee643/...

[Adamos]

Antony Bark, well, buddy, you'd sell me that pen... if I'd really interesting in one. Or another.
Когда мне в прошлый раз понадобился векторизатор, я использовал... а не помню уже, что. Скрипты где-то на работе валялись. А вы с Корелом не расставайтесь, конечно. Эмоции в сторону и все такое.

[Antony Bark]

Adamos, и зачем начинающим такой "опыт", если по факту его и нет? Эх
Пусть люди пробуют инструменты, наша задача, как опытных, подсказывать им возможности. А Corel входит в тройку гигантов индустрии. Вот о чём бы стоило сказать в его сторону, так о жадности, но и адобовцы в этом отношении ничуть не лучше. Потому Inkscape на первое место поставил, хоть он и победнее и технологически и в GUI. Удачи вам

[Adamos]

Antony Bark, по факту я трахался с этим продуктом, начиная с 4-й версии, когда еще сам работал дизайнером, до купленной в контору версии X3, с которой я, уже как сисадмин, попрощался, когда она перестала ставиться на Десяточку, на которую переехали мои подопечные дизайнеры. Они, кстати восприняли новость об отказе от Корела довольно равнодушно, так как и пользовались им минимально, исключительно для импорта чужих макетов.
Сам же давно сижу на Линуксе, и Inkscape действительно хватает, а когда не хватает - есть другие инструменты, которые просто работают.

Answer 2

[Tony]

Удалите весь этого треш (КТО И ПОЧЕМУ это сделал) и залейте в Figma нормальным градиентом, как здесь уже советовали. Не надо ничего конвертировать, этому кошмару не место в верстке, с таким количеством слоев это лишняя нагрузка при отвратном качестве.

Пойду помою глаза с мылом :(