Имеется вектор, при больших размерах он имеет хорошие границы, но при уменьшении размера от 25px - вектор начинает себя вести очень странно! Появляется эффект пиксилизации на границах!
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 800"><g stroke="#fff" stroke-miterlimit="10"><use xlink:href="#B"/><use xlink:href="#B" y="252"/><use xlink:href="#B" y="496"/></g><defs ><path id="B" d="M780.5 169.6a42 42 0 0 1-41.9 41.9H61.3a42 42 0 0 1-41.9-41.9v-.8a42 42 0 0 1 41.9-41.9h677.3a42 42 0 0 1 41.9 41.9v.8z"/></defs></svg>
Иконка в 50px
Иконка в 20px
Как видно у вектора у которого width:20px;
появились серые или полупрозрачные полоски. Можно ли от них как либо избавится, может не правильно нарисован сам вектор?
Уже в стилях прописал shape-rendering: geometricPrecision;
В illustrator были взяты простые прямоугольники и сделаны закругления. Как можно исправить это?
Бывает что на определенных размерах вектор выглядит идеально, а на некоторых отвратительно.