Почему издалека SVG иконка выглядит пиксельно?

Question

[alan31]

Вот моя как выглядит моя SVG иконка на сайте


А вот так , когда ее приблизить


Почему так происходит и как сделать чтобы иконка на сайте выглядила также качественно , как на второй картинке

Comments

[Капитан Какао]

Откройте сайт с телефона с хорошим дисплеем, или же на ноуте с ретина, и иконка будет норм.
Но если вы открываете на каком нибудь 27 дюймовом мониторе с разрешением 1920x1080 то конео у вас она будет квадратиками. Всё зависит от девайса на котором вы просматриваете.

[alan31]

Капитан Какао, тогда почему SVG иконки на других сайтах у меня отображаются в идеальном качестве

[Капитан Какао]

alan31, тут тоже может быть несколько причин:

1. Они отображаться нормально, потому что большего размера.
2. Или потому, что толщина линий не дробная, ну к примеру толщена линии 1 или 2 пикселя рочно. А у той что плохо отображается, возможно толщена линии 1.56px из за чего получается такой эффект.

Answer 1

[Юрий]

Если вы про полупрозрачную границу во внутреннем контуре иконки, то это артефакты от уменьшения svg в браузере. Значит в том размере, который вы используете на сайте, толщина штриха у иконки оказывается нецелой – какие-нибудь 2,5 пикселя, например. Как браузеру рисовать полпикселя? Вот как может, так и рисует. Выход – делать иконки в размер, соответствующий их минимальному размеру на сайте и следить, чтобы все горизонтальные и вертикальные линии попадали в пиксельную сетку.

Вот здесь два абсолютно одинаковых svg, но во втором содержимое сдвинуто на полпикселя вверх и влево. Просто сравните:

Comments

[alan31]

Я так и пытался сделать иконки :
Вот например я сделал просто квадрат с шириной и высотой 24рх и границой 2рх , но результат точно такой же:

Издалека


При приближении:


Также вот скриншот из фигмы:


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

[Юрий]

alan31, в вёрстке у вас эти иконки того же размера, 24×24? Если да, и всё равно расплывается, попробуйте перевести обводку в заливку (Ctrl+Shift+O в фигме).
И масштаб в браузере проверьте, чтобы был 100%.

[alan31]

Юрий, да , в верстке размеры такие же , при заливке иконка выглядит качественно(на фото возможно не видно ,но это так) , видимо размывается только внутренняя граница


P.S 1 Также я в браузере изменил fill на белый цвет , и опять же внутренняя граница будто размылась
P.S 2 Я использовал shape-rendering:crispedges и размытие ушло но границы немного деформировались: