Как сохранить только видимые части каждого объекта/пути изображения SVG? Например, «сгладить» все SVG.

В иллюстраторе:

Если нет прозрачности...

...выберите фигуры, затем используйте 'Trim'кнопку в Pathfinderокне.

Обрезка может вести себя странно с объектами, имеющими прозрачность, так что...

Если есть прозрачность...

... выберите квадраты, затем Object > Flatten Transparencyустановите «векторы» на 100%.

Изображение, иллюстрирующее это из этого другого вопроса :

Иногда Flatten Transparencyоставляет нижний объект неразрезанным, сидя под всем остальным. Если это произойдет, то, поскольку Flatten Transparencyвсе ваши векторные фигуры имеют непрозрачность 100%, вы можете просто выбрать эту нижнюю фигуру и фигуры, которые перекрывают ее, и использовать, Trimкак указано выше.

Затем сохраните как SVG, если вам нужен SVG. Чтобы избежать проблемы совпадающих краев, которую описывает Илмари Каронен, вы можете Object > Transform > Transform Eachмасштабировать каждый объект, скажем, на 100,5% вокруг его собственного центра. Или вы можете дать каждому объекту очень тонкую обводку своего цвета заливки (вероятно, это лучший подход, поскольку в идеале небольшое перекрытие должно быть одинаковым для всех, а не пропорциональным размеру).

У меня есть идея, хотя я уверен, что есть лучший способ.

Использование Inkscape

1. Разместите свои объекты и убедитесь, что цвет каждого объекта установлен так, чтобы ни один из них не соприкасался (используйте как можно меньше цветов), вы измените их позже.
2. Edit -> Preferencesв нижней части выделения выберите Bitmapsнабор Resolution (256)и закройте.
3. выберите все ваши объекты, а затем Edit -> Make a Bitmap copy(это займет немного времени, создание изображения).
4. Path -> Trace Bitmapтолько в Mode tapустановленном отметке .Multiple scan: Scans (6, one for each color used plus one for background), Colors (on)Remove background
5. В Options tabотметке все! Отправить OK.
6. Right clickв группе выберите Ungroup.
7. Теперь выберите все ваши объекты и Path -> Break Apart.
8. И теперь вы можете изменить свои цвета, чтобы выглядеть красиво!

Возможно, вам придется удалить некоторые случайные линии.

Обязательно установите Resolutionзаднюю часть!. И дайте мне знать, если это работает для вас.

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

Это происходит по двум причинам — сглаживание и округление:

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

  Чтобы понять, почему это происходит, представьте себе пиксель, половина которого покрыта, скажем, красной фигурой, а ровно противоположная половина покрыта зеленой фигурой, причем обе эти фигуры нарисованы на синем фоне. С «идеальным» визуализатором этот пиксель будет на 50% красным и на 50% зеленым, без просвечивающего синего. Однако в реальном рендерере происходит то, что он сначала рисует, скажем, красную фигуру, делая пиксель на 50% красным и на 50% синим. Затем поверх этого фона рисуется зеленая фигура, в результате чего половина исходной цветовой смеси заменяется зеленым, в результате чего в пикселях остается 25 % красного, 50 % зеленого и 25 % синего.

• Другая причина, по которой совпадающие края могут быть проблематичными, заключается в том, что средства визуализации обычно используют математику с плавающей запятой, которая подвержена небольшим ошибкам округления. Таким образом, несмотря на то, что ребра должны точно совпадать, неточности в их вычислении могут немного изменить их фактический путь, оставив крошечный зазор. (Это более серьезная проблема с 3D-рендерингом, где такие числовые проблемы могут оставить рендерера неуверенным в том, какая из двух совпадающих поверхностей должна быть отрисована перед другой, но это также может повлиять на 2D-рендеринг.)

В принципе, проблемы сглаживания можно было бы избежать, если сначала визуализировать все изображение с очень высоким разрешением (скажем, примерно в 16 раз выше целевого разрешения в каждом направлении) без сглаживания, а затем уменьшать его, чтобы сгладить края. Однако это был бы очень дорогой метод рендеринга по сравнению со стандартным рендерингом SVG со сглаживанием, поэтому он обычно не используется. Кроме того, это все еще не полностью решит проблемы с численной точностью.

Таким образом, практическое решение состоит в том, чтобы по возможности избегать совпадающих краев. Пока вы убедитесь, что все соседние фигуры в достаточной степени перекрываются, стандартный алгоритм сглаживания будет работать нормально, и вы не увидите явных промежутков между фигурами.