10 июня 2018

Стыки фрагментов изображения в SVG

В составных SVG-изображениях на стыках фрагментов может просвечиваться фон, особенно это заметно в браузерах:

Решение

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

В Sketch (версия 50) некорректно экспортируется Angular Gradient, вместо него нужно использовать обычный радиальный градиент.

Точно так же можно маскировать стыки фрагментов внутри изображения, когда сквозь стыки просвечивает фон самого изображения.

Фоновый слой можно быстро создать из двух соседних фрагментов операцией Union.