Как убрать пикселизацию на стыках соседних фрагментов SVG?

Привет всем у кого такая же проблема. Тк, мне никто не ответил. За это время, я нашел решение сам.

Итак, повторяйте за мной.

1. Откройте иллюстратор
2. Выберите проблемный элемент
3. И в верхнем меню, Объект->Контур->Создать параллельный контур
4. Блокируете все не нужные слои для удобства, и оставляете, только те, между которыми есть проблема
5. Выбираете их
6. Выбираете инструмент "Создание фигур" (Shift+M)
7. И нажимаете на часть параллельного контура, которая вышла за пределы допустимого объекта
8. Теперь выберите инструмент "Выделение" (V)
9. Выберите элемент, который недавно выделили "Созданием фигур"
10. Удаляете этот элемент с помощью "delete" или "Backspace"
11. Также, чтобы не загружать файл, ненужными элементами, выберите то, что было в самом начале, и также удалите
12. Профит!

Upd. Забыл сказать, элемент который вы выбрали для "Параллельного контура", нужно поставить Под другой проблемный элемент чтобы не было казусов, что "Параллельный контур" налезает на объект

Теоретический ответ

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

Например, сравните следующие два примера:

<svg width="50" height="50">
  <rect x="9.5" y="9.5" width="31" height="31"/>
</svg>

<svg width="50" height="50">
  <rect x="10" y="10" width="30" height="30"/>
</svg>

Вот, как это выглядит при увеличении в 4 раза.

Каждый раз, когда ваша фигура проходит через середину пикселей, вы получите серые пиксели из-за сглаживания, которое используют 2D рендереры.

Можно использовать атрибут SVG shape-rendering="crispEdges" для отключения сглаживания браузером. https://developer.mozilla.org/ru/docs/Web/SVG/Attribute/shape-rendering

crispEdges

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

<svg width="50" height="50">
  <rect x="9.5" y="9.5" width="31" height="31" shape-rendering="crispEdges"/>
</svg>

<svg width="50" height="50">
  <rect x="10" y="10" width="30" height="30"/>
</svg>

Картинка увеличена в 4 раза

Серых пикселей, как в первом примере не наблюдается

Универсального, 100% решения проблемы пикселизации нет.

Так как 2D рендеринг зависит от установленной операционной системы, её настроек, видеокарты и какой используется браузер.

Вы можете использовать комплексный подход:

1. Использовать целочисленные значения координат SVG изображений
   Если вы берете готовое изображение с дробными значениями, то можно обработать его SVG оптимизатором

2. Установить целочисленное значение viewBox

3. Использовать атрибут shape-rendering ="crispEdges"

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