Пиксилизация SVG

Question

Имеется вектор, при больших размерах он имеет хорошие границы, но при уменьшении размера от 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 были взяты простые прямоугольники и сделаны закругления. Как можно исправить это?

Бывает что на определенных размерах вектор выглядит идеально, а на некоторых отвратительно.

Answer 1

Пиксилизация происходит из-за того, что координаты имеют дробную часть.
В вашем примере: d="M780.5 169.6a42

Вот как это выглядит :

У SVG стандартная, целочисленная величина - 1px поэтому при рендеринге дробной части она добивается до целого серыми тонами.

Посмотрите ответ на Enso.

Кратко:

1. Используйте целочисленные svg значения координат
2. Используйте атрибут shape-render = "crispEdges"
3. Если возможно изменение дизайна, избегайте контрастных цветов границ.

Практические советы

• Если нужна стандартная иконка, то лучше взять готовую, которую рисовали профессионалы Верный показатель - небольшой код

Если хочется нарисовать самостоятельно, то необходимо:

1. Выбирать минимально-достаточные размеры viewBox
2. Помнить, что ширина линии размещается симметрично относительно осевой. Если ширина линии 4px, то 2px будут внешними. Эта одна из причин подрезки контуров.

Ниже пример расположения линии шириной 1px Видите по полпикселя относительно осевой

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

В вашем примере я нарисовал три линии, шириной 4px, концы линий закруглены stroke-linecap:round;

Ниже код:

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"  height="10vh"
viewBox="0 0 40 40" version="1.1" style="border:1px solid red">
<style>
.s0{
 fill:none;
 stroke-linecap:round;
 stroke-width:4;
 stroke:#000;
}
</style>

  <path d="M5 10 35 10" class="s0"/>
  <path d="M5 20 35 20" class="s0"/>
  <path d="M5 30 35 30" class="s0"/>
</svg>

Для изменения размера иконки, используйте - height="10vh"
Красная рамка показывает размеры холста SVG, удобно при отладке, после завершения удалите - style="border:1px solid red"