Белые зазоры между фигурами SVG: диагностика и исправление

Тонкие белые линии между фигурами SVG часто оказываются швами отрисовки, а не отверстиями в файле. Модель отрисовки SVG позволяет реализациям применять сглаживание при растеризации векторной графики; поэтому отдельно рассчитываемые соседние края могут при определённом масштабе обнаруживать тонкую линию цвета фона. При другом увеличении или в другом рендерере линия может исчезнуть.

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

Шов отрисовки или настоящий зазор?

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

Почему соприкасающиеся контуры могут показывать шов

На экранах векторные фигуры отображаются на пиксельной сетке. Когда край пересекает пиксель, сглаживание смешивает в нём цвета фигуры и фона, чтобы край выглядел плавно. При отдельной отрисовке двух фигур граничные пиксели каждой могут смешиваться с фоном, даже если их векторные координаты совпадают.

Масштаб добавляет ещё одну переменную. Общая координата, попадающая точно на границу пикселя при одном размере, при другом может оказаться между пикселями. Округление при экспорте также может немного сдвинуть одну границу. Поэтому линия может появиться при увеличении 67%, исчезнуть при 100% и вернуться в маленькой миниатюре на сайте.

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

Главное различие — имеют ли исходные контуры общий край. Шов отрисовки может появиться поверх соприкасающейся геометрии; настоящий зазор остаётся видимым между самими контурами.

Выполните четыре теста перед редактированием

1. Измените масштаб

Посмотрите SVG при нескольких увеличениях, включая 100% и большое увеличение. Настоящий зазор остаётся между контурами при приближении. Шов отрисовки часто мерцает, меняет толщину или исчезает.

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

2. Смените фон

Разместите SVG на белом, чёрном и ярком цветном фоне. Если тонкая линия принимает цвет фона, рендерер показывает фон между отдельно рассчитываемыми краями. Это может быть как шов отрисовки, так и настоящий прозрачный зазор, поэтому продолжите проверкой контуров.

3. Экспортируйте PNG высокого разрешения

Экспортируйте изображение с размерами в два или четыре раза больше окончательных, затем осмотрите уменьшенный результат. Если шов исчезает в экспорте высокого разрешения, вероятная причина — растеризация, зависящая от масштаба. Если он остаётся и его можно измерить, проверьте координаты и точность экспорта.

4. Используйте контурный или каркасный режим

Отключите заливки и проверьте реальные границы. Выделите соседние узлы и сравните их координаты. Если контуры точно сходятся, видимая линия — проблема рендерера. Если конечные точки или края не совпадают, исправьте геометрию.

Больше вариантов редактирования контуров описано в статье как редактировать SVG. Сохраните копию, потому что лучшее исправление зависит от применения файла.

Исправьте шов отображения

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

Другие варианты:

• Добавьте очень тонкую обводку того же цвета, что и фигура, расположив её так, чтобы она закрывала шов.
• Поместите подходящую базовую фигуру позади всех соседних частей.
• Повысьте точность координат при экспорте SVG, если округление разделило общие края.
• Создайте растр большего размера и уменьшите его, если окончательный результат — PNG.

Свойство SVG shape-rendering позволяет запросить геометрическую точность или более резкие края, но MDN описывает его как подсказку для рендерера, а не переносимую гарантию исчезновения всех швов. Прежде чем применять такую подсказку ко всему файлу, прочитайте когда crispEdges помогает, а когда нет.

Выберите одно исправление и проверьте его в реальной целевой среде. Несколько решений одновременно могут создавать тёмные полосы или утолщения в местах перекрытия фигур.

Исправьте настоящий геометрический зазор

Если контурный режим или последующий результат подтверждает отверстие:

1. Привяжите нужные узлы к одной координате.
2. Продлите соседние края до настоящего соприкосновения.
3. Соединяйте конечные точки только тогда, когда дизайн требует одного непрерывного контура.
4. Удалите дублирующие или случайные сегменты.
5. Повторно экспортируйте с достаточной точностью координат.
6. Снова откройте файл и повторите четыре теста.

Не закрывайте зазор белой фигурой. Это скрывает симптом только на белом фоне и оставляет лишний объект в файле.

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

Целевая среда определяет подходящее исправление

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

Список проверок SVG перед резкой описывает проверку для устройств. Для размытого отображения или скрытых пикселей вместо швов используйте диагностику пикселизации SVG.

Где подходит PerfectVector

Если зазоры рассеяны по результату трассировки PNG или JPG, вернитесь к растровому исходнику, прежде чем исправлять десятки контуров. Уберите явные блоки сжатия, удалите ненужный фон и сохраните наиболее чёткие исходные края. Затем используйте преобразование изображения в вектор, чтобы восстановить видимые области как редактируемые контуры, и проверьте предпросмотр.

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

Частые вопросы

Почему между контурами SVG видны белые линии? Браузер или приложение может отдельно сглаживать соседние края, позволяя фону просвечивать при определённых масштабах. Контуры при этом могут точно соприкасаться. Перед редактированием измените масштаб, фон и рендерер, а также проверьте контурный режим.

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

Уберёт ли объединение всех контуров зазоры? Возможно, но оно также уберёт структуру отдельных цветов и редактирования. Объединяйте контуры только тогда, когда они должны быть одной фигурой. Многоцветному рисунку обычно нужны отдельные объекты, поэтому совпадающие края или контролируемое перекрытие безопаснее.

Почему зазоры появляются только у маленького SVG? Масштабирование сдвигает векторные границы относительно пиксельной сетки. При некоторых размерах оба соседних края смешиваются с фоном в одном ряду или столбце пикселей. Более крупная отрисовка или небольшое перекрытие могут предотвратить просвечивание фона.

Важны ли маленькие зазоры SVG для 3D-печати или резки? Они важны, если сохраняются в грани, сетке или траектории инструмента. Шов только на экране не доказывает поломку геометрии. Проверьте последующий предпросмотр и исправьте трещины или открытые контуры, меняющие изготавливаемый объект.

Источники

1. W3C — модель отрисовки SVG 2 — Описывает порядок рисования SVG, обрезку, композицию и сглаживание.
2. MDN — shape-rendering — Описывает подсказки отрисовки, доступные для фигур SVG.
3. W3C — координатные системы SVG 2 — Определяет модель координат, области отображения и преобразований, лежащую в основе зависящей от масштаба отрисовки.

---

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