Как избавиться от странных линиий и пикселей в SVG?

Question

[Сергей Борисов]

Карту мы нарисовали в FIGMA и она нам нужна в формате SVG. Но после сохранения появляются странные линии и пиксели.

Карточка -

Кое-что становится более заметным при увеличении изображения в браузере. Можете дать совет, как от этого избавиться и почему оно возникает?

Проблема 1 -
Проблема 2 -
Проблема 3 -

Сама карточка в SVG

p.s shape-rendering не помогает

Comments

[Вадим]

Скачал файл, увеличил насколько возможно - нет проблем.
win 10, chrome 106.05, разрешение 1440

[Сергей Борисов]

Вадим, При увелечении при каждом шаге присмотритесь.

[Вадим]

Сергей Борисов, а, да, не при каждом шаге, но пару раз проскальзывало.
Ну, скорее всего, это происходит из-за того, что идёт не попадание в браузерную пиксельную сетку.
Без гарантий что это поможет, но у меня пока только одно предложение - перерисовать с недробными значениями в координатах и чтобы значения были кратны 4м.

[Сергей Борисов]

Вадим, Попробуем, спасибо!

[Вадим]

Сергей Борисов, Как попробуйте, независимо от результата, отпишитесь, интересно, верное ли предположение

[Сергей Борисов]

Вадим, не помогло

Answer 1

[Tony]

Привет!

Проблема 1 - применен Inner Shadow на группу. По всей видимости, группы для Figma и для браузера - не одно и тоже. Примените тот же эффект на шейп и всё будет ок (у меня получилось)

Проблема 2 - в Chrome так и не смог получить) в любом случае, ну кто будет увеличивать вашу графику таким образом?

Проблема 3 - у вас там набор близко расположенных векторов. Объедините их в один и удалите лишние точки, тогда и артефактов не будет

Comments

[Сергей Борисов]

Добрый вечер.

1. Спасибо! Помогло

2. Мы эти карточки ещё потом печататем :( Поэтому они могут быть очень большими

3. Тут сложно, пока у нас не получается реализовать будем ещё пробовать

[Tony]

Сергей Борисов, по пункту 2 - при печати не должно быть таких багов. SVG скейлится до бесконечности почти, артефакты это баг рендера в браузере почти наверняка

3) Вроде не должно быть проблем, просто выделите все нужные, cntrl+e/cmnd+e, потом в рекдакторе удалите лишние

[Сергей Борисов]

Figma-designer, Будем пробовать, спасибо Вам!

[Сергей Борисов]

Figma-designer, Спасибо! Получилось