Почему chrome так криво отображает эти svg — паттерны?

Question

[lagudal]

Приветствую, как пример, у меня есть парочка паттернов, в svg, используются как background-image соответственно no-repeat.
Заметил в хроме неприятную особенность: вначале некоторое кочичество повторов рисуется корректно, затем, через несколько повторов, появляются неточные соединения, далее снова все нормально, и так далее, причем как по горизонтали, так и по вертикали.
Характерно, что вижу эту проблему только в хроме, в фф и даже в ie11 этой проблемы нет.
Хотелось бы узнать причину, если она вообще есть.
Вот сами паттерны и скрины для понимания

Answer 1

[Alexandr_TT]

Разные браузеры по разному реализуют anti-aliasing. Поэтому для устранения данного эффекта можно использовать атрибут SVG shape-rendering="crispEdges" . Этот атрибут отлично работает с горизонтальными и вертикальными линиями.
Ещё лучше при написании кода не использовать дробные значения, как у вас: 13.096px и 0.85px

Comments

[lagudal]

Атрибут никак не повлиял, а вот с дробными - в первом приближении, да, достаточно убрать дробные у вьюпорта и высоты-ширины.
В первом - синем - там вообще проблем нет, там еще и все координаты изменил на 13 и 1, и все идеально.
Во втором - сложнее, изменил пока только вьюпорт и ширину высоту. При очень детальном рассмотрении есть места, где можно заметить артефакты, их немного, но есть.
Проблема в том, что собственно, svg код я не писал, паттерны сделал в иллюстраторе - изначально это были векторы цельные, примерно 10см х 10см милиметровки, но для фона взять паттерн всегда лучше.
Но главное, смысл понятен, будет время, оптимизирую и второй паттерн до оптимального.